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

171

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

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

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

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

<img src="myimage.gif" style="float:right" />
ChessWhiz
источник
1
Я всегда против встроенного CSS, даже для отдельного элемента, НО я вижу так много коммерческих сайтов, пронизанных атрибутами стиля, что меня заставляет задуматься, какова принятая практика на самом деле?
yu_ominae
3
Я думаю, что встроенные стили ленивы. Я говорю это потому, что сам делаю это так часто, так что я знаю, почему я делаю это, потому что я понятия не имею, останется ли стиль, поэтому я делал это прямо рядом с html. В наши дни, используя html5 и прагматическую поддержку <style> </ style> где угодно, я вместо этого использую соседний тег <style> во время работы с макетом, а затем перенесу его в файл core / main css. Те же самые преимущества скорости и непосредственности, почти ни один из недостатков (побочные эффекты на элементах вне страницы из-за специфики едины).
Kzqai
3
@yu_ominae - помните, что «коммерческие сайты» не всегда придерживаются лучших практик; на самом деле это довольно редко. Решающим фактором является то, что разработчик знает, заботится и имеет время; или если менеджер желает выделить время и направить персонал на реализацию. Когда приоритетом работы является соблюдение сроков, качество обычно снижается.
BryanH
1
Стоит отметить, что хотя «коммерческие сайты», похоже, используют встроенные стили, это может быть результатом использования определенных вызовов jQuery (например css()), которые применяют встроенные стили.
Дейв Беккер

Ответы:

203

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

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

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

<div class="pageheader">  

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

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

Дэвид
источник
18
Вы говорите, что мой пример не проблема, но вы также признаете, что вы еретик. Мне нравится такой подход.
ChessWhiz
8
Если бы у меня был никель на каждый раз, когда мне приходилось изменять поплавок изображения или какой-то другой CSS, который изначально должен был быть «только для одного элемента» ... ... ну, я бы вышел на обед в хорошем ресторане.
Kzqai
8
Другой сценарий, когда не только можно использовать встроенный стиль, но и единственный способ стилизовать что-либо: электронные письма в формате HTML.
Кристоф Маруа
Но сам htmlфайл также кэшируется.
В ответ на user663031: веб-сайт с несколькими страницами имеет много разных HTML-страниц, но может объединить все свои стили только в одном файле CSS, который можно легко кэшировать.
Синторион
68

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

  1. Легко поддерживать свою HTML-страницу
  2. Изменить внешний вид будет легко, и у вас может быть поддержка многих тем на ваших страницах.
  3. Ваш файл CSS будет кэшироваться на стороне браузера. Таким образом, вы будете вносить небольшой вклад в интернет-трафик, не загружая несколько килобайт данных каждый раз, когда страница обновляется или пользователь переходит на ваш сайт.
vijay.shad
источник
2
Я задаю себе этот вопрос каждый месяц (довольно плохо знакомый с веб-программированием), и я впервые прочитал что-либо о кэшируемом файле CSS. Это делает это для меня прямо там!
Гандерс
Я тоже думал о кеше, но в моем случае мне приходится иметь дело со слитым CSS, который состоит из 15 тыс. Строк, невозможно сохранить всю большую часть мусора, который должен был использоваться только один раз на одной странице, которая не не существует больше. Таким образом, вы предоставляете CSS-код всем при каждом посещении одной временной страницы, которую просматривает только 1% вашего трафика. Я не уверен, что аргумент интернет-трафика действителен во всех случаях. К счастью, веб-компоненты будут менять вещи!
Shadoweb
@ Shadowbob - не лучше ли иметь меньшие файлы CSS вместо больших? Иметь один общий тип, который используется для всех страниц, но затем иметь маленькие отдельные таблицы стилей для других страниц. Должно быть проще в обслуживании. И если трафик является проблемой, то для производства, вероятно, может слиться с одним, в процессе сборки.
Дариус.В
26

Подход 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>элементами на странице у нас теперь есть альтернативы.

Kzqai
источник
23

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

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

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

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

<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;
}

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

Danield
источник
16

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

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

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

Исса Мари Ценг
источник
12
«всегда, всегда побеждаю» - если! в таблицах стилей используется важный
Джеймс Вестгейт
6
Я живу в предположении, что люди гуманны и не используют таких чудовищ. =)
issa marie tseng
3
@JamesWestgate до тех пор, пока кто-то не использует! Важный в встроенном CSS, чтобы переопределить переопределение ....
Kzqai
11

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


источник
7
Я заплачу вам 5 баксов за отправку «встроенных стилей CSS, считающихся вредными» в ACM.
BalinKingOfMoria восстанавливает CMs
11

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

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

Сильвен
источник
3
+1 - Я очень переживаю, когда наши дизайнеры делают это как быстрое решение, просто чтобы что-то выстроить в линию. Предполагается, что использование внешнего CSS означает отсутствие необходимости выполнять массовую замену текста, если, конечно, он не работает с одной таблицей стилей. Я получил шаблон панели управления, выпущенный мне вчера, и потребовалось 2,5 часа, чтобы найти случаи, когда значки были настроены с помощью встроенных стилей. Сумасшедший, я говорю тебе .. сумасшедший :)
Тим Пост
1
Если у вас более 50 SCSS и ваш элемент Inspect указывает только на сжатый CSS, я не уверен, что именно CSS выигрывает в простоте!
Shadoweb
1
@Shadowbob - вот для чего нужны исходные карты. thesassway.com/intermediate/using-source-maps-with-sass
Майк Чемберлен,
@TimPost есть причина, по которой появилась функция «проверить элемент»
Нориэль Круз,
9

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

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

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

Бруно Дженрич
источник
7
Я думаю, что это действительно правильный ответ. Мантра «разделения интересов» - это только один из критериев. «Местность» также важна для удобства обслуживания. Ключевым аспектом является то, является ли стиль многоразовым на семантическом уровне, а не просто синтетическим. Если это так, то лист имеет смысл. Например, я не собираюсь создавать класс для «float: right» только потому, что его используют два элемента. Это зависит от семантически одинаковых элементов. Цветовой стиль обычно семантически связан (часть темы) и обычно помещается в лист.
Кориандр
5

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

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

Ашиш Гупта
источник
4

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

Ноа Бич
источник
2

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

Ян Мерсер
источник
1

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

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

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

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

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

<div style="height: 80px; width: 100%;">It's...something?</div>
csvan
источник
1

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 находится в файлах, он будет откладывать DOM до тех пор, пока таблицы стилей не будут загружены пользователем. Имея критические стили в встроенном узле <styles> в голове, вы можете немедленно начать визуализацию DOM и отложить внешние таблицы стилей. Играет большой фактор в соединениях ~ 3G и воспринимается скорость. +1 за ваш ответ
DOficial
1

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


источник
0

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

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

Diptendu
источник
3
Вы упускаете что-то ре: латентность. Гораздо большая проблема , на самом деле: Встраивание CSS означает запрос на каждой странице должен содержать этот CSS, в то время как в противном случае, браузер может кэшировать.
Эндрю Барбер
Ты прав. Вот почему мы включаем CSS, когда размер кода очень мал, чтобы он не вызывал чрезмерных затрат на размер страницы. На Yahoo! есть очень интересная статья Страница рекомендаций по Perf developer.yahoo.com/performance/rules.html, в которой говорится, что 60-80% пользователей приходят на ваш сайт ежедневно с пустым кешем ( yuiblog.com/blog/2007/01/04/performance-research-part -2 ) Конечно, это полностью зависит от популярности сайта - чем популярнее сайт, тем больше шансов иметь непустой кеш.
Диптенду
Хотя пользователь может получить доступ к вашему сайту с пустым кешем, маловероятно, что он получит доступ к вашей странице с пустым кешем. Если страница не предназначена для одноразового использования (т.е. каждый пользователь просматривает ее только один раз), она будет работать лучше с отдельным файлом CSS.
astex
В наши дни многие современные веб-страницы выполнены в виде одностраничного приложения, полная страница загружается только в первый раз. В следующий раз страница будет изменена с помощью вызова AJAX. Таким образом, даже если страница многоразовая, внешний CSS будет загружен только один раз.
Diptendu
0

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

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

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

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

Сушмит Сагар
источник
0

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

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

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

Стивен Ф. Хеффнер
источник