Блог

Возник вопрос, которым я часто задавался. Лучше ли иметь несколько классов CSS, которые вы можете использовать в нескольких местах на вашем сайте, т. е.

 .padding5 {padding:5px;} 
.margin10 {margin:10px;} 
.left {float:left;}
.right {float:right;} 
  

Итак, ваш HTML-код выглядит следующим образом

 <div class="padding5 left"> ... </div>
  

Или, скорее, иметь явные классы для каждого элемента. т. е.

 .title-demo {padding:5px; float:left;}
  

с помощью HTML

 <div class="title-demo"> ... </div>
  

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

Просто интересно, что рекомендуют там гуру? Моя идея, по сути, заключается в создании «гибридного» решения, которое позволяет включать общий CSS в качестве «padding5» в сочетании с классами и т.д.?

НЕТ! Имена классов Css должны быть описательными и контекстуальными. Вы замыкаетесь в катастрофе сопровождения так, как вы это описываете. Что, если заполнение padding5 станет 10px позже? Представьте класс с именем «blue», цвет которого вы меняете на красный. В итоге у вас будет чертовски сложный веб-сайт для обслуживания.

Я предлагаю использовать именованные части вашего веб-сайта:

  #Agenda {
 }

 #Agenda .Item {
 }

 #Agenda .Item h1 {
 }
  

ОБНОВЛЕНИЕ после всех комментариев:

как насчет присвоения частям вашего сайта, имеющим общие свойства, концептуального имени -> SideBarItem , Acticle , ItemFooter , Widget ,,,,,,,,,,,. И тогда любой элемент вашего сайта получит класс для одной из именованных частей и некоторый дополнительный класс. <div class="Widget WeatherForecast"> и <div class="Widget CurrencyConverter"> класс Widget определяет общие свойства, а другой класс — специфические свойства.

 .Widget {
 padding: 10px;
 float: left;
 margin: 5px;
}

.WeatherForecast {
 background: red;
 color: white;
}

.CurrencyConverter {
 background: blue;
 color: black;
}
  

Определенно позже. класс, подобный .padding5, действительно сводит на нет цель переноса объявлений стилей в таблицу стилей.

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

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

Ваше второе предложение — определенно правильный путь.

Одно из мест, где имена классов на основе стилей могут быть полезны, — это если у вас есть довольно сложный набор стилей, которые вы хотите применить ко множеству разных вещей.

Системы CSS grid (например, http://960.gs ) сделайте это, потому что их стили достаточно сложны (особенно с учетом исправлений для Internet Explorer), и они предназначены для применения ко множеству различных элементов.

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

Но в целом стили CSS разработаны так, чтобы быть достаточно простыми, чтобы вам не нужно было инкапсулировать их набор.