@ViT93

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

Уважаемые знатоки, верстальщики. Во время верстания сайта, задался вопросом, профессионально ли это, использовать наследования в css файле место того, что бы добавлять классы в html код. Посмотрел код популярных сайтов и заметил что все используют огромное количество классов в html коде место наследования. Понятно что классы в html должны присутствовать.
button class="btn btn_search btn_default align-left ... ">Кнопка</button>
Но это же перебор согласитесь?
Мне удобнее работать с наследованием, люблю чистый код. Является ли такой метод верстки профессиональным?

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

Пример как не нравится. Добавляем овер дохрена классов в html.
5e4af54a15902664861965.png
  • Вопрос задан
  • 382 просмотра
Решения вопроса 3
IninsaY
@IninsaY
Я не мастер, но нужно верстать как удобно и при этом не нарушать читабельность кода, так что любая верстка, которая нормально отображается, и не делает каши в голове - хорошая
Ответ написан
Aetae
@Aetae
Тлен
Ну вот смотри на примере той же button - каждый класс как-то модифицирует отображение кнопки. Каждый из этих классов может использоваться по отдельности и в любых сочетаниях. Ты просто один раз прописал эти классы, а дальше по необходимости накидываешь какие надо: одна кнопка так, другая эдак, ничего не дублируется ничего не надо заново выверять.
Как ты это собрался делать каскадом? Железно прописывать стили для каждой вложенности? Так завтра те бизнес скажет: "Передвинь кнопку на блок вниз и влево", и у тебя всё посыпется, придётся переписывать куски css. А после завтра попросят передвинуть весь блок и выровнять кнопку по правому краю. Опять всё переписывать.
Тащем абсолютно непродуктивно это.
Ответ написан
@strelok011
Добавлю к первому комментатору несколько замечаний
1. Чтобы качественно верстать, надо знать, что происходит по капотом. Каскады в css - не просто так называются каскадами. Браузер парсит цепочку каскада начиная с самого правого класса. Отсюда и следствие, что выгоднее для производительности: если мы пишем .mybox div div a, то парсер берет все теги a на странице, проверяет первое условие вложенности в div, потом следующее... Если же писать .mybox .inbox .link - то выборка будет только элементов с указанными стилями.
2. Хороший стиль в верстке - когда следующий за тобой разработчик не проклинает тебя и всю твою родню из-за загадок и кривого кода. Писать надо лаконично и максимально понятно. Современные мощности позволяют не заморачиваться с длиной имен классов.
3. Верстать лучше всего исходя из предварительного анализа структуры страницы. Можно создать страницу с типографикой, вынести туда все универсальные переиспользуемые компоненты и блоки, оформить их так, чтобы ничего не ломалось при изменении вложенности. Все изменения базового компонента делать через класс-модификатор. Каскады стоит делать в случае, когда в рамках одного компонента прослеживается постоянная структурная и смысловая связь. Т.е. блок вывода анонса новости всегда имеет заголовок, дату, анонс и ссылку. Можно делать каскадом, можно делать по БЭМ прописывая все зависимости в именах классов.
Но если уж взялся использовать какой-то подход - важно пользоваться именно такой устоявшейся конструкцией.
Всех благ :)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы