Россия+7 (495) 960-65-87

Организация CSS. CSS-ники

Россия+7 (495) 960-65-87
Шрифт:
0 28245


Современные браузеры поддерживают работу множества технологий, в частности технологию оформления веб-страниц CSS (Cascading Style Sheets – каскадные таблицы стилей), необходимые для качественного оформления HTML и XHTML-документов. Организация CSS-файлов становится все более и более сложной, нужно знать целый ряд приемов и тонкостей, чтобы научиться их грамотно составлять.Прежде, чем создавая сайт, необходимо четко определиться, какой должна быть организация CSS-файла.

Организация файла

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

Главный CSS-файл

Обычно в начале работы с сайтом создается CSS-файл по умолчанию или стили начинают прописываться в самом HTML, это можно заметить, работая с графическими редакторами (Dreamweaver). Данный «CSS-ник» обычно содержит правила и стили, применяемые для всех страниц сайта. Однако данных стилей и правил минимальное количество, в дальнейшем пользователь должен будем сам определить, как ему нужно организовать CSS-файл.


Метод 1: Создание прототипа (организация CSS для сайта в целом)

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

Что можно сделать с CSS?

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

В конечном итоге выбор одной из этих стратегий зависит от создателя сайта, от того, над сайтом какой организационной структуры он работает.


Метод 2: CSS для отдельных элементов на странице

Данный метод хорошо применять в тех случаях, когда на страницах присутствует код для сообщения страницы с сервером (php). Для сообщений, выводимых на странице с помощью данного кода, можно прописать собственные стили посредством соответствующего CSS-ника. Однако тут главное не перестараться: не следует прописывать CSS-ник для мелких частей на странице. Например, если для оформления футера требуется 10-20 строк в CSS, то создание отдельного файла не приведет ни к чему хорошему.

Метод 3: CSS для отдельных страниц

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


Небольшие подсказки по организации CSS

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

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

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


Правила и селекторы

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

Избыточность против зависимостей между селекторами

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

Группировка

Группировать правила и селекторы стоит по тому, как они соотносятся с различными частями страниц. Если разные части страницы оформляются одинаково (header, footer), то следует правила и селекторы группировать вместе.

Использование комментариев

Хорошим стилем написания CSS-ника считается проставление комментариев, если не каждому правилу, то хотя бы наиболее важным частям кода в файле CSS. Дополнительную полезную информацию о комментариях можно будет найти в статье “CSS Organization Tip #1: Flags”.


Дополнительные полезные заметки

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

Обязательно стоит также сказать об объявлении !import , необходимом для того, чтобы документы были удобными для изучения пользователями. Объявляя !import после значений свойств, пользователь может самостоятельно задавать те свойства, которые помогут добиться того, что на экране будет картинка приятная глазу пользователя. Делается это следующим образом: в Explorer меню Tools/Internet Options/Accessibility: загрузка собственного CSS-ника.

Пример:

/* From the user's style sheet */- {
p { text-indent: 1em ! important }
p { font-style: italic ! important }
p { font-size: 18pt }
/* From the author's style sheet */
p { text-indent: 1.5em !important }
p { font: normal 12pt sans-serif !important }
p { font-size: 24pt }
- }



Вместе с тем следует сказать, что не все браузеры поддерживают стандарт CSS2, который в отличие от стандарта CSS1 позволяет пользователю создавать собственные стили для web страницы.

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


Гарет Даймон (Garrett Dimon)
перевод Сергея Стружкова

(Нет голосов)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Даше Калинской


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
    ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
    Рейтинг Известности 2018: старт народного голосования
    Михаил Р
    1
    комментарий
    0
    читателей
    Полный профиль
    Михаил Р - 1. Demis 2. кокс 3. Ашманов 4. Скобеев 5. Digital Strategy
    Рейтинг Известности 2018: второй этап народного голосования
    Константин Сокол
    3
    комментария
    0
    читателей
    Полный профиль
    Константин Сокол - Кто был ответственный за дизайн таблицы голосования? Копирайтер?
    Кейс: вывод лендинга по изготовлению флагов на заказ в ТОП 1 по Санкт-Петербургу
    utka21
    5
    комментариев
    0
    читателей
    Полный профиль
    utka21 - Кейс как кейс. Для некоторых станет вполне возможно полезным. ( Для конкурентов точно) . А вот с комментариями , что то пошло не так )
    Сколько ссылок помогут продвинуть молодой сайт
    Антон
    1
    комментарий
    0
    читателей
    Полный профиль
    Антон - Да, Игорек Рудник из Reffer знает толк в ссылках. Вот только знает ли толк владелец сайта, а вернее услуги что предоставляют пользователям? Если с коммерческими факторами всё туго то на ссылках далеко не уедешь - это будет временный эффект и долго такая страница не сможет провисеть в поиске когда с другими факторами не всё Гуд. Сейчас Украина сидит на Google и там без ссылок как без воды никуда, поэтому там вплотную заняты ссылочным продвижением, а как насчет других вариантов продвижения?
    Обзор популярных CMS: плюсы и минусы
    Олег
    3
    комментария
    0
    читателей
    Полный профиль
    Олег - Опять же - разве есть более-менее распространенный движок, который не заразят, если его не обновлять? А если обновлять - modx (ну, как минимум Evolution, хотя не думаю, что у Revo есть какие-нибудь отдельные проблемы) в этом плане ничем не хуже других движков. И, видимо, не случайно, имена php-файлов с вирусами, которые встречаются на зараженных сайтах с разными движками, часто имеют имена в духе wp-db.php. По моему личному опыту, самый подвергаемый атакам движок (не утверждаю, что самый уязвимый, возможно, именно в силу своей распространенности) – WordPress. Не понимаю, почему, – обновляется он еще проще, обновления выходят часто. Но вот такой вот мой личный опыт.
    Как использовать Python для LSI-копирайтинга
    Evgeny Montana
    6
    комментариев
    0
    читателей
    Полный профиль
    Evgeny Montana - спасибо)
    Стартовал сбор заявок на участие в рейтинге «Известность бренда SEO-компаний 2018»
    Артем Первухин
    1
    комментарий
    0
    читателей
    Полный профиль
    Артем Первухин - Make KINETICA Great Again!
    Инструкция: настраиваем цели Яндекс.Метрики через Google Tag Manager
    Roman Gorkunenko
    1
    комментарий
    0
    читателей
    Полный профиль
    Roman Gorkunenko - Здравствуйте. Подскажите, пожалуйста, можно с айпи метрики вытащить среднюю стоимость клика по утм меткам? В метрике есть такой шаблон tags_u_t_m, но он не совместим с меткой директа, у них разные префиксы.
    Аудит структуры интернет-магазина мебели от «Ашманов и партнеры»
    Дмитрий
    7
    комментариев
    0
    читателей
    Полный профиль
    Дмитрий - Сергей, а вы допускаете, что вся ваша жизнь - seo-миф?
    BDD 2018: Как загнать сайт под фильтр без ПФ и ссылочного. Конкуренция в сложных нишах и методы защиты
    Гость
    1
    комментарий
    0
    читателей
    Полный профиль
    Гость - Какой там год) судя по этому "кейсу", чувак либо вообще не в теме, либо это делал кто то вместо него, но делал очень коряво
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    341
    Комментариев
    262
    Комментариев
    243
    Комментариев
    171
    Комментариев
    156
    Комментариев
    137
    Комментариев
    121
    Комментариев
    99
    Комментариев
    97
    Комментариев
    97
    Комментариев
    96
    Комментариев
    80
    Комментариев
    67
    Комментариев
    65
    Комментариев
    60
    Комментариев
    59
    Комментариев
    57
    Комментариев
    55
    Комментариев
    54

    Отправьте отзыв!
    Отправьте отзыв!