Содержание
CSS (Cascading Style Sheets) стал де-факто способом стилизации и верстки сайтов. Дизайнеры используют таблицы стилей, чтобы сообщить браузеру, как веб-сайт должен отображаться с точки зрения внешнего вида, с учетом таких факторов, как цвет, интервалы, шрифты и многое другое.
Стили CSS могут быть развернуты двумя способами:
- Встроенный — в кодировке самой веб-страницы, индивидуально, поэлементно
- В отдельном документе CSS, с которым связан сайт
CSS.
Джереми Жирар
Лучшие практики для CSS
«Лучшие практики» — это методы проектирования и создания веб-сайтов, которые зарекомендовали себя как наиболее эффективные и приносящие максимальную отдачу от выполняемой работы. Следование им в CSS в веб-дизайне помогает сайтам выглядеть и функционировать как можно лучше. Они развивались годами вместе с другими веб-языками и технологиями, и автономная таблица стилей CSS стала предпочтительным методом использования.
Следуя рекомендациям по CSS, вы можете улучшить свой сайт несколькими способами:
- Отделяет контент от дизайна — Одна из основных целей CSS — удалить элементы дизайна из HTML и поместить их в другое место, которое будет поддерживать дизайнер. Это также служит для отделения дизайнеров от разработчиков, чтобы каждый мог сосредоточиться на своих областях знаний. Дизайнер не должен быть разработчиком, чтобы поддерживать внешний вид сайта.
- Облегчает обслуживание — Одним из наиболее игнорируемых элементов веб-дизайна является обслуживание. В отличие от печатных материалов, веб-сайт никогда не бывает «единым целым». Содержание, дизайн и функции могут и должны развиваться с течением времени. Наличие CSS в центральном месте, а не разбросанное по всему сайту, значительно упрощает поддержку.
- Делает ваш сайт доступным — Использование стилей CSS помогает поисковым системам и людям с ограниченными возможностями взаимодействовать с вашим сайтом.
- Сохраняет ваш сайт дольше — Используя лучшие практики с CSS, вы придерживаетесь стандартов, которые были доказаны стабильными, но достаточно гибкими, чтобы приспособиться к изменениям в среде веб-дизайна.
Встроенные стили — не лучшая практика
Встроенные стили, хотя и имеют свою цель, как правило, не лучший способ поддерживать ваш сайт. Они идут против всех лучших практик:
- Встроенные стили не отделяют контент от дизайна — Встроенные стили точно такие же, как встроенный шрифт и другие неуклюжие теги дизайна, против которых выступают современные разработчики. Стили влияют только на отдельные элементы, к которым они применяются; в то время как это может дать вам более детальный контроль, это также усложнит другие аспекты проектирования и разработки, такие как согласованность.
- Встроенные стили вызывают проблемы с обслуживанием — Когда вы работаете с таблицами стилей, выяснить, где устанавливается стиль, может быть сложно. Когда вы имеете дело со смесью встроенных, встроенных и внешних стилей, у вас есть много мест для проверки. Если вы работаете в команде веб-дизайна или вам нужно перепроектировать или поддерживать сайт, созданный кем-то другим, то у вас будут еще большие проблемы. Как только вы найдете стиль и измените его, вам придется делать это для каждого элемента на каждой странице, где он был размещен. Это увеличивает астрономическое время и бюджет работы.
- Встроенные стили не так доступны — В то время как современная программа чтения с экрана или другое вспомогательное устройство могут эффективно обрабатывать встроенные атрибуты и теги, некоторые старые устройства не могут, что может привести к появлению странно отображаемых веб-страниц. Дополнительные символы и текст также могут повлиять на то, как робот просматривает вашу страницу, поэтому ваша страница не так хороша с точки зрения поисковой оптимизации (SEO).
- Встроенные стили делают ваши страницы больше — Если вы хотите, чтобы каждый абзац на вашем сайте отображался определенным образом, вы можете сделать это один раз с шестью строками кода во внешней таблице стилей. Однако, если вы делаете это с помощью встроенных стилей, вы должны добавить эти стили к каждому абзацу вашего сайта. Если у вас есть пять строк CSS, это пять строк, умноженных на каждый абзац на вашем сайте. Эта пропускная способность и время загрузки могут сложиться в спешке.
Альтернативой встроенным стилям являются внешние таблицы стилей
Вместо использования встроенных стилей используйте внешние таблицы стилей. Они дают вам все преимущества лучших практик CSS и просты в использовании. При таком использовании все стили, используемые на вашем сайте, размещаются в отдельном документе, который затем связывается с веб-документом одной строкой кода. Внешние таблицы стилей влияют на любой документ, к которому они прикреплены. Это означает, что, если у вас есть 20-страничный веб-сайт, на котором каждая страница использует одну и ту же таблицу стилей — как это обычно делается — вы можете внести изменения в каждую из этих страниц, просто отредактировав эти стили один раз, в одном месте. Менять стили в одном месте бесконечно удобнее, чем искать эту кодировку на каждой странице вашего сайта. Это делает долгосрочное управление сайтом намного проще.
