Инструкции по созданию имен для CSS
Оригинал: CSS Naming ConventionsВ этой статье мы представляем набор правил по созданию CSS-имен. Они уже были испытаны в нескольких крупных проектах. Это помогло нам достигнуть определенных успехов. Цель инструкции — исключить возможность конфликтов имен, упрощения отладки, обслуживания и процесса присвоения названий.
Правила присвоения имен, приведенные, ниже сложно назвать оптимальными для браузеров. Тем не менее, правила дают огромное преимущество, а их влияние на производительность незначительно.
CSS-класс и имя файла
Используйте строчные буквы в названиях всех CSS-классов и файлов. Для разделения слов в имени используйте символ «-». Например, мы можем назвать классы как-то вроде widget-latest-comments, а файлы — post.css.Организация CSS-файлов
Распределите CSS-стили по отдельным файлам, чтобы облегчить работу команде разработчиков и дальнейшее обслуживание системы. CSS-файлы могут быть названы в соответствии со следующими правилами:- global.css — этот файл содержит глобальные стили CSS, которые могут быть использованы повторно в различных местах.
- layout.css — этот файл содержит CSS стили, используемые в макетах.
- ControllerID.css — к этому файлу обращается контроллер приложения. Это означает, что каждый контроллер может иметь свой собственный файл стилей, который назван по его идентификатору. Например, для PostController может быть CSS-файл с именем post.css.
- widget-WidgetClass.css — здесь, под именем WidgetClass подразумевается класс виджета, для которого написан отдельный файл CSS стилей. Например, виджет LatestComments будет обращаться к файлу widget-latest-comments.css.
- FeatureName.css — большие функции могут иметь свои собственные файлы CSS названные в честь самой функции. Например, функция Markdown вполне вероятно использует markdown.css.
- Другие необходимые CSS-файлы, например, CSS-фреймворки.
Присвоение имен CSS-классам
В общем, в CSS, мы должны использовать классы вместо идентификаторов для стилизации HTML-элементов. Это делается, потому что один и тот же идентификатор не может использоваться дважды на одной странице XHTML.Для присвоения имен классам мы опираемся на следующие правила:
- CSS-классы, которые предназначены для совместного использования, должны начинаться с префикса g-. Например, у нас могут быть классы g-submit-button, g-link-button, стилевое описание которых следует поместить в вышеупомянутый файл global.css. У вас получится синтаксис следующего вида:
.g-link-button { ... } - Каждый файл, выводящий какую-либо запись, должен иметь корневой контейнер, в котором заключен контент. В нем объявляется класс, имя которого в точности повторяет путь до файла. Например, для файла, доступного по адресу post/index.php, эта конструкция выглядит так:
<div class="post-index"> ...view content here... </div> - Описание CSS-стилей должно быть помещено в соответствующий контроллеру CSS-файл. Каждое объявление стиля должно начинаться с названия класса корневого контейнера. Например, чтобы объявить CSS-стили для класса item корневого контейнера post-index, мы должны вставить следующую запись в post.css файл:
/* in post.css file */ .post-index .item { ... } - Создание имен CSS-классов и стилей для виджетов в точности повторяют вышеописанные инструкции. Например, виджет LatestComments должен использовать корневое имя CSS класса widget-latest-comments и обращаться за стилями комментариев к файлу widget-latest-comments.css:
/* in widget-latest-comment.css file */ .widget-latest-comments .comment { ... }
Включение CSS-файлов
В режиме разработчика (когда режим YII_DEBUG задействован) каждый файл CSS должны быть подключен к основному файлу макета.В рабочем режиме, все CSS-файлы должны быть объединены и сжаты в один файл. Имя файла должно содержать дату (например, styles-201010221550.css).
Поступая таким образом, мы разрешаем браузеру кэшировать объединенный файл CSS и тем самым устранить необходимость загрузки CSS-файла каждый раз.
Объединение и сжатие файлов CSS
Здесь мы вводим стратегии по достижению указанной цели.Во-первых, мы объявляем все имена CSS-файлов в виде массива в параметрах приложения.
Во-вторых, пишем консольную команду, чтобы объединить и сжать CSS-файлы. Для этих целей может быть использован YUI-компрессор. Эта команда будет считывать названия CSS-файлов из параметров приложения, объединять все содержимое файлов в один файл, и вызывать YUI-компрессор для компрессии CSS-стилей. Созданный файл должен быть назван временной меткой.
В-третьих, модифицируйте главный файл макета, вставив следующий код в раздел head:
<head>
......
<?php if(Yii::app()->params['css.files.compressed']): ?>
<link rel="stylesheet" type="text/css"
href="<?php echo Yii::app()->baseUrl.'/css/'
. Yii::app()->params['css.files.compressed']; ?>" />
<?php else: ?>
<?php foreach(Yii::app()->params['css.files'] as $css): ?>
<link rel="stylesheet" type="text/css"
href="<?php echo Yii::app()->baseUrl.'/css/'.$css); ?>" />
<?php endforeach ?>
<?php endif ?>
</head>Мы предполагаем, что CSS-файлы перечисляются в параметре приложения css.files. И если файлы объединяются и сжимаются, то в конечном итоге имя файла должно быть включено в параметр приложения css.files.compressed. Консольная команда должна внести изменения в конфигурационный файл приложения для обновления параметра css.files.compressed после того, как создастся комбинированный и сжатый CSS-файл.
Инструкции по созданию имен для JQuery-селекторов
Мы можем использовать правила создания CSS-имен и для JQuery-селекторов в JavaScript-коде приложения. В частности при выборе одного или нескольких элементов с помощью JQuery-селекторов мы должны следовать аналогичным правилам для объявления CSS-стилей. Например, если мы хотим прикрепить обработчики «клика» ко всем гиперссылкам в пределах новостных блоков, то мы должны использовать следующие селекторы JQuery:$('.news-index .item a').click(function(){
...
});То есть селектор должен начинаться с имени корневого контейнера CSS-класса (в данном случае news-index).
14 комментариев