@ViT93

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

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

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

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

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

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