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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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