Почему использование атрибута style в html плохо?

Мне сказали, а также прочитали, что использование атрибута style в html считается плохой/неаккуратной/плохой формой. Кроме того, чтобы все конкретные фрагменты рендеринга были разведены в css и другие части по мере необходимости. Я пытаюсь понять, почему именно это.

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

Есть ли еще какие-то веские причины для этого разделения?

Ответ 1

Разделение проблем. Это упрощает замену стилей без изменения разметки или наоборот. Кроме того, у вас может быть один человек, работающий над CSS и другой, работающий над контентом
Не повторяйте себя. Вы можете применить стиль ко многим элементам, не повторяя его снова и снова. Меньшие страницы означают более быстрое время загрузки, используя меньшую пропускную способность. Плюс это проще изменить позже, потому что вы можете изменить его в одном месте в одном файле, а не во многих местах во многих файлах.
Cachability. Если та же таблица стилей используется на каждой странице вашего сайта, браузеры могут ее загрузить один раз, а затем кешировать, а не загружать стили с содержимым каждой отдельной страницы, И им не придется повторно загружать его всякий раз, когда изменяется содержание этих страниц.
Несколько версий. Легко создавать несколько версий визуального макета и внешнего вида вашего сайта, так как вам просто нужно поменять файл стилей, чтобы изменить внешний вид каждой страницы. Например, вы можете создать версию веб-приложения с белой меткой, которую ваши партнеры могут перекрасить, чтобы соответствовать их бренду. См. CSS Zen Garden для некоторых отличных примеров того, насколько гибким может быть этот подход.

Ответ 2

Начните с этого кода:

<ul>
    <li style="color: blue;">One</li>
    <li style="color: blue;">Two</li>
    <li style="color: blue;">Three</li>
    <li style="color: blue;">Four</li>
</ul>

Скажем, что сегодня вы решили изменить цвет ссылки на красный. Поскольку эти стили являются встроенными, вам необходимо пройти каждый элемент и изменить атрибут style. Представьте, что вы делаете это на 10, может быть, на 20 страницах HTML, и вы поймете, почему это становится проблемой.

Использование таблицы стилей отделяет содержимое:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

Из стиля:

ul li {
    color: blue;
}

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

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

ul li {
    color: red;
}

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

Ответ 3

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

Ответ 4

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

Преимущества: Создание разных дизайнов для одного и того же html. Разделение работы внутри команды. Один сторонний разработчик может полностью сосредоточиться на css. Разработчикам back-end, не нужно хлопотать с css. Легче изменить внешний вид в будущем. Легче перенести html-разметку на новую платформу или систему управления контентом в будущем.