Комментарии

[gladkih]

Статья из серии «Кэп рассказывает».

[Den-dp]

Эх, вот если бы всё о том же, но в контексте препроцессоров! Ведь инструментарий более продвинутый и новый, а в неопытных руках не смотря на возможную "красивость", понятность и структурированность не скомпилированного LESS\SCSS\Stylus файла результирующий CSS может содержать описанные в статье проблемы: неэффективные контекстно зависимые сложно переносимые селекторы с большим весом. И поэтому была бы намного интересней практика о том, как добиться баланса между удобоваримым по структуре LESS\SCSS\Stylus'ом и оптимальным и эффективным результирующим CSS'ом.

[pafnuty]

Спасибо за статью, она будет крайне полезна новичкам. Но я не соглашусь с этим не совсем удачным примером:

В CMS была ошибка, которая привела к тому, что генерируемая разметка выглядела вот так

И эта (или подобная) ошибка могла оставаться длительное время незамеченной, что совсем не хорошо. Думаю гораздо более важно уметь быстро исправить возникшую ошибку, а ещё лучше не допускать попадания ошибок в продакшн :)

[dshster]

Всё вышенаписанное из принципов "вёрстки независимыми блоками" откуда и развивался бэм

[SilentImp]

BlackTears добавляйте статьи в кучу, голосуйте и получите те, которые вам интересны

Den-dp Так препроцессоры обречены генерировать несколько избыточный код, например ввиду таких конструкций:

.class1{
    color:$normal;
    .class2{
        color:$warning;
        }
}

Использование препроцессоров дает другие плюсы, часто за счет менее эфективного кода на выходе. Но Робертс честно отмечает, что это строго говоря не самая страшная проблема.

pafnuty cогласен.

[oresh]

"Браузеру нужно сделать в четыре раза меньше работы"

На самом деле это не совсем так. Браузер рендерит элементы 1 за другим вниз по иерархии DOM'a. Как только он встречает элемент, он парсит его свойства (элемент, класс, id, аттрибуты) и по ним уже начинает искать css. Если указан только 1 класс (.nav) - как только будет найдено совпадение - css добавляется в "очередь стилей".

Когда браузер пробежался по всему css он проверяет всю очередь и применят стили с максимальным весом (об этом есть в статье). Это коротко алгоритм построения элемента )

Теперь к вопросу у скорости. Если указан всего 1 класс в селекторе - браузер проверяет совпадение с аттрибутами элемента и при совпадении сразу добавит в очередь. Скажем скорость такой операции 100мс.

В случае если вес селектора больше, скажем .sidebar .nav, браузер проверяет первый класс (100мс), затем при совпадении начнет проверять каждого родителя до первого совпадения. Скажем между .sidebar и .nav 4 вложенных элемента. Это значит что браузеру понадобится 100мс для проверки на совпадение каждого из родителей, плюс ~10мс для определение родителя. Итого на 540мс включая проверку самого элемента.

Если раница в положении в DOM структуре еще больше - скорость опять уменьшается. Так что разница скорости выполнения между html body .header .nav{} и .nav{} может составлять от 4 до (html>body>.header>.nav) до бесконечности, в зависимости от структуры страницы. Надеюсь не слишком длинный комментарий )