Если бы выбор был, мое первое предпочтение будет иметь классы / другие селекторы.Тем не менее, существуют ситуации, когда встроенные стили - единственный путь.В других ситуациях, просто класс CSS сам по себе требует слишком много работы, и другие типы селекторов CSS имеют больше смысла.
Предположим, вам приходилось разбивать полосу по заданному списку или таблице.Вместо применения определенного класса к каждому альтернативному элементу или строке, вы можете просто использовать селекторы для выполнения работы.Это сделает код простым, но он не будет использовать классы CSS.На проиллюстрируем три способа :
Использование только класса
.alternate {
background-color: #CCC;
}
<ul>
<li>first</li>
<li class="alternate">second</li>
<li>third</li>
<li class="alternate">fourth</li>
</ul>
Использование структурных селекторов класса +
.striped :nth-child(2n) {
background-color: #CCC;
}
<ul class="striped">
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>
Использование встроенных стилей
<ul>
<li>first</li>
<li style="background-color: #CCC">second</li>
<li>third</li>
<li style="background-color: #CCC">fourth</li>
</ul>
Второй способ выглядит наиболее переносимым и инкапсулированным для меня.Чтобы добавить или удалить полосы из любого заданного элемента контейнера, просто добавьте или удалите класс striped.
Однако существуют случаи, когда встроенные стили не только имеют смысл, но и являются единственным выходом.Когда набор возможных значений огромен, глупо пытаться создавать классы заранее для каждого возможного состояния.Например, пользовательский интерфейс, который позволяет пользователю динамически размещать определенные элементы в любом месте экрана путем перетаскивания.Элемент должен быть расположен абсолютно или относительно с фактическими координатами, такими как:
<div style="position: absolute; top: 20px; left: 49px;">..</div>
Конечно, мы могли бы использовать классы для каждой возможной позиции, которую может занять div, но это не рекомендуется.И легко понять, почему:
.pos_20_49 {
top: 20px;
left: 49px;
}
.pos_20_50 {
top: 20px;
left: 50px;
}
// keep going for a million such classes if the container size is 1000x1000 px
<div class="pos_20_49">..</div>