Использование множества классов в html или наследие в css?

Question

[ViT93]

Уважаемые знатоки, верстальщики. Во время верстания сайта, задался вопросом, профессионально ли это, использовать наследования в css файле место того, что бы добавлять классы в html код. Посмотрел код популярных сайтов и заметил что все используют огромное количество классов в html коде место наследования. Понятно что классы в html должны присутствовать.

button class="btn btn_search btn_default align-left ... ">Кнопка</button>

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

Пример как мне нравится, наследование в css файле, html трогаем только по необходимости.


Пример как не нравится. Добавляем овер дохрена классов в html.

Comments

[Ankhena]

1. Такой подход имеет право на существование. Почитайте про атомарный css.
2.

Мне удобнее работать с наследованием, люблю чистый код.

main > header {}
И при чем тут наследование?
Это называется дочерние селекторы.
3. В целом, довольно глупо переписывать одни и те же свойства по 100 раз.
Например, для тех же кнопок.
Логично сделать универсальный класс btn, в котором задать все одинаковые свойства.
И к нему добавлять модификаторы (по БЭМу или нет, не важно).
В вашем примере спорный класс про align-left.
Остальные вполне закономерны.

Опять же верстка с помощью многими любимого бутстрапа состоит из добавления аналогичных классов. CSS при этом затрагивается минимально.

Answer 1

[IninsaY]

Я не мастер, но нужно верстать как удобно и при этом не нарушать читабельность кода, так что любая верстка, которая нормально отображается, и не делает каши в голове - хорошая

Comments

[ViT93]

Спасибо за ответ)

Answer 2

[Aetae]

Ну вот смотри на примере той же button - каждый класс как-то модифицирует отображение кнопки. Каждый из этих классов может использоваться по отдельности и в любых сочетаниях. Ты просто один раз прописал эти классы, а дальше по необходимости накидываешь какие надо: одна кнопка так, другая эдак, ничего не дублируется ничего не надо заново выверять.
Как ты это собрался делать каскадом? Железно прописывать стили для каждой вложенности? Так завтра те бизнес скажет: "Передвинь кнопку на блок вниз и влево", и у тебя всё посыпется, придётся переписывать куски css. А после завтра попросят передвинуть весь блок и выровнять кнопку по правому краю. Опять всё переписывать.
Тащем абсолютно непродуктивно это.

Comments

[ViT93]

Я шел по принципу, нужно изменить что-то в определенном блоке, перепиши все стили этого блока)

Answer 3

[strelok011]

Добавлю к первому комментатору несколько замечаний
1. Чтобы качественно верстать, надо знать, что происходит по капотом. Каскады в css - не просто так называются каскадами. Браузер парсит цепочку каскада начиная с самого правого класса. Отсюда и следствие, что выгоднее для производительности: если мы пишем .mybox div div a, то парсер берет все теги a на странице, проверяет первое условие вложенности в div, потом следующее... Если же писать .mybox .inbox .link - то выборка будет только элементов с указанными стилями.
2. Хороший стиль в верстке - когда следующий за тобой разработчик не проклинает тебя и всю твою родню из-за загадок и кривого кода. Писать надо лаконично и максимально понятно. Современные мощности позволяют не заморачиваться с длиной имен классов.
3. Верстать лучше всего исходя из предварительного анализа структуры страницы. Можно создать страницу с типографикой, вынести туда все универсальные переиспользуемые компоненты и блоки, оформить их так, чтобы ничего не ломалось при изменении вложенности. Все изменения базового компонента делать через класс-модификатор. Каскады стоит делать в случае, когда в рамках одного компонента прослеживается постоянная структурная и смысловая связь. Т.е. блок вывода анонса новости всегда имеет заголовок, дату, анонс и ссылку. Можно делать каскадом, можно делать по БЭМ прописывая все зависимости в именах классов.
Но если уж взялся использовать какой-то подход - важно пользоваться именно такой устоявшейся конструкцией.
Всех благ :)

Comments

[ViT93]

Спасибо)