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