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