Инструкции по созданию имен для 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 {
       ...
    }
Файл макета должен также содержать корневой контейнер с префиксом layout-. Например, макет main должен использовать CSS-класс layout-main в качестве корневого контейнера. Чтобы избежать конфликтов с CSS-классами, предназначенными для стилизации контента, классы контейнерных элементов в макете могут начинаться с имени класса корневого контейнера. Например, раздел заголовка может использовать layout-main-header, а раздел содержания — layout-main-content.

Включение 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 комментариев

avatar
Для сжатия и объединения css файлов есть отличное решение grunt.js
avatar
Как он работает? Из командной строки?
avatar
Да, создается для проекта что-то типа build-файла, в котором прописываешь, какие операции к каким файлам применить и куда сохранить результат, затем в папке проекта запускается команда grunt. Из коробки умеет конкатенировать, минифицировать, валидировать и запускать юнит-тесты для js. Кроме того, у него довольно развитый коммьюнити, участниками которого написано несколько сотен тасков на все случаи жизни.
avatar
Hipster-like подход. Тру программисты собирают файлы css и js по ходу выполнения приложения и склеивают их перед отдачей в браузер (и кешируют с помощью http). То есть в склейке будут ресурсы, которые нужны для конкретных контроллеров системы.
avatar
фронтенд должны оптимизировать фронтендеры, руки прочь!
avatar
Никто не спорит. Но в 90% проектов фронтэндщики отваливаются от проекта после стадии верстки.
avatar
А в оставшихся 10% у фронтэндщиков отваливаются руки на стадии верстки.
avatar
у grunt еще есть watcher, можешь запустить его и он налету будет тебе компилировать свежак
avatar
Ну это другой разговор, нужно будет поглядеть. Напиши обзорную статью!
avatar
реквест принят
avatar
вот такой доклад есть на эту тему events.yandex.ru/events/yagosti/wsd-msk-nov-2012/talks/456/
avatar
avatar
notepad.exe
avatar
Я предпочитаю microsot frontpage!!!

Оставить комментарий