Встроенные стили против классов
Я всегда знал, что для любого проекта я использую классы поверх встроенных стилей. Но есть ли какие-нибудь статьи / публикации / блоги, определяющие плюсы / минусы каждого? Я спорю об этом, и я не могу найти сообщение в блоге, которое я прочитал давным-давно об этом.
11 ответов
Есть простая причина. Смысл CSS заключается в том, чтобы отделить контент (HTML) от представления (CSS). Все дело в доступности и повторном использовании кода.
Прежде всего:
- Если HTML-код создается или генерируется независимо от общего дизайна сайта (например, код общего шаблона), добавьте классы и идентификаторы с разумными именами, связанные исключительно с внешними таблицами стилей. Используйте достаточное количество элементов для произвольного манипулирования CSS. Например, см. CSS Zen Garden. Это относится ко ВСЕМ CMS, программам, сценариям и другому динамически генерируемому контенту сайта. Вывод HTML не должен содержать абсолютно никаких стилей или макетов. Без исключений.
Предполагая, что вы имеете дело со статическим контентом, тогда:
Если есть какой-либо способ использовать стиль, сделайте его классом и создайте ссылку на таблицу стилей.
Если нет способа повторно использовать стиль (это единственная вещь, которая больше нигде не имеет смысла), тогда используйте
<style>блок, который ссылается на элемент #id.Если атрибут CSS имеет смысл только в контексте окружающего HTML (например, некоторые использования
clear:) Затем я встраиваю стиль в элемент.
Многие люди называют это ересью, как и многие люди осуждают любое использование goto в современных языках программирования.
Однако, вместо того, чтобы подписываться на стилистическую догму, я считаю, что вы должны выбирать метод, основанный на ваших обстоятельствах, который максимально снижает общую нагрузку. Таблицы стилей добавляют уровень косвенности, который облегчает изменения на уровне сайта и помогает обеспечить согласованность. Но если у вас есть несколько десятков классов на каждой странице, которые используются только в одном месте, то вы фактически увеличиваете свою рабочую нагрузку, а не уменьшаете ее.
Другими словами, не делайте глупостей и недоразумений только потому, что люди говорят вам, что это правильный путь.
Если бы выбор был там, моим первым предпочтением будут классы / другие селекторы. Тем не менее, существуют ситуации, когда встроенные стили - единственный путь. В других ситуациях просто класс 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>
Используй здравый смысл.
Все знают, что представление и контент в идеальном мире должны быть разделены. Все также знают, что это не очень хорошо работает в большинстве случаев. Мы все знаем, что вы должны использовать div, а не таблицы для разметки, но мы также знаем, что при любых обстоятельствах, когда у вас нет полного контроля над контентом, он просто не работает должным образом.
Загрузка таблицы стилей 500 КБ для стилизации одного элемента, поскольку вы выбрали все возможные стили и вставили их в таблицу стилей, убьет вашу страницу, загрузив 500 таблиц стилей меньшего размера, чтобы оформить вашу страницу, потому что все они вам нужны, также убьют вашу страницу.
Повторное использование прекрасно в концепции, но реальность такова, что это полезно только в определенных контекстах. Это в равной степени относится практически ко всем, где существует эта концепция. Если ваш проект делает то, что вы от него хотите, делает это в любом подходящем браузере, делает это эффективным образом и делает это надежно, тогда все в порядке, реструктурировать CSS не так сложно, как это делается в коде.
Я не могу придумать никаких плюсов для встроенных стилей.
CSS это все о прогрессивном улучшении, а не повторении (СУХОЙ).
С помощью таблиц стилей изменить внешний вид становится так же просто, как изменить одну строку в HTML-коде. Сделать ошибку или клиенту не нравятся изменения? вернуться к старой таблице стилей.
Другие преимущества:
Ваш сайт может автоматически адаптироваться к различным носителям, например, для распечатки и для портативных устройств.
Исправленные CSS исправления для этого ужасного браузера, который не должен быть назван, становятся несложными.
Ваши пользователи могут легко настроить сайт с помощью плагинов, таких как Stylish.
Вы можете легко использовать повторно или поделиться кодом с сайта на сайт.
Я могу думать только о двух ситуациях, когда встроенные стили являются подходящими и / или разумными.
Если встроенные стили применяются программно. Например, отображение и скрытие элементов с помощью JavaScript или применение специфичных для содержимого стилей при отображении страницы (см. #2).
Если встроенные стили завершают определение класса для одного элемента в случаях, когда идентификаторы не являются ни подходящими, ни разумными. Например, установка
background-imageэлемента для одного изображения в галерее:
HTML
<div id="gallery">
<div class="image" style="background-image:url(...)">...</div>
<div class="image" style="background-image:url(...)">...</div>
<div class="image" style="background-image:url(...)">...</div>
</div>
CSS
#gallery .image {
background: none center center;
}
Чтобы завершить эту тему, стоит упомянуть, что встроенные стили - это единственный способ использовать GMail при создании электронных писем HTML+CSS.
Для получения подробной информации см.: http://www.email-standards.org/clients/gmail/
С добавлением пользовательских свойств в CSS, теперь есть еще один вариант использования. Можно использовать встроенный стиль для установки пользовательских свойств.
Например, ниже я использую сетку CSS для выравнивания списков HTML и блоков Div и хочу иметь гибкость в HTML (так, как это обеспечивает BootStrap или любая другая инфраструктура), так как этот HTML динамически генерируется приложением.
CSS:
:root{
--grid-col : 12;
--grid-col-gap:1em;
--grid-row-gap:1em;
--grid-col-span:1;
--grid-row-span:1;
--grid-cell-bg:lightgray;
}
.grid{
display: grid;
grid-template-columns: repeat(var(--grid-col), 1fr);
column-gap: var(--grid-col-gap);
row-gap: var(--grid-row-gap);
}
.grid-item{
grid-column-end: span var(--grid-col-span);
grid-row-end: span var(--grid-row-span);
background: var(--grid-cell-bg);
}
HTML:
<ul class="grid" style="--grid-col:4">
<li class="grid-item">Item 1</li>
<li class="grid-item">Item 2</li>
<li class="grid-item">Item 3</li>
<li class="grid-item">Item 4</li>
<li class="grid-item">Item 5</li>
<li class="grid-item">Item 6</li>
<li class="grid-item">Item 7</li>
<li class="grid-item">Item 8</li>
</ul>
В приведенном выше HTML, чтобы изменить четыре столбца на 3, я изменяю пользовательское свойство, используя атрибут style:
<ul class="grid" style="--grid-col:3">
<li class="grid-item">Item 1</li>
<li class="grid-item">Item 2</li>
<li class="grid-item">Item 3</li>
<li class="grid-item">Item 4</li>
<li class="grid-item">Item 5</li>
<li class="grid-item">Item 6</li>
<li class="grid-item">Item 7</li>
<li class="grid-item">Item 8</li>
</ul>
Вы можете проверить расширенный пример в реальном времени по адресу https://codepen.io/anon/pen/KJWoqw
Классы - это многократно используемые стили, которые можно добавлять к элементам HTML. например-
<style>
.blue-text{color:Blue;}
</style>
Вы можете использовать и повторно использовать этот класс с синим текстом для любого элемента HTML. Обратите внимание, что в вашем элементе стиля CSS классы должны начинаться с точки. В объявлениях классов ваших HTML-элементов классы не должны начинаться с точки. тогда как встроенный стиль похож на
<p style="color:Blue;">---</p>
Таким образом, разница между ними заключается в том, что вы можете повторно использовать классы, тогда как вы не можете повторно использовать встроенные стили.
Предполагая, что вы используете внешние таблицы стилей, дополнительным преимуществом помимо упомянутых ранее является кэширование. Браузер будет загружать и кэшировать вашу таблицу стилей один раз, а затем использовать локальную копию каждый раз, когда на нее ссылаются. Это позволяет вашей разметке быть более компактной. Меньшая разметка для передачи и анализа означает более отзывчивое ощущение и лучшее восприятие для ваших пользователей.
Встроенные стили, безусловно, путь. Просто посмотрите на http://www.csszengarden.com/ - это никогда не было бы возможно с классами и внешними таблицами стилей...
или подожди...