Как красиво верстать такое (без дублирования кода)?

Question

[Думай Головой]

Всем привет!

Заранее извиняюсь за длинную простыню, просто накипело малость и хотелось бы узнать мнения других специалистов.

В лендингах часто встречается такая конструкция (не поленился нарисовать):



Интересуют несколько вещей, которые хочется сделать красиво, так сказать DRY:

1) Заголовок и текст после этого заголовка вроде бы повторяется в секциях (обвёл красным), но то цвет у них другой, то черта после заголовка, то ширина текста разная, то у заголовка отличается font-style... В общем есть различия. Какими блоками/классами их обрамить в каждом конкретном случае, чтобы написать красивый недублируемый css?

2) Вопрос по секциям с повторяющимся серым фоном: добавить класс bg-grey с соответствующим backgroudn-color? Как-то не красиво

3) Вопрос по последней секции: допустим в лендинге такая секция одна единственная, хотя вообще ничем не отличается от других, кроме как padding-bottom и padding-top. Тут вроде бы css инлайн направшивается сам собой, но за такое принято отрывать руки. Как тут сделать красиво? Заводить ради одной секции особенный класс?

Данные вопросы волнуют меня довольно давно, верстаю такие ситуации как попало, по настроению, так как знаю, что css наука не точная. Кроме того знаком (поверхностно) с BEM, OOCSS и SMACSS, но как то не довелось окончательно в них углубиться.

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

В общем буду рад любым советам!
Спасибо!

UPD: моё извращённое понимание БЭМа в данной ситуации. codepen.io/anon/pen/qdVKqy
Понимаю что криво, пожалуйста, ткните носом, в чём мои ошибки?

Answer 1

[Serj-One]

На все вопросы один ответ - блок__элемент--модификатор
Полная документация БЭМ
Краткая статья на тему

Comments

[Думай Головой]

Serj-One Это да. Но такие длинные названия классов немного отталкивают если честно.
Ок, допустим я решился использовать БЭМ. Правильно ли я понимаю его применение в данной ситуации:

codepen.io/anon/pen/qdVKqy

[Сергей Протько]

Ну что-то в этом духе. Единственное что, полностью соблюдать все правила обычно дикий оверхэд. Я обычно стараюсь избегать применения модификаторов для элементов и обхожусь каскадированием.

[Сергей Протько]

Vyad: а еще меня дико напрягает этот префикс в начале блока... я его не пишу. как и большинство других людей. префиксы это удобно но... только когда у тебя ооочень много CSS кода.

Answer 2

[Сергей Протько]

Почитайте про БЭМ. Для выделенных элементов у вас будет один блок, в котором есть элементы:

.intro {}
.intro__heading{}
.intro__text{}
.intro__call-to-action{}

элементы отвечают только за положение внутренних блоков/элементов относительно блока (то есть никаких выставлений цветов по идее там быть не должно, но не верьте мне наслово), к которому пренадлежат эти элементы. Ну и каскадированием баловаться по идее стоит только с ними.

различия в оформлении в этом случае делаются через модификаторы:

.intro--gray {background-color: #efefef}
.intro--wide {padding: 100px 0; }

смысл примерно такой.

Comments

[xmoonlight]

БЭМ - просто трэш..... я читал про него и смотрел их курсы.

[Serj-One]

xmoonlight: И в чём же трэш? Можете аргументировать?

[Думай Головой]

Сергей Протько Спасибо! Обновил вопрос по поводу бэма.
xmoonlight Мне тоже бэм кажется трешем

[xmoonlight]

Serj-One: в том, что для каждого контейнера минимум нужно писать свой модификатор, когда проще перекрыть просто множества: последнее в списке class - имеет высший приоритет.
Мега-избыточность!

[Сергей Протько]

xmoonlight: я тоже так думал, пока не попробовал.... А попробовал я потому что столкнулся с проектом где все было сделано настолько плохо, что просто ужас. В итоге начал искать варианты как стоит делать, остановился на слегка адаптированном под себя варианте БЭМ.

Скажем код выше обычно записывается как-то так:

.block {
    &__heading {}
    &__text {}
    &__call-to-action {}

    &--gray {}
    &--wide {}
}

и в таком виде жить очень даже можно, а проблем возникает в разы меньше.

[Думай Головой]

Сергей Протько препроцессоры делают из бэма конфетку, только приходится долго париться с неймингом блоков, элементов, модификаторов...

[xmoonlight]

Сергей Протько: вот тут ДА! так вот - согласен на все 100%!
НО! это "те же яйца", только в профиль)

[xmoonlight]

Сергей Протько: и еще: если будет ещё .block2 то мне уже придется дублировать модификатор... :(

[Сергей Протько]

xmoonlight: что есть .block2 и почему дублировать? Можно дублирование вынести в миксины. На чистом CSS как по мне полностью без дублирования вообще никак. А с less/sass или еще лучше, с postcss вы сами решаете что да как вы хотите организовывать.

Ну и да, я чистый бэм досихпор не долюбливаю ибо это действительно оверхэд. А если чуть чуть упростить, сохраняя основную мысль несомую этой методологией, то жить становится проще. С учетом модного трэнда вэб компонентов сочитание с бэмом в принципе должно быть логичным.

[xmoonlight]

Сергей Протько: не знаю... я обхожусь без дублирования на чистом...
про недолюбливаю - мы с тобой солидарны)
ну а про тренды.... ну тут я не КЭП, верно?)

[dpismenny]

xmoonlight: ну так можно использовать любой нейминг, но при этом сохранить логику БЭМ. к примеру, так:

.header {}
.header-fixed {}
.header-logo {}
.header-nav {}
.header-nav-link {}

[Думай Головой]

Денис Письменный
а смысл? в теге писать class="header header-fixed" - это удлинять лапшу из классов лишним словом "header-", когда как короче будет class="header fixed"

[Сергей Протько]

Vyad: можно так, можно эдак. Мне нравится вариант с дублированием так как можно легко и быстро определить что где, + у меня была психологическая травма на почве излишней вложенности селекторов так что...

[Думай Головой]

Сергей Протько Так в данном случае не вложенность селекторов, а просто OOPCSS - лапша из классов, которые друг друга дополняют. Вложенность селекторов это же каскад?

[Сергей Протько]

Vyad: да, я избегаю каскадирования как могу (понятно что в пределах разумного, полностью от него отказываться уже неудобно да и бессмысленно).

[Думай Головой]

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

[dpismenny]

Vyad: если .header-nav полностью совпадает по стилям с .footer-nav, то это независимый блок. тогда можно/нужно, также как в БЭМ, описывать отдельный блок .menu {}.

[dpismenny]

Сергей Протько: А как вы ищите элементы из скриптов (просто классы для стилизации, .js-*, data-*)?

[Сергей Протько]

Денис Письменный: data-* атрибуты, но в большинстве случаев у меня приложеньки на ангулярах всяких и искать элементы вообще не приходится.

[dpismenny]

Сергей Протько: а если, к примеру, нужно добавлять к шапке класс .header-fixed при скролле, как будете искать этот элемент?

[Сергей Протько]

Денис Письменный: data-is="stickable-navbar" или что-то в этом духе.

[Сергей Протько]

Денис Письменный: ну и класс который надо долеплять в теории тоже можно в атрибуты запихнуть.

[dpismenny]

Сергей Протько: спасибо! а может есть где-то методология для именования атрибутов? либо просто сайты, где это хорошо реализовано? в основном я вижу либо просто классы+атрибуты, либо js-классы+просто классы. нигде не могу найти примера хорошей реализации.

вот, к примеру, на kremlin:

$(".footer__search i, .footer__smi i, .footer__special i").addClass("is-visible");

[dpismenny]

Сергей Протько: как будет время посмотрите мой последний комментарий :)

[Сергей Протько]

dpismenny: такой методологии нет, есть стандарт web components, на который можно ориентироваться.

[dpismenny]

Сергей Протько: спасибо :)

Answer 3

[xmoonlight]

Перекрывающий класс описываете и подключаете поверх базового когда необходимо
делов то)

.mybox{ display:inline-block; color:#EEE; margin:20px;padding:20px}
.mybox.red{  color:#E22;}

Пишем стиль
<div class="mybox red">Как-то так!</div>

Comments

[Думай Головой]

xmoonlight Это техника вроде OOCSS ещё называется. Но пишут про неё много плохого, мол если у вас поменяется дизайн и red станет blue, то придётся делать автозамену, возможно будут баги... Плюс имя класса не должно называться по имени css свойства - не кошерно пишут в интернете. Хотя сама методика мне нравится

[Сергей Протько]

Vyad: ну тут как приготовишь, просто на мой взгляд БЭМ готовить проще. У тебя есть жесткий список правил, а большинству именно так и проще. Далее уже можно оптимизировать под себя.

[xmoonlight]

"возможно будут баги" - ни разу не было... Можете привести примеры?
"Имя класса" - почему? это очень удобно: я могу сменить 1 значение (напр, color) внутри red и все что было красным станет синим для всех контейнеров, что я перечислю через запятую)

[dpismenny]

xmoonlight: фигово, когда классы имеют привязанность к внешним признакам отображения.

[xmoonlight]

Денис Письменный: обоснуйте.

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

xmoonlight: Во-первых, уберите пробел между классами в CSS.
Во-вторых, днём одна, ночью другая... Завтра такому классу потребуется синий цвет, и что делать? Становиться шизофреником?

[xmoonlight]

Евгений Петров: чем помешал пробел?
про синий ну просто пример и мне так удобнее. можно назвать maincolor и сделать его глобальным, если необходимо менять общий цвет.

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

xmoonlight: Потому что
class="mybox red"
.mybox.red

[xmoonlight]

Евгений Петров: ок... ну я так привык уже и вроде работает... не прально да?

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

xmoonlight: Как может работать композитный класс, указанный как дочерний комбинатор? Делайте пример на jsfiddle.net

[xmoonlight]

Евгений Петров: да, я делал глобальный комбинатор раньше. все верно! Спасибо! Поправил!