Какой вариант вёрстки лучше использовать?

Question

[Alexander Lashchevsky]

Здравствуйте!
Подскажите пожалуйста, на какие подводные камни я могу наткнуться при вёрстке по первому и второму типу?
Или это зависит только от личных предпочтений и удобства?

<div class="blockname">
   <div class="title">Заголовок</div>
   <div class="content">Содержимое.</div>
</div>

.blockname { /*стили*/ }
.blockname .title { /*стили*/ }
.blockname .content { /*стили*/ }

или

<div class="blockname">
   <div class="blockname_title">Заголовок</div>
   <div class="blockname_content">Содержимое.</div>
</div>

.blockname { /*стили*/ }
.blockname_title { /*стили*/ }
.blockname_content { /*стили*/ }

P.S. вопрос, как мне кажется, глупый, но всё-таки интересно, почему одни пользуются первым вариантом, а другие - вторым.

С уважением,
Александр.

Answer 1

[Viktor Vsk]

.blockname_title врядли кто-то пользуется (по крайней мере, осознанно)
скорее, что-то вроде .blockname__title_red, .blockname__header_main

Первый вариант - это классические каскады CSS (cascading style sheets).
Второй - результат одной из методологий.

Первый - кажется очевидно понятным и интуитивным. Второй невозможно поддерживать вручную: все эти разделители между блоками, элементами и модификаторами (BEM) должны создаваться специализированными препроцессорами (то есть, по сути, выучить еще один DSL).

Однако, если проект большой, долгоподдерживаемый и команда большая - каскады начинают сильно усложнять жизнь и замедляют масштабирование, в то время как модульную верстку можно разрабатывать независимо.

Answer 2

[Сергей]

ИМХО первый вариан быстрее работает

Comments

[Viktor Vsk]

Каким образом очередной обход DOM может работать быстрее? Браузер, вроде как, прмиеняет стили справа-налево: сначала найдет все title, потом оставит из них только те, которые в blockname

[Сергей]

title он будет искать в blockname а blockname_title будет искать по всему документу

[Viktor Vsk]

@serzhei откуда такая уверенность?)

CSS селекторы читаются справа налево

Чтобы определить, нужно ли применять правило к некоторому элементу, селектор читается браузером справа налево.

Если у вас есть, скажем, правило div#content p { color: #003366; }, тогда для каждого элемента, в момент его обработки браузером, сначала будет проверяться, является ли элемент параграфом. Если он является таковым, тогда браузер пойдёт вверх по DOM дереву и проверит, есть ли div с id="content". Если условие верно, тогда браузер продолжит поиск body.

Такой принцип работы выбран не случайно. Браузер определяет стоит ли применять стилевое правило к элементу на момент прорисовки значительно быстрее. Чем меньше узлов нужно обойти, тем быстрее обрабатывается правило.

Источник, например: artkiev.com/blog/css-selector-performance.htm

[Сергей]

разве так логически быстрее? что он будет проверять является ли каждый элемент параграфом а потом еще начнет искать див в котором он лежит. я не знаю почему в своем методе уверен, это еще когдато только начинал верстать - прочитал статью (а может она мне и приснилась так как это уже давно было) и у меня пустая ячейка заполнилась такой информацией, да и логически правильно. Вот например у нас есть блоки .header .content и .footer. И в .header лежит p.title, если мы пропишем p.title {color: red;} браузер будет обходить весь документ и искать этот параграф. А если напишет .header p.title {color: red;} он обойдет только весь .header а .content и .footer он даже не затронет.

[Евгений Петров]

@victorvsk браузер обрабатывает справа налево только в режиме динамической отрисовки — встретил узел, рассчитал каскад, применил к нему правила. Он не ищет все такие элементы в DOM, он отрабатывает их по одному.

По этой причине every declaration just once — одна из самых приоритетных рекомендаций с точки зрения Google.

Вот есть пара десятков правил, которые наследуются. Вы же не убиваете их в каждом селекторе. Так что скорость расчёта каскада с учётом наследования вы не снизите существенно. Я не беру в расчёт говнокод, ибо едва ли вы его плодите. Так что в рамках нормального подхода в скорости второй подход не выиграет.

А вот ещё вопрос — .blockname_title будет использоваться где-либо, кроме как внутри .blockname?

Answer 3

[pumping]

сделай простой сайт как этот и не парься just-prognoz.ru