Многоразовые CSS классы или лоты?

Question

У меня был вопрос, о котором я часто задавался вопросом.Лучше иметь несколько классов 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» в сочетании с классами и т. Д.

Answer 1

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

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

 #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;
}

Answer 2

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

Answer 3

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

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

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

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

Answer 4

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

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

Ваше второе предложение определенно является подходящим.