Что такого плохого в встроенном 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" />
20 ответов
Необходимость изменить 100 строк кода, когда вы хотите, чтобы сайт выглядел по-другому. Это может не применяться в вашем примере, но если вы используете встроенный CSS для таких вещей, как
<div style ="font-size:larger; text-align:center; font-weight:bold">
на каждой странице, чтобы обозначить заголовок страницы, было бы намного легче поддерживать как
<div class="pageheader">
если заголовок страницы определен в одной таблице стилей, так что если вы хотите изменить внешний вид заголовка страницы по всему сайту, вы измените CSS в одном месте.
Однако я буду еретиком и скажу, что в вашем примере я не вижу проблем. Вы нацеливаетесь на поведение одного изображения, которое, вероятно, должно выглядеть правильно на одной странице, поэтому размещение фактического CSS в таблице стилей, вероятно, будет излишним.
Преимущество наличия другого файла CSS
- Легко поддерживать свою HTML-страницу
- Изменить внешний вид будет легко, и у вас может быть поддержка многих тем на ваших страницах.
- Ваш файл CSS будет кэшироваться на стороне браузера. Таким образом, вы будете вносить небольшой вклад в интернет-трафик, не загружая некоторые килобайты данных каждый раз, когда страница обновляется или пользователь переходит на ваш сайт.
Подход html5 к быстрому прототипированию CSS
или же: <style> теги больше не только для головы!
Взлом CSS
Допустим, вы отлаживаете и хотите изменить страницу-CSS, чтобы определенный раздел только выглядел лучше. Вместо того, чтобы создавать свои стили быстро, грязно и неприемлемо, вы можете делать то, что я делаю в эти дни, и применять поэтапный подход.
Нет встроенного атрибута стиля
Никогда не создавайте свои css inline, под которыми я имею в виду: <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> на странице, так что вы можете сразу удалить встроенный 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 таких тегов. Что происходит, когда вы решаете, что они должны быть оставлены без присмотра?
Это относится только к рукописному коду. Если вы генерируете код, я думаю, что здесь и потом можно использовать встроенные стили, особенно в тех случаях, когда элементы и элементы управления требуют особой обработки.
DRY - хорошая концепция для рукописного кода, но в машинно-сгенерированном коде я выбираю "Закон Деметры": "То, что принадлежит вместе, должно оставаться вместе". Проще манипулировать кодом, генерирующим теги Style, чем вторично редактировать глобальный стиль в другом и "удаленном" файле CSS.
Ответ на ваш вопрос: это зависит...
Использование встроенного CSS намного сложнее поддерживать.
Для каждого свойства, которое вы хотите изменить, использование встроенного CSS требует от вас поиска соответствующего HTML-кода, а не просто просмотра четко определенных и, как мы надеемся, хорошо структурированных CSS-файлов.
Весь смысл CSS состоит в том, чтобы отделить контент от его представления. Таким образом, в вашем примере вы смешиваете контент с презентацией, и это может считаться "вредным".
В дополнение к другим ответам другая проблема заключается в том, что он нарушает рекомендованную политику безопасности контента от MDN, https://infosec.mozilla.org/guidelines/web_security
Обоснование, которое они используют, состоит в том, что встроенный javascript вреден, XSS и т.д., но это не оправдывает, почему встроенные стили также должны быть отключены. Может быть, кто-то прокомментирует, почему, но до тех пор я просто буду полагаться на обращение к авторитетным источникам и утверждать: это лучший способ безопасности - избегать встроенных стилей.
Кодируйте, как вам нравится, но если вы передаете его кому-то другому, лучше всего использовать то, что делают все остальные. Есть причины для CSS, тогда есть причины для inline. Я использую оба, потому что это просто для меня. Использование CSS замечательно, когда у вас много повторений. Однако, когда у вас есть куча разных элементов с разными свойствами, это становится проблемой. Один случай для меня, когда я размещаю элементы на странице. Каждый элемент имеет свое верхнее и левое свойство. Если бы я поместил все это в CSS, это действительно разозлило бы меня из-за путаницы между страницами html и css. Так что CSS - это здорово, когда вы хотите, чтобы все имели одинаковый шрифт, цвет, эффект наведения и т. Д. Но когда все имеет разную позицию, добавление экземпляра CSS для каждого элемента действительно может быть проблемой. Это только мое мнение, хотя. CSS действительно имеет большое значение в больших приложениях, когда вам приходится копаться в коде. Используйте плагин для веб-разработчиков Mozilla, и он поможет вам найти идентификаторы элементов и классы.
Я думаю, что даже если вы хотите иметь определенный стиль для одного элемента, вы должны рассмотреть возможность применения одного и того же стиля к одному и тому же элементу на разных страницах.
Однажды кто-то может попросить изменить или добавить больше стилистических изменений к тому же элементу на каждой странице. Если бы у вас были стили, определенные во внешнем файле CSS, вам нужно было бы только вносить в них изменения, и это отражалось бы в одном и том же элементе на всех страницах, что избавило бы вас от головной боли.:-)
Даже если вы используете стиль только один раз, как в этом примере, вы все равно смешаете 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>
Лично я считаю, что ненависть к встроенному css просто смешна. Хардкорное культовое поведение, люди просто смущенно повторяют «Разделение интересов!». Да, бывают случаи, когда, если есть повторяющийся элемент, и вам потребуется повторяющийся стиль, чтобы использовать класс, выбранный из файла CSS, но в большинстве случаев это повышает скорость разработки и ЯСНОСТЬ КОДА, чтобы поместить стиль в строку, это здорово если я могу взглянуть на код и увидеть, что там есть пользовательская высота полей, это поможет мне представить HTML-документ в целом, а не какой-то именованный класс, который дает мне мало информации о том, какие стили будут применяться.
Так что я буду против и скажу, что встроенный css великолепен, и что люди, которые кричат на вас за его использование, просто следуют тому, что им сказали, на самом деле не придавая этому какого-либо оригинального непредвзятого значения.
Встроенный CSS хорош для машинно-генерируемого кода и может подойти, когда большинство посетителей просматривают только одну страницу на сайте, но одна вещь, которую он не может сделать, это обрабатывать медиа-запросы, чтобы по-разному выглядеть на экранах разных размеров. Для этого вам нужно включить CSS либо во внешнюю таблицу стилей, либо во внутренний тег стиля.
В соответствии со спецификацией AMP HTML необходимо включить CSS в ваш HTML-файл (вместо внешней таблицы стилей) для повышения производительности. Это не означает встроенный CSS, но они не указывают внешние таблицы стилей.
Неполный список оптимизаций, которые может выполнить такая обслуживающая система:
- Замените ссылки на изображения изображениями, размер которых соответствует размеру окна просмотра.
- Встроенные изображения, которые видны над сгибом.
- Встроенные переменные CSS.
- Предварительная загрузка расширенных компонентов.
- Сократите HTML и CSS.
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 вызывает один дополнительный HTTP-вызов браузера и, следовательно, дополнительную задержку. Вместо этого, если CSS вставлен внутри строки, браузер может начать его разбор. В частности, через SSL HTTP-вызовы обходятся дороже и увеличивают задержку страницы. Существует множество инструментов, которые помогают генерировать статические HTML-страницы (или фрагменты страниц), вставляя внешние CSS-файлы в виде встроенного кода. Эти инструменты используются на этапе сборки и выпуска, где создается производственный двоичный файл. Таким образом, мы получаем все преимущества внешнего CSS, а также страница становится быстрее.
В дополнение к другим ответам вы не можете настроить таргетинг на псевдоклассы или псевдоэлементы во встроенном CSS.
Мы создали управляемый шаблонами генератор артефактов, который обеспечивает возможность включения файла для любого типа текстового артефакта - HTML, XML, компьютерные языки, неструктурированный текст, DSV и т. Д. (Например, он отлично подходит для обработки общих заголовков веб-страниц или страниц руководства и нижние колонтитулы без скриптов.)
Как только у вас есть это и вы используете его для предоставления тегов "style" внутри тега "head", аргумент "разделение проблем" исчезает и заменяется на "мы должны восстанавливать после каждого изменения в шаблоне" и "у нас есть для отладки шаблона из того, что он генерирует ". Эти проблемы были с тех пор, как первый компьютерный язык получил препроцессор (или кто-то начал использовать M4).
В целом, мы считаем, что возможность мета-преобразования CSS-файла или тегов "style" более чистая и менее подвержена ошибкам, чем стилизация на уровне элементов. Но это требует некоторого профессионального суждения, поэтому новички и рассеянные мозги не беспокоятся.