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

преимуществом для наличия другого файла css являются

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

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

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

взлом CSS

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

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

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

прототип

где вы бы использовали встроенный css, вместо этого используйте in-page <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 в конце с помощью только copy & paste.

это немного трудно передать бит css сразу в глобальный файл css, но с in-page <style> элементов, теперь у нас есть альтернативы.

В дополнение к другим ответы.... интернационализации.

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

один очевидный пример-справа-налево.

предположим, вы использовали свой код:

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

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

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

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

С CSS это легко позаботиться с атрибутом lang

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

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

демо

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

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

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

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

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

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

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

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

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

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

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

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

даже если вы используете стиль только один раз, как в этом примере, вы все еще смешиваете контент и дизайн. Поиск "разделение проблем".

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

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

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

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

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

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

in-page css является in-thing на данный момент, потому что Google оценивает его как предоставление лучшего пользовательского опыта, чем css, загруженный из отдельного файла. Возможное решение-поместить css в текстовый файл, загрузить его на лету с помощью php и вывести его в голову документа. В включить так:

<head> ...

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

... </head>

поместите необходимый css в стили / 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.