Css названия для классов

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Типичные названия классов в CSS

ademaro/css-class-list

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Типичные названия классов в CSS 📝

head, header sidebar navbar, nav, menu, navigation main footer content, cnt column, col breadcrumbs

banner block box container map inner wrap, wrapper

bottom center fixed left right top

ahead back first last next prev

xs, tiny s, small md, medium lg, large, big xl, extra-large

danger default error primary success warning

arrow back, backward button, btn caret clear, clr close delete divider down download forward edit exit enter last loading, load login logout more next open pull push recieve refresh remove reply select touch up

address ava, avatar author birthday language name nat, nationality nickname person profile sex size

title full-title short-title subtitle

about description cite info, information par, paragraph quote text, txt advertise, ad advantages benefits subscription, subs

bg, background icon, ic, i image, img logo photo posters wallpaper, wp

date, form-date form, form-group help, help-form input label mail, form-mail number, form-number phone, form-phone search, form-search

cat, category group module shape section subcat, subcategory subsection type

audio fast media mix play pause repeat slow stop video

fb, facebook fl, flickr ig, instagram od, odnoklassniki tw, twitter vk, vkontakte social

active current blocked chosen disabled focus hidden none selected visible hide transparent, trnpsrnt, trn empty

anniversary day date month time year

break clearfix divide line separator, separ

table tr row td col body head

comment discount dropdown features feedback full modern new news old online page panel pagination, page, pager popup price rate sale screens slider standart support tabs tags version

About

Типичные названия классов в CSS

Источник

CSS GuideLines, часть 3. Именование классов

Соглашения по именованию CSS позволяют писать строгий, чистый и красивый код. При соблюдении правил именования вы всегда будете знать:

• Для чего используется класс;
• Где класс может быть использован;
• С какими другими классами связан этот класс.

Следует отметить, что сами по себе правила именования не дадут особой выгоды при написании CSS; но зато они весьма полезны при просмотре разметки.

Разделение дефисом

Все слова в названиях классов должны быть разделены дефисом:

CamelCase и знак подчеркивания не используются для классов, следующий пример неправилен:

БЭМ-подобное именование

Для более крупных взаимосвязанных частей интерфейса я использую БЭМ-подобное именование классов.

БЭМ, то есть Блок, Элемент, Модификатор, это методология, созданная разработчиками Яндекса. Несмотря на то, что БЭМ — это довольно крупная методология, в данный момент мы заинтересованы только в ее способе именования элементов. Причем, мое соглашение по именованию немного отличается от оригинального БЭМ’a: принципы одни и те же, но синтаксис разный.

• Блок: главный корневой элемент.
• Элемент: часть блока.
• Модификатор: вариант или модификация блока.

.person <> .person__head <> .person--tall <> 

В начале класса всегда ставится название блока, для обозначения элемента мы отделяем название блока от названия элемента двумя подчеркиваниями (__), а для обозначения модификатора используем два дефиса (—).

В примере выше мы можем видеть, что .person <> — это блок; у него нет предков. .person__head <> — это элемент, часть блока; наконец, .person—tall — это модификатор, разновидность блока .person <> .

Использование блоков

Блок должен быть логической, самостоятельной единицей. Продолжая наш пример с классом .person <> : мы не можем создать класс .room__person , потому что .room <> — это самостоятельная единица. В таком случае стоит разделять блоки:

.room <> .room__door <> .room--kitchen <> .person <> .person__head <> 

Если нам потребуется обозначить человека внутри комнаты, было бы правильнее использовать такой селектор — .room .person , который позволяет не городить кашу из кучи разных непонятных элементов и блоков.

Более реалистичный пример правильного использования блоков может выглядеть следующим образом:

.page <> .content <> .sub-content <> .footer <> .footer__copyright <> 

Каждая часть кода представляет свой собственный блок. Неправильный пример использования:

.page <> .page__content <> .page__sub-content <> .page__footer <> .page__copyright <> 

Важно уметь различать, где стоит применять БЭМ, а где нет. Как правило, я использую блоки для описания автономных частей пользовательского интерфейса.

Множество слоев

Если бы мы добавили к нашему блоку .person <> еще один элемент, скажем, .person__eye , то нам не нужно было бы при именовании элемента делать шаг назад, добавляя названия предыдущих элементов, вплоть до корневого элемента. То есть, правильно будет писать .person__eye , а не .person__head__eye .

Добавляем модификации элементов

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

Однако, в реальных проектах все бывает несколько сложнее. Прощу прощения за такую аналогию, но давайте себе представим человека с красивым лицом. Сам по себе он не особо красив, поэтому лучшим решением будет добавить модификатор к элементу .person__face <> :

Но что делать, если мы хотим описать лицо красивого человека? То есть человек красив сам по себе, в отличие от предыдущего примера, и нам нужно описать его лицо? Это делается следующим образом:

.person--handsome .person__face <> 

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

.person <> .person__face < .person--handsome & <>> .person--handsome <> 

Заметьте, что мы не добавляем новый элемент .person__face внутрь элемента .person—handsome ; вместо этого мы используем родительский селектор Sass внутри уже существующего селектора .person__face . Это значит, что все правила, связанные с .person__face будут находиться в одном месте, и нам не придется разбрасывать их по всему файлу. Это хорошая практика при работе с вложенным кодом: храните все нужные стили внутри одного контекста (в нашем случае, внутри .person__face ).

Именование в разметке

Как ранее было замечено, соглашение по именованию классов наиболее полезно при работе с разметкой. Взгляните на следующий кусок разметки, не следующий нашему соглашению:

Как классы .box и .profile связаны друг с другом? Как классы .profile и .avatar связаны друг с другом? Связаны ли они вообще? Зависит ли класс .bio от класса .pro-user ? Можно ли использовать класс .avatar вне этой разметки?

При просмотре такой разметки очень сложно ответить на все эти вопросы. Использование соглашения об именовании меняет дело:

Теперь нам сразу видно, какие классы связаны друг с другом и как, а какие нет; мы знаем, какие классы мы не можем использовать вне этой разметки; наконец, мы знаем, какие классы могут быть использованы в любом другом месте.

JavaScript-хуки

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

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

Как правило, разработчики используют отдельный класс для js, начинающийся с префикса «js-», например:

Такая разметка позволяет использовать стили .btn в любом другом месте, при этом не затрагивая поведения .js-btn .

data-* атрибуты

Также довольно часто разработчиками используются data-* атрибуты в качестве js-хуков, но это неправильно. data-* атрибуты, согласно спецификации, предназначены для хранения данных, недоступных на странице. data-* атрибуты созданы для хранения данных, а не для для привязки к js.

В продолжение темы.

Как уже было сказано, все правила, представленные выше весьма просты. Я призываю вас не останавливаться на изученном и читать другие материалы по этой теме — это позволит вам получить больше возможностей по именованию классов.

Материалы для дополнительного изучения

Источник

Слова, часто используемые в CSS-классах

HTML, CSS

Изображения

image , img , picture , pic — картинка

userpic , avatar — юзерпик, маленькая картинка пользователя

thumbnail , thumb — миниатюра, уменьшенное изображение

Текст

title , subject , heading , headline , caption — заголовок

lead , tagline — лид-абзац в тексте

desc — описание, вариант текстового контента

excerpt — отрывок текста, обычно используется перед ссылкой «Читать далее…»

quote , blockquote — цитата

copyright , copy — копирайт

Списки

Блоки

page — корневой элемент страницы

header — шапка (страницы или элемента)

footer — подвал (страницы или элемента)

section — раздел контента (один из нескольких)

main , body — основная часть (страницы или элемента)

content — содержимое элемента

sidebar — боковая колонка (страницы или элемента)

aside — блок с дополнительной информацией

widget — виджет, например, в боковой колонке

Раскладка

wrapper , wrap — обёртка, обычно внешняя

inner — внутренняя обёртка

container , holder , box — контейнер

grid — раскладка (страницы или элемента) в виде сетки (обычно содержит в себе row и col )

row — контейнер в виде строки

col , column — контейнер в виде столбца

Элементы управления

button , btn — кнопка, например, для отправки формы

control — элемент управления, например, стрелки «Вперёд/назад» в фотогалерее, кнопки управления слайдером

dropdown — выпадающий список

Медиавыражения

phone , mobile — мобильные устройства

phablet — телефоны с большим экраном (6-7″)

notebook , laptop — ноутбуки

desktop — настольные компьютеры

Размеры

tiny — маленький, крохотный

Разное

socials — блок иконок соцсетей

advertisement , adv , commercial , promo — рекламный блок (режутся Адблоком, не рекомендуется использовать такие классы для блоков с внутренней рекламой)

features , benefits — список основных особенностей товара, услуги

slider , carousel — слайдер, интерактивный элемент с прокруткой содержимого

pagination — постраничная навигация

user , author — пользователь, автор записи или комментария

meta — блок с дополнительной информацией, например, блок тегов и даты в посте

breadcrumbs — навигационная цепочка, «хлебные крошки»

more , all — ссылка на полную информацию

modal — модальное (диалоговое) окно

tooltip , tip — всплывающее подсказки

preview — анонс, отрывок, например новости или поста, может состоять из заголовка, описания и картинки. Предполагается ссылка на полную версию

Состояния

active , current — активный элемент, например, текущий пункт меню

warning — статус предупреждения

success — статус успешного выполнения задачи

pending — состояние ожидания, например, перед сменой статуса на error или success

Источник