Что такого плохого в встроенном CSS?

Когда я вижу стартовый код веб-сайта и примеры, CSS всегда находится в отдельном файле, который называется что-то вроде «main.css», «default.css» или «Site.css». Однако, когда я кодирую страницу, я часто испытываю желание добавить CSS в строку с элементом DOM, например, установив «float: right» на изображении. У меня такое ощущение, что это «плохое кодирование», так как это редко делается в примерах.

Я понимаю, что если стиль будет применяться к нескольким объектам, целесообразно следовать «Не повторять себя» (DRY) и назначать его классу CSS, на который ссылается каждый элемент. Однако, если я не буду повторять CSS для другого элемента, почему бы не включить CSS при написании HTML?

Вопрос: считается ли использование встроенного CSS плохим, даже если он будет использоваться только для этого элемента? Если так, то почему?

Пример (это плохо?):

<img src="myimage.gif" style="float:right" />

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

<div style ="font-size:larger; text-align:center; font-weight:bold">

на каждой странице, чтобы обозначить заголовок страницы, было бы намного легче поддерживать как

<div class="pageheader">  

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

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

Преимущество наличия другого файла CSS

1. Легко поддерживать свою HTML-страницу
2. Изменить внешний вид будет легко, и у вас может быть поддержка многих тем на ваших страницах.
3. Ваш файл CSS будет кэшироваться на стороне браузера. Таким образом, вы будете вносить небольшой вклад в интернет-трафик, не загружая несколько килобайт данных каждый раз, когда страница обновляется или пользователь переходит на ваш сайт.

Подход html5 к быстрому прототипированию CSS

или: <style>теги больше не только для головы!

Взлом CSS

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

Нет встроенного атрибута стиля

Никогда не создавайте свой встроенный CSS, под которым я подразумеваю: <element style='color:red'>или даже <img style='float:right'>это очень удобно, но не отражает фактическую специфичность селектора в реальном файле CSS позже, и если вы сохраните его, вы пожалеете о нагрузке на обслуживание позже.

Прототип с <style>вместо

Там, где вы бы использовали встроенный CSS, вместо этого используйте <style> элементы на странице . Попробуйте это! Он отлично работает во всех браузерах, поэтому отлично подходит для тестирования, но позволяет вам изящно перемещать такие CSS-файлы в ваши глобальные CSS-файлы, когда вы захотите / нуждаетесь в этом! (* просто знайте, что селекторы будут иметь только специфичность на уровне страницы, а не специфичность на уровне сайта, так что будьте осторожны, чтобы быть слишком общими) Так же чисто, как в ваших файлах CSS:

<style>
.avatar-image{
    float:right
}
.faq .warning{
    color:crimson;
}
p{
    border-left:thin medium blue;
    // this general of a selector would be very bad, though.
    // so be aware of what'll happen to general selectors if they go
    // global
}
</style>

Рефакторинг чужих встроенных css

Иногда вы даже не проблема, и вы имеете дело с чужим встроенным css, и вам нужно его реорганизовать. Это еще одно отличное использование для <style>страницы in, так что вы можете сразу удалить встроенный CSS и сразу же поместить его прямо на страницу в классах, идентификаторах или селекторах во время рефакторинга. Если вы достаточно осторожны со своими селекторами, вы можете переместить окончательный результат в глобальный CSS-файл в конце, просто скопировав и вставив.

Немного сложно перенести каждый бит css немедленно в глобальный файл css, но с <style>элементами на странице у нас теперь есть альтернативы.

Помимо других ответов .... Интернационализация .

В зависимости от языка контента - вам часто нужно адаптировать стили элемента.

Одним из очевидных примеров были бы языки справа налево.

Допустим, вы использовали свой код:

<img src="myimage.gif" style="float:right" />

Теперь скажите, что вы хотите, чтобы ваш веб-сайт поддерживал языки RTL - вам потребуется:

<img src="myimage.gif" style="float:left" />

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

С помощью CSS это легко сделать с помощью атрибута lang.

Таким образом, вы можете сделать что-то вроде этого:

img {
  float:right;
}
html[lang="he"] img { /* Hebrew. or.. lang="ar" for Arabic etc */
  float:left;
}

демонстрация

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

Это также вредит вашему приложению семантически: CSS - это разделение представления и разметки. Когда вы запутываете их вместе, все становится намного сложнее для понимания и поддержания. Этот принцип аналогичен отделению кода базы данных от кода вашего контроллера на стороне сервера.

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

Весь смысл CSS состоит в том, чтобы отделить контент от его представления. Таким образом, в вашем примере вы смешиваете контент с презентацией, и это может считаться «вредным».

Использование встроенного CSS гораздо сложнее поддерживать.

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

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

DRY - хорошая концепция для рукописного кода, но в машинно-сгенерированном коде я выбираю «Закон Деметры»: «То, что принадлежит вместе, должно оставаться вместе». Проще манипулировать кодом, генерирующим теги Style, чем вторично редактировать глобальный стиль в другом и «удаленном» файле CSS.

Ответ на ваш вопрос: это зависит ...

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

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

Кодируйте, как вам нравится, но если вы передаете его кому-то другому, лучше всего использовать то, что делают все остальные. Есть причины для CSS, тогда есть причины для inline. Я использую оба, потому что это просто для меня. Использование CSS замечательно, когда у вас много повторений. Однако, когда у вас есть куча разных элементов с разными свойствами, это становится проблемой. Один случай для меня, когда я размещаю элементы на странице. Каждый элемент имеет свое верхнее и левое свойство. Если бы я поместил все это в CSS, это бы очень раздражало, когда я перебирал страницы html и css. Так что CSS - это здорово, когда вы хотите, чтобы у всех был один и тот же шрифт, цвет, эффект наведения и т. Д. Но когда у всего есть разная позиция, добавление экземпляра CSS для каждого элемента действительно может быть проблемой. Это только мое мнение, хотя. CSS действительно имеет большое значение в больших приложениях, когда вам приходится копаться в коде. Используйте плагин для веб-разработчиков Mozilla, и он поможет вам найти идентификаторы элементов и классы.

Даже если вы используете стиль только один раз, как в этом примере, вы все равно смешаете CONTENT и DESIGN. Поиск "Разделение интересов".

Использование встроенных стилей нарушает принцип разделения проблем, поскольку вы эффективно смешиваете разметку и стиль в одном и том же исходном файле. Это также, в большинстве случаев, нарушает принцип СУХОЙ (не повторять себя), поскольку они применимы только к одному элементу, тогда как класс может быть применен к нескольким из них (и даже может быть расширен за счет магии правил CSS! ).

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

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

<div class="header-row">It's a row!</div>

Это намного более выразительно, чем:

<div style="height: 80px; width: 100%;">It's...something?</div>

Inss page css на данный момент является неотъемлемой частью, потому что Google оценивает его как обеспечивающий лучший пользовательский опыт, чем css, загруженный из отдельного файла. Возможное решение - поместить CSS в текстовый файл, загрузить его на лету с помощью php и вывести его в заголовок документа. В <head>раздел включите это:

<head> ...

<?php
$codestring = file_get_contents("styles/style1.txt");
echo "<style>" . $codestring . "</style>";
?>

... </head>

Поместите нужный CSS в файл styles / style1.txt, и он появится в <head>разделе вашего документа. Таким образом, вы получите внутристраничную css с преимуществом использования шаблона стиля style1.txt, который может использоваться на всех страницах, что позволяет вносить изменения в стиль всего сайта только через один этот файл. Кроме того, этот метод не требует от браузера запрашивать отдельные css-файлы с сервера (что сводит к минимуму время поиска / рендеринга), поскольку все доставляется одновременно с помощью php.

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

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

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

Внешний файл CSS вызывает один дополнительный HTTP-вызов браузера и, следовательно, дополнительную задержку. Вместо этого, если CSS вставлен внутри строки, браузер может начать его разбор. Особенно через SSL HTTP звонки обходятся дороже и увеличивают время ожидания страницы. Существует множество инструментов, которые помогают генерировать статические HTML-страницы (или фрагменты страниц), вставляя внешние CSS-файлы в виде встроенного кода. Эти инструменты используются на этапе сборки и выпуска, где создается производственный двоичный файл. Таким образом, мы получаем все преимущества внешнего CSS, а также страница становится быстрее.

В соответствии со спецификацией AMP HTML необходимо включить CSS в файл HTML (вместо внешней таблицы стилей) для повышения производительности. Это не означает встроенный CSS, но они не указывают внешние таблицы стилей .

Неполный список оптимизаций, которые может выполнить такая обслуживающая система:

• Замените ссылки на изображения изображениями, размер которых соответствует размеру окна просмотра.
• Встроенные изображения, которые видны над сгибом.
• Встроенные переменные CSS.
• Предварительная загрузка расширенных компонентов.
• Сократите HTML и CSS.

В дополнение к другим ответам нельзя указывать псевдоклассы или псевдоэлементы во встроенном CSS

Мы создали генератор артефактов на основе шаблонов, который обеспечивает возможность включения файла для любого типа текстового артефакта - HTML, XML, компьютерные языки, неструктурированный текст, DSV и т. Д. (Например, он отлично подходит для обработки обычных веб-страниц или заголовков страниц руководства. и нижние колонтитулы без сценариев.)

Если у вас есть это и вы используете его для предоставления тегов «style» внутри тега «head», аргумент «разделения интересов» исчезает, его заменяют словами «мы должны регенерировать после каждого изменения шаблона» и «мы имеем отлаживать шаблон от того, что он генерирует ". Эти проблемы были с тех пор, как первый компьютерный язык получил препроцессор (или кто-то начал использовать M4).

В целом, мы считаем, что возможность метаизинга либо CSS-файла, либо тегов «style» более чистая и менее подвержена ошибкам, чем стилизация на уровне элементов. Но это требует некоторого профессионального суждения, поэтому новички и мошенники не беспокоятся.