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

Ответ 1

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

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

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

<div class="pageheader">  

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

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

Ответ 2

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

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

Ответ 3

Подход 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>

Рефакторинг других людей inline css

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

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

Ответ 4

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

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

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

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

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

Демо

Ответ 5

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

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

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

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

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

Ответ 9

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

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

Ответ 10

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

Ответ 11

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

Ответ 12

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

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

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

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

Является гораздо более выразительным, чем:

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

Ответ 13

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

<head> ...

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

... </head>

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

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

Ответ 14

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

Ответ 15

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

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

Ответ 16

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

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

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

Ответ 17

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