feinar

Сделаны даже не по MVC.

думая только о логике приложения, а не вспоминая какие именно функции мне нужны.

var classes = ['item-id', 'item-title', 'item-price'],
    table = document.getElementById('table'),
    rows = table.getElementsByTagName('tr'),
    rowIndex, cellIndex, cells, currentRow, currentCell, addToCartCell;

// Пропускаем первую строку, потому что в ней находится заголовок таблицы
for (rowIndex = 1; rowIndex < rows.length; rowIndex++) {
    currentRow = rows[rowIndex];
    cells = currentRow.getElementsByTagName('td');

    for (cellIndex = 0; cellIndex < cells.length; cellIndex++) {
        currentCell = cells[cellIndex];
        currentCell.setAttribute('class', classes[cellIndex]);
    };

    addToCartCell = document.createElement("td");
    addToCartCell.innerHTML = '<a class="add_item">Добавить в корзину</a>';
    currentRow.appendChild(addToCartCell);
};

function getTable() {
    return document.getElementById('table')
}

function getRows(table) {
    var allTableRows = table.getElementsByTagName('tr'),
        rows = [],
        index;

    // Пропускаем первую строку, потому что в ней находится заголовок таблицы
    for (index = 1; index < allTableRows.length; index++) {
        rows.push(allTableRows[index]);
    }

    return rows;
}

function appendAddToCartButton(row) {
    var cell = document.createElement("td");
    cell.innerHTML = '<a class="add_item">Добавить в корзину</a>';
    row.appendChild(cell);
}

function setCellsClasses(row) {
    var classes = ['item-id', 'item-title', 'item-price'],
        cells = row.getElementsByTagName('td'),
        index;

    // Обратите внимание, что здесь мы итерируем по классам, а не по ячейкам
    // В том случае, если в функции prepareTable кто-то по ошибке
    // поменяет местами строки добавления классов и кнопки добавления в корзину
    // код не сломается
    for (index = 0; index < classes.length; index++) {
        cells[index].setAttribute('class', classes[index]);
    }
}

function prepareTable() {
    var table = getTable(),
        rows = getRows(table),
        rowIndex, currentRow;

    for (rowIndex = 0; rowIndex < rows.length; rowIndex++) {
        currentRow = rows[rowIndex];
        setCellsClasses(currentRow);
        appendAddToCartButton(currentRow);
    }
}

prepareTable();

• организация стилей, то есть держать все в одном файле не удобно особенно когда проект длится годами
• Дублирование стилей и селекторов. По мере развития проекта появляются какие-то снипиты которые можно реюзать. Так же у вас может появиться масса однообразных селекторов отличающихся лишь немного. При модульных подходах вложенности редко имеет место быть но все же имеет. Но не будем забывать что большинство фигачит селекторы просто так. В итоге если мы переместили блок или переименовали класс какого-то блока нужно отредактировать еще массу селекторов.
• Привязка размеров и параметров к другим стилям, например у вас в стилях задана ширина блока, от нее зависят другие параметры, отступы для других блоков и т.д. Да, в css3 появился calc для этого но это было относительно недавно и только с недавних пор можно почти без опаски использовать эту штуку.
• Таблицы стилей, как и HTML ориентированы на удобный разбор этого добра машиной, но не человеком. Человек же существо ленивое и как-то вот лень лишний раз скобку поставить или точку с запятой. Просто лень.

• У CSS есть такая штука как @ import. Но не очень круто импортировать сотню стилей в продакшене. Стоит сделать так что бы все стили были склеены при сборке проекта. Эта идея в итоге развилась и если разработчик использует это дело правильно, можно зайти в любой файл со стилями и увидеть список всего от чего зависят эти стили. Какие стили подключаются и т.д. Причем один файл с зависимостями может быть подключен в нескольких файлах а препроцессор сам разберется как и куда все вставлять сгенерив максимально оптимизированный по структуре файл. А разработчик получил четкую структуру файлов и возможность быстро найти где что и от чего зависит.
• С селекторами проблему предложили решить наиболее логичным вариантом. Если у нас есть вложенные селекторы, то имеет смысл определять их внутри блока этого селектора. Это существенно упрощает поддержку стилей. Так же для управления снипитами и прочим добавили миксины - эдакие параметризованные или нет функции которые выплевывают шматок CSS. До появления штук вроде autoprefixer это был единственный способ писать поддерживаемые стили, использовать плюшки CSS3 и вообще новые плюшки и не сойти с ума от префиксов. Префиксы это только пример, там могут быть самые разные штуки позволяющие грамотно производить реюз стилей
• Проблему зависимостей значений стилей друг от друга решили... собственно самым очевидным способом - переменные. Это удобно, легко поддерживать и в умелых руках это мощный инструмент. Нужно поменять базовые цвета - не нужно лазить по 100500 блоков и править значения руками, можно поправить переменные и все будет хорошо.
• Насколько я помню SCSS/LESS не стремились решить эту проблему. Какие-то решения образовывались сами собой с течением времени. В плане минимализма и выразительности пожалуй сейчас самая крутая штука это stylus.