Что так плохо о встроенном CSS?
Когда я вижу код начинающего веб-сайта и примеры, CSS всегда находится в отдельном файле, названном чем-то как "main.css", "default.css", или "Site.css". Однако, когда я кодирую выше на страницу, я часто испытываю желание бросить CSS, встроенный с элементом DOM, такой как путем установки "плавания: право" на изображении. Я получаю чувство, что это "плохо кодирует", так как это так редко делается в примерах.
Я понимаю, что, если стиль будет применен к нескольким объектам, мудро следовать, "не Повторяют Себя" (DRY) и присваивают его классу CSS, на который сошлется каждый элемент. Однако, если я не буду повторять CSS на другом элементе, почему бы не встроить CSS, поскольку я пишу HTML?
Вопрос: использование встроенного CSS считают плохим, даже если это будет только использоваться на том элементе? Если так, почему?
Пример (это плохо?):
<img src="myimage.gif" style="float:right" />
7 ответов
Необходимость изменить 100 строк кода, если вы хотите изменить внешний вид сайта. Это может не применяться в вашем примере, но если вы используете встроенный CSS для таких вещей, как
<div style ="font-size:larger; text-align:center; font-weight:bold">
на каждой странице для обозначения заголовка страницы, было бы намного проще поддерживать как
<div class="pageheader">
, если заголовок страницы определен в единая таблица стилей, так что если вы хотите изменить внешний вид заголовка страницы на всем сайте, вы можете изменить CSS в одном месте.
Однако я буду еретиком и скажу, что в вашем примере я не вижу проблемы. Вы ориентируетесь на поведение одного изображения, которое, вероятно, должно правильно выглядеть на одной странице, поэтому размещение фактического CSS в таблице стилей, вероятно, будет излишним.
Использование встроенного CSS намного сложнее поддерживать.
Для каждого свойства, которое вы хотите изменить, использование встроенного CSS требует от вас поиска соответствующего HTML-кода вместо того, чтобы просто заглядывать внутрь четко определенных и, надеюсь, хорошо структурированных файлов CSS.
Даже если вы используете стиль только один раз, как в этом примере, вы все равно смешиваете СОДЕРЖАНИЕ и ДИЗАЙН. Искать "Разделение забот".
Преимуществами наличия другого файла css являются
- Простота поддержки html-страницы
- Изменение внешнего вида будет легким, и вы сможете поддерживать множество тем на ваших страницах.
- Ваш css-файл будет кэшироваться на стороне браузера. Таким образом, вы немного сократите интернет-трафик, не загружая несколько килобайт данных каждый раз, когда страница обновляется или пользователь переходит на ваш сайт.
Весь смысл CSS в том, чтобы отделить содержание от его представления. Поэтому в вашем примере вы смешиваете содержание с презентацией, и это может быть "признано вредным".
Встроенный CSS всегда, всегда имеет приоритет над CSS со связанными таблицами стилей. Это может вызвать у вас огромную головную боль, если и когда вы пойдете и напишете правильную каскадную таблицу стилей, а ваши свойства не будут применяться правильно.
Это также вредит вашему приложению семантически: CSS - это отделение представления от разметки. Когда вы переплетаете их вместе, становится намного труднее понять и поддерживать. Это тот же принцип, что и отделение кода базы данных от кода вашего контроллера на стороне сервера.
Наконец, представьте, что у вас есть 20 таких тегов изображений. Что произойдет, если вы решите переместить их влево?
Я думаю, что даже если вы хотите иметь определенный стиль для одного элемента, вы должны учитывать возможность применения того же стиля к один и тот же элемент на разных страницах.
Однажды кто-то может попросить изменить или добавить больше стилистических изменений к одному и тому же элементу на каждой странице. Если бы у вас были стили, определенные во внешнем файле CSS, вам нужно было бы внести изменения только там, и они были бы отражены в одном элементе на всех страницах, что избавило вас от головной боли. : -)