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


Каскадные таблицы стилей и поисковая оптимизация

Другим основным преимуществом CSS является то, что ваш сайт становится более дружественным для поисковой оптимизации. Причина этого очень проста. Боты поисковиков обычно очень вялые. Они не ходят вглубь HTML-кода в поисках того, что можно проиндексировать. Шрифтовые тэги и таблицы делают HTML-код громоздким, тем самым понижают точность и качество результата индексирования. Если же вы используете внешние CSS-файлы для определения атрибутов дизайна, то ваш HTML-код становится чище и это даст лучший результат при оценке позиции в результатах поиска. Имея немного знаний в CSS вы сможете изменять код расположения элементов на странице без нарушения текущего визуального представления. Например, вы бы смогли расположить основное содержание вашего сайта выше заголовка или навигационного меню, тем самым помочь поисковому боту увидеть важность вашего контента. Я лично видел как сайты, полностью сделанные с использованием CSS получали огромные рейтинги в результатах поиска. Когда я смотрю на чьи-то сайты, сделанные по-старинке с использованием тегов TABLES, TD, TR, FONT и т. п., то ощущаю неловкость и сразу же конвертирую сайт в полностью свободную от таблиц CSS-разметку. Существует множество инструментов в Интернете, которые показывают соотношение кода разметки и полезному тексту на вашем сайте. Знаете почему это нужно? Потому что современным поисковикам, таким как Google, Yahoo и MSN, нравятся «легковесные» сайты. Они желают видеть ваше содержимое, т.е. текст, но не код. Вместе с CSS это возможно. Вы практически прячете весь ненужный код во внешнем файле, оставляя саму страницу чистой и простой.

Доступность сайта

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

Повышает скорость загрузки вашего сайта

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

Кросс-броузерная совместимость

Для всех веб-мастеров! CSS делает ваш сайт более профессиональным. Использование CSS позволит вашему сайту загружаться быстрее и облегчит сопровождение, тем самым сохранит много времени и труда. Это в свою очередь позволить получить больше денежной отдачи. CSS делает ссылки на сайте более привлекательными и динамичными. Используя CSS, вы сможете быстро и эффективно создавать кнопки типа «rollover», причем без единого символа JavaScript-кода. Таким образом, CSS позволяет выглядеть вашему сайту профессионально. Будет разумным использовать CSS, чтобы идти в ногу со временем. Все основные броузеры Firefox, Internet Explorer и Netscape на данный момент распознают CSS и использование CSS для веб-дизайнеров в настоящее время совершенно безвредно.

Автор статьи: Михаил Тукнов (Mikhail Tuknov)
Перевод: ST2KB
Оригинал здесь

Михаил Тукнов, специалист в области поисковой оптимизации и основатель компании по поисковому маркетингу Infatex.com. Помимо огромных знаний в Интернет-маркетинге и разработки веб-сайтов Михаил предлагает услуги по продвижению сайта: поисковая оптимизация, повышение релевантности ссылок, программы «плати-за-клик» (PPC) и много другое…


Вы прочитали статью и она Вам понравилась?
Подпишитесь на обновления!

Pаспечатать эту статью Pаспечатать эту статью