Три типа стилей CSS

Разработка веб-сайта переднего плана часто представлена ​​в виде трехногого стула, состоящего из:

  • HTML для структуры сайта
  • CSS для визуальных стилей
  • Javascript для поведения

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

  1. Встроенные стили
  2. Встроенные стили
  3. Внешние стили

Каждый из этих стилей CSS имеет уникальные преимущества и недостатки.

Встроенные стили

Встроенные стили — это стили, которые записываются непосредственно в тег в документе HTML. Встроенные стили влияют только на определенный тег, к которому они применяются:


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

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

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

Встроенные стили

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

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

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

Внешние таблицы стилей

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

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

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

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

Ссылка на основную публикацию