Как лучше: больше html или больше css ?

Я джуниор - верстальщик. Хотелось бы узнать мнение сообщества, как лучше делать и почему : меньше дублировать css-свойства и сделать больше классов или же меньше классов но тогда будут дублироватся свойства.? Что быстрее будет работать ?
  • Вопрос задан
  • 2726 просмотров
Решения вопроса 1
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
С точки зрения производительности - меньше классов, быстрее будет обсчитываться результат. Почему? потому что меньше селекторов и выше их специфичность - быстрее стили найдут свое место в DOM.

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

С точки зрения здравого смысла следует соблюдать баланс. Скажем скрытие элементов удобно делать через добавление/удаление класса с элемента. В этом случае класс будет иметь только одно css свойство, но зато будет очень удобно скрывать элементы из JS например. С другой стороны, наличие таких вещей как классы хелперы (pull-left/pull-right/clearfix), которые можно в любой момент применить к элементу и не менять стили это удобно, но становится сложнее поддерживать верстку, это сказывается на производительности и т.д. В этом ключе стоит это все заключать в более специфичные классы для конкретных элементов. Хотя тут есть масса случаев когда можно и так жить.

Можно выносить какие-то общие вещи в базовый класс и добавлять специфичные стили по мере необходимости при помощи дополнительных стилей. Например в случае с кнопками удобно иметь класс .btn и несколько классов определяющих их размер и цвет, типа .btn-small, .btn-large, .btn-orange и т.д. Но в любом случае вы должны руководствоваться здравым смыслом.

Ну и да, используйте препроцессоры стилей. И да, никогда не используйте инлайн-стили для верстки.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Вся разметка должна быть в html, все стили в css.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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