В этой статье мы представляем набор правил по созданию 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, эта конструкция выглядит так:
  ...view content here...
• Описание 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: ...... params["css.files.compressed"]): ?> params["css.files.compressed"]; ?>" /> params["css.files"] as $css): ?> " />
Мы предполагаем, что 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).

Главная - Настройки - Настройки пользователя и настроить отображение баннеров:

Можно сделать по другому, если желаете, что бы отображались другие баннеры.

Имена пользователей

Теперь перейдем: «Пользователи » => «Группы пользователей » => «Список групп » выбираем нужную группу и приступаем к стилизации.
Для этого надо задать стиль CSS в пункте «CSS-стиль для имени пользователя ». Будем использовать стили для текста:

color - цвет ника. Можно использовать цветовые значения: RGB формат - rgb(r, g, b); шестнадцатиричная запись - #RRGGBB; RGBa формат - rgba(r, g, b, a); Базовые названия цветов: aqua, black, blue, fuchsia, gray ......
font-family - семейство шрифта для ника (Arial, Georgia, Verdana ....) Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки. Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере.
font-size - размер шрифта ника. Разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др. За 100% (или не указано) берется размер шрифта родительского элемента.
font-style - определяет начертание шрифта ника - обычное, курсивное или наклонное (normal, italic, oblique).
font-weight - устанавливает насыщенность (жирность) шрифта (bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900).
Так же можно использовать тень текста для ника:
text-shadow - указываются четыре параметра сдвиг по x, сдвиг по y, радиус размытия и цвет (1px 1px 2px black). Допускается указывать несколько параметров тени, разделяя их между собой запятой (1px 1px 2px black, 0 0 1em red)

Пример :
Указываем CSS стиль для ника:

Color: red; font-weight: bold; font-size: 12px;

Выравнивает ник по центру
Настройки стиля>>Элементы сообщений>>Имя пользователя
В блоке "Прочее" добавить

Text-align: center;

Что у нас получилось

Анимированный фон для имени(ника) пользователей

В "CSS-стиль для имени пользователя" добавить фон

Background: url(папка с картинкой/glitter_001.gif) no-repeat

В архиве ниже 14 разных фонов.

Звания пользователей

"Текст баннера пользователя " пишем любой, не видно будет, «» - имя класса, например admin , в EXTRA.css задаем стиль:

Admin { background: url(папка картинки/admin.gif) no-repeat; display: block; width: 120px; height: 30px; color: rgba(0, 0, 0, 0); margin-left: -5px; }

Смотрим что получилось

"Текст баннера пользователя " пишем название группы «Другой, используя своё имя CSS-класса » - имя класса, например admin-ribbon , в EXTRA.css задаем стиль:

/* Ранги пользователей */ .admin-ribbon, .moder-ribbon, .member-ribbon { color: #FCE2E3; display: block; font-size: 12px; font-weight: bold; height: 38px; line-height: 38px; margin-left: -12px; margin-right: -12px; text-align: center; text-shadow: 0 0 0 transparent, 0 0 2px black; width: 134px; } .admin-ribbon { background: url("styles/default/xenforo/icons/admin_ribbon.png") no-repeat scroll 0 0 transparent; } .moder-ribbon { background: url("styles/default/xenforo/icons/moder_ribbon.png") no-repeat scroll 0 0 transparent; } .member-ribbon { background: url("styles/default/xenforo/icons/member_ribbon.png") no-repeat scroll 0 0 transparent; } /* END Ранги пользователей */

В архиве ниже найдете 3 ленточки для баннера.

Свой цвет для баннеров:
Переходим на страницу списка групп: /admin.php?user-groups/ - выбираем нужную Вам группу - В поле "Текст баннера пользователя:" прописываем нужно название - В настройке "Оформление баннера пользователя:" выбираем опцию "Другой, используя своё имя CSS-класса:" и в этом поле указываем: userBanner my-style - Сохраняем всё это дело и в шаблон EXTRA.css добавляем такой код:

UserBanner.my-style { color: white; background-color: green; }

или такой

UserBanner.my-style { color: white; background-color: green; border-color: green; }

Пример баннеров с применением стилей CSS.
Сделаем баннеры с использованием только CSS. Как уже говорилось для этого используем "Другой, используя своё имя CSS-класса" , задаем для каждой группы свой класс, а в EXTRA.css , укажем стили для этих классов:

Admin_style, .lamer_style, .moder_style, .user_style { background-image: linear-gradient(to top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)); border-radius: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; display: block; font-size: 11px; margin: 4px 0 5px; padding: 2px 6px; position: relative; text-align: center; color: white; text-shadow: 0 0 0 transparent, 1px 1px 1px black; width: 98px; } .admin_style { background-color: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.7); } .moder_style { background-color: rgba(0, 155, 4, 0.5); border: 1px solid rgba(0, 155, 4, 0.7); } .user_style { background-color: rgba(0, 51, 155, 0.5); border: 1px solid rgba(0, 51, 155, 0.7); } .lamer_style { background-color: rgba(0, 158, 217, 0.5); border: 1px solid rgba(0, 158, 217, 0.7); }

С помощью CSS селекторов мы выбираем какие конкретно элементы на сайте стилизовать. О чем нам говорит эта запись?

H1 { color: red; } = селектор { свойство: значение }

Заголовку h1 присвоить красный цвет.

На этом уроке мы разберем основные виды CSS селекторов:

1. Селектор тегов
2. Селектор-идентификатор
3. Селектор классов
4. Селектор атрибутов
5. Универсальный селектор
6. Комбинированные селекторы

1.Селектор тегов

Пишется название тега без угловых кавычек.

H1 { ..
}

Давайте заглянем в консоль инструментов для разработчика какого-нибудь сайта.

На скриншоте отчетливо видно, что для селектора тега h1 задано свойство с конкретным значением (font-size: 34px;) по размеру шрифта. Те или иные значения свойств можно задать любому тегу на веб-сайте. Однако, проблема заключается в том, что теперь на сайте все заголовки h1 будет размером в 34 пикселя. Если мы так и задумали, то все ОК, а если нет, например на другой странице по задумке дизайнера, заголовок h1 должен быть 40 пикселей. Тогда переходим к следующему виду CSS селекторов .

2.Селектор классов

Вот этому особенному заголовку h1 размером в 40 пикселей присваиваем свой класс с произвольным название, например: "big" .

В HTML -документе:

Заголовок

Мы помечаем на HTML -странице только заголовки размером 40 пикселей классом "big" .

В файле CSS стилях:

Big { font-size: 40px; }

Перед названием класса всегда ставится точка, .big – селектор класса. Может применяться на сайте много раз. В случае, если мы точно знаем, что заголовок h1 размером 40 пикселей будет в единственном экземпляре. Переходим к следующему типу CSS селекторов .

3.Селектор-идентификатор

В отличии от классов применяется на сайте всего один раз и вместо точки ставится решетка # .

В HTML -документе:

Заголовок

В файле CSS стилях:

#big { font-size: 40px; }

Просто запомните, что id должно быть уникально на весь документ и не может повторяться.

Желательно id использовать для якорей или для скриптов. Старайтесь при верстке использовать только классы.

4.Селекторы атрибутов

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

В HTML -документе:

Логин

Пароль

В файле CSS стилях:

/* Зададим фоновый цвет #fcf8e3; полю для ввода логина */
input {
background-color: #fcf8e3;
}
/* Зададим фоновый цвет #f2dede; полю для ввода пароля */
input {
background-color: #f2dede;
}

У нашей формочки поле для логина покрасится в желтый цвет, а поле для пароля – в розовый. Селекторы атрибутов записываются в квадратные скобки элемент [атрибут] .

5.Универсальный селектор

В общем случае синтаксис универсального селектора будет такой. Суть его состоит в том, что он применяет стили сразу ко всем элементам сайта. Раньше он использовался для того, чтобы обнулить все стили для элементов сайта. Например отступы, поля для того, чтобы в каждом браузере сайт изначально смотрелся одинаково. Верстальщик ставил универсальный селектор, обнулял маржины и паддинги, это устаревший уже способ.

* { margin: 0;
padding: 0;
}

Но сейчас все используют normalize.css с GitHub .

6.Комбинированные селекторы

Это CSS селекторы состоящие из нескольких селекторов. Рассмотрим самые распространенные типы комбинированных селекторов.

Мультиклассы

К тегу можно одновременно добавить несколько классов. Берется значение класса, стоящего в коде ниже.

В HTML -документе:

Заголовок

В файле CSS стилях:

Big1 { font-size: 34px;}
.big2 { font-size: 40px;}

К заголовку h1 применится значение класса big2 , он стоит ниже.

Вложенный селектор

Задаются через пробел. Очень знакома ситуация, когда внутри абзаца выделяется какое-нибудь слово курсивом.

Пример такого варианта выделения

P i {
font-style: italic; /* курсив */
}

Здесь

это родительский тег, а - дочерний тег, расположенный в контейнере

. В этом случае стиль будет применяться к тегу .

Дочерний селектор

div > span {..}

Тег span является ребенком, а div – родителем. Значение стиля всегда применяется к ребенку, если он прямой потомок и непосредственно расположен в контейнере родителя.

Соседний селектор

Соседними называются элементы страницы, когда они идут друг за другом.

B + i { color: gray; }

Тебе так идет серый цвет, особенно в сочетании с розовым.

А чтобы научиться применять ваши знания на практике, рекомендую ознакомиться с моим курсом

Каскадные селекторы

Любой блок на странице должен описываться селектором класса. Не используйте каскадные селекторы так как они нарушают принцип независимости компонентов. Это же правило относится к селекторам прямого потомка (>) и соседнего элемента (+).

Исключения:

• Селекторы состояний (selected , active , hover ).
• Селекторы контекста. Существуют случаи, когда компонент используется на разных страницах или в разном окружении. В этом случае удобно использовать селекторы контекста. Важно, чтобы эти контекстные стили содержались в родительском компоненте.
• Верстка, в которой нельзя изменить структуру HTML-тегов.

Именование классов

• Имена классов записываются на английском языке в нижнем регистре. Если не уверены в написании английского слова, проверьте его по словарю. PHPStorm имеет встроенную проверку орфографии.
• Желательно, чтобы терминология в названии класса совпадала с названиями, которыми оперирует разработчик (названия полей в базе данных, названия PHP-классов).
• Для разделения слов в именах используется дефис (-).
• Создавайте имена CSS-селекторов максимально информативными и понятными. Это поможет упростить разработку и отладку кода. Не стесняйтесь использовать длинные названия классов.
• Название класса должно отражать суть блока, а не его внешний вид.
• Первым словом в названии класса должно идти название модуля. На втором месте - название блока. Название блока может состоять из нескольких слов. Такой формат, с одной стороны, сразу показывает принадлежность стилей, с другой - гарантирует их уникальность. Уникальность стилей обеспечивает независимость верстки компонентов.
• Вложенные элементы должны сохранять контекст именования блока. Блок не обязательно должен быть прямым родителем элемента.

  Оба варианта именования допустимы:

• Не допускайте сокращений. Сокращения могут привести к ситуации, когда одинаковые вещи будут названы по-разному (btn/button).
• Не используйте старый префикс bx- .
• Если к элементу происходит обращение по классу через JavaScript, то такой класс должен иметь префикс js- .
• Для верстки шаблона сайта допускается опускать префикс модуля.

Inline-стили

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

Селектор тега и селектор на атрибут

Избегайте использование имен классов с селектором тега и атрибута.

Div.task-detail-title { margin: 20px; } input { margin: 20px; } Хорошо: .task-detail-title { margin: 20px; } .task-detail-user-field { margin: 20px; }

Сокращенная форма записи свойств

CSS предлагает множество различных сокращенных форм записи (например, margin , padding , border и другие), которые рекомендуется использовать везде где это возможно, даже если задается только одно из значений. Использование сокращенной записи свойств полезно для большей эффективности и лучшего понимания кода.

Meeting-sidebar { margin-top: 5px; margin-bottom: 3px; border-width: 1px; border-style: solid; border-color: #fff; }

Meeting-sidebar { margin: 5px 0 3px; border: 1px solid #fff; }

Сокращенные формы для шрифта (font ) и фона (background ) допускается разделять на несколько свойств.

Единицы измерения

Используйте значения в пикселях. Размеры, указанные в px , абсолютные, четкие, понятные и не зависят ни от чего. Допустимо использовать проценты % везде, кроме размера текста (font-size ).

0 и единицы измерения

Не указывайте единицы измерения для нулевых значений.

Плохо: .timeman-task-list { margin: 0px 12px 0px 13px; } Хорошо: .timeman-task-list { margin: 0 12px 0 13px; }

Кавычки в ссылках

Не используйте кавычки с функцией url() , кроме случая, когда ссылка содержит пробел, либо формируется программно (обычно при использовании inline-стилей).

Плохо: .im-user-status { background: url("images/im-sprite.png"); } Хорошо: .im-user-status { background: url(images/im-sprite.png); }

Цвет

Для указания цвета элемента используйте шестнадцатеричную запись или rgba() , если требуется указать прозрачность. Не используйте rgb() и верхний регистр в значении свойства.

Плохо: .disk-invitation-popup { background: #FFFFFF; } Хорошо: .disk-invitation-popup { background: #fff; }

Хаки

Избегайте хаков в CSS-коде. Если все таки требуется сделать уникальные свойства для конкретного браузера, воспользуйтесь специальными классами .bx-chrome , .bx-firefox , .bx-ie10 .

Плохо: *+ html .vote-answers { margin: 5px; } Хорошо: .bx-ie7 .vote-answers { margin: 8px; }

Группировка правил

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

Псевдоселекторы (:before, :after)

Псевдоселекторы позволяют не нагромождать HTML-код лишними элементами, имеющими декоративное назначение. Важно понимать, что этих элементов нет в DOM и обратиться к ним через JavaScript невозможно.

Сброс стилей (CSS Reset)

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