Как правильно использовать стили ccs

11.06.18 ИТ / CSS 3073

Когда-то, когда зарождались первые веб-сайты, ресурсы выглядели совсем просто, на них можно было увидеть только лишь обычный текст. Постепенно сайты приобретали более нарядный вид, появлялись новые возможности ПО. Была разработана технология для оформления веб-страниц – каскадные таблицы стилей (CSS).

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

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

Другой не совсем правильный подход – размещение исходного кода стилей вверху страницы, в тегах style. Такой метод используется в основном на сайтах, где крайне важна быстрая загрузка страницы, например, в Google. Опять же, происходит смешивание html и css.

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

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

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

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