Что CSS значит для e-commerce

Каскадные таблицы стилей (англ. Cascading Style Sheets или CSS) – это специальный язык, используемый для описания внешнего вида страниц, написанных языками разметки данных.

HTML – для структуры, CSS – для внешнего вида

Один из способов понять CSS – это сравнить его с HTML.

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

CSS в действии

Рассмотрим CSS на примере. Вот небольшое простое меню сайта в HTML-коде:

А это то, как выглядит это меню в интерфейсе сайта:

Простое меню веб-сайта с использованием только HTML5.

Теперь применим немного простого CSS к этому меню:

Вот как оно теперь выглядит:

Применение CSS к меню в HTML5 изменяет его внешний вид.

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

До CSS

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

Вот, например, как выглядит применение одного правила для каждого HTML-элемента:

Как видите, это уже намного больше текста. Кроме того, довольно сложно найти в тексте нужные слова – Home, New Products, All Products, Cart – обозначающие названия нужных нам ссылок. Все это сильно усложняло веб-дизайн и делало его намного более предрасположенным к ошибкам. Одна опечатка могла сделать внешний вид страницы совершенно отличным от остальных, чего можно было не замечать месяцами.

Применение ко всему сайту и к его конкретным страницам и элементам

CSS существенно все это упрощает. Используя CSS, правила стиля можно применить сразу ко всему сайту или к определенному количеству страниц.

CSS делает это возможным благодаря применению правил дизайна к HTML-элементам с помощью так называемых селекторов. Селекторы – это способ указать на часть HTML-документа, к которому нужно применить указанное правило стиля. В примере выше выбраны ссылки (элемент “а”) внутри навигации (элемент “nav”) для скомбинированного правила (“nav a”). Таким образом можно применить правило стиля только к выбранным ссылкам, оставив остальные как есть. В нашем примере использован также и еще один селектор – “nav a:hover” – для изменения цвета кнопок навигации при наведении курсора мыши.

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

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

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

Сложности CSS

При использовании CSS у вас может возникнуть две существенные проблемы. Обе связаны с тем, как организованы селекторы.

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

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

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

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