Встроенные стили и классы

В моей голове, я всегда знал использовать классы по встроенным стилям для любого проекта. Но есть ли какие-либо статьи/публикации/блоги, определяющие плюсы и минусы каждого? Я в дискуссии об этом, и я не могу найти сообщение в блоге, которое я прочитал давно об этом.

Ответ 1

Существует простая причина. Точка CSS - это отделить контент (HTML) от презентации (CSS). Все о доступности и повторное использование кода.

Ответ 2

Прежде всего:

Если HTML построен или сгенерирован независимо от общего дизайна сайта (например, код общего шаблона), добавьте классы и идентификаторы с разумным именем, связанные исключительно с внешними таблицами стилей. Используйте достаточные элементы, чтобы допускать произвольные манипуляции с CSS. Например, см. CSS Zen Garden. Это относится ко всем CMS, программам, сценариям и другим динамически созданным сайтам сайта. Вывод HTML не должен содержать абсолютно никакого стиля или макета любого типа. Нет исключений.

Предполагая, что вы имеете дело со статическим контентом, тогда:

Если вы можете повторно использовать стиль, сделайте его классом и ссылкой на таблицу стилей.
Если нет способа повторного использования стиля (это одноразовая вещь, которая не имеет смысла нигде), используйте блок <style>, который ссылается на элемент #id.
Если атрибут CSS имеет смысл только в контексте окружающего HTML (например, некоторые использования clear:), я вставляю стиль в элемент.

Многие называют эту ересь так же, как многие люди осуждают любое использование goto в современных языках программирования.

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

Другими словами, не делайте ничего глупого и запутанного только потому, что люди говорят вам, что это правильный способ сделать это.

Ответ 3

Если бы выбор был там, моим первым предпочтением будут классы/другие селекторы. Однако есть ситуации, когда встроенные стили - единственный способ пойти. В других ситуациях просто класс 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>

Ответ 4

Используйте здравый смысл.

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

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

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

Ответ 5

Я не могу придумать никаких преимуществ для встроенных стилей.

CSS - это Progressive Enhancement и не повторяться (СУХОЙ).

С таблицами стилей изменение внешнего вида становится таким же простым, как изменение одной строки в коде HTML. Сделать ошибку или клиенту не нравится изменение? вернитесь к старой таблице стилей.

Другие преимущества:

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

Ответ 6

Я могу думать только о двух ситуациях, когда встроенные стили являются подходящими и/или разумными.

Если встроенные стили программно применяются. Например, отображение и скрытие элементов с помощью JavaScript или применение специфичных для контента стилей при рендеринге страницы (см. # 2).
Если встроенные стили завершают определение класса для одного элемента в случаях, когда id не являются подходящими или разумными. Например, установив 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;
}

Ответ 7

Чтобы этот поток был полным, стоит упомянуть, что встроенные стили - единственный способ пойти в GMail при создании электронных писем HTML + CSS.

Подробнее см.: http://www.email-standards.org/clients/gmail/

Ответ 8

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

Ответ 9

Встроенные стили - это, безусловно, путь. Просто посмотрите http://www.csszengarden.com/ - это никогда не было бы возможно с классами и внешними таблицами стилей...

или подождите...

Ответ 10

Классы - это повторно используемые стили, которые можно добавить к элементам HTML. например -

<style> 
   .blue-text{color:Blue;}
</style>

вы можете использовать и повторно использовать этот класс синего текста для любого элемента HTML Обратите внимание, что в элементе стиля CSS классы должны начинаться с периода. В объявлениях классов HTML-классов классы не должны начинаться с периода. тогда как встроенный стиль подобен, например, -

<p style="color:Blue;">---</p>

Таким образом, разница между ними заключается в том, что вы можете повторно использовать классы, тогда как вы не можете повторно использовать встроенные стили.

Ответ 11

С добавлением пользовательских свойств в 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.