SEO блог

Речь в этой небольшой статье пойдет о том как правильно называть class для div, spann, p и тд. Каждый хоть раз в своей работе встречался с тем — какой class дать новому блоку, дабы другой человек тоже смог быстро разобраться. Недавно в интернете нашел txt файл вот с такой небольшой подборкой class-ов. Первоисточника данного файла не нашел, но думаю такая подборка может пригодится в работе.

Основные

.wrapper - /*обвертка сайта*/.hedader - /*верхняя часть сайта*/.sidebar - /*сайд бар (левая или правая часть сайта)*/.content - /*тело сайта (центральная часть)*/.footer  - /*нижняя часть сайта*/

Название блоков

.bl 
.block 
.box
.wrap
.inner
.container
.main

Секции блока

.head, .header - /*верхняя часть блока например заголовок*/.cnt, .content, .body - /*тело блока например текст с картинкой*/.footer - /*нижняя часть блока к примеру дата добавления, категория и тд*/

Колонки

.column, .col - /*колонка*/

Списки

.list
.item 

Позиционные классы

.top /* элемент сверху */.left /* элемент слева float:left */.right /* элемент справа float:right */.bottom /* элемент внизу */.center /* элемент отцентрирован  margin:0 auto; */.fixed - /*фиксированный элемент postion:fixed */

Переходы

.next  - /*следующий*/.prev  - /*предыдущий*/.last  - /*последний*/.first - /*первый*/.back  - /*назад*/.ahead - /*вперед*/

Числа

.one
.thwo
.three
.four
.five

Размеры

.xs, .tiny   - /*очень маленький*/.s,  .small  - /*маленький*/.md, .medium - /*средний */.lg, .large, .big - /*большой */.xl, .extra-large - /*очень большой*/

Цвета

.danger  - /*цвет опасности*/.default - /*стандартный цвет*/.warning, .error - /*ошибки*/.success - /*цвет успеха (к примеру верно введен код подтверждения)*/.primary - /*основной цвет */

Кнопки

.button, .btn - /*кнопка*/.loading - /*загрузка*/.close - /*закрыть*/.open  - /*открыть*/.touch - /*клик*/.edit  - /*редактировать*/.more  - /*больше*/.remove  - /*удалить*/.logout  - /*выход*/.select  - /*выбрать*/.divider - /*выпадающий список меню*/.caret, .arrow - /*стрелочка*/.up - /* Вверх */.down - /* Вниз */.delete - /* удалить */.reply    - /*ответить*/

Персона

.profile - /*профиль*/.person - /*человек*/.ava, .avatar - /*аватар, картинка*/.name - /*имя*/.description - /*описание*/.address  - /*адрес*/.nickname - /*ник*/.birthday - /*дата рождения*/.sex - /*пол*/.author - /* автор */

Заголовки

.title - /*заголовок*/.short-title - /*укороченный заголовок*/.full-title  - /*полный заголовок*/

Ссылки

.link - /*ссылка*/

Текст

.text, .txt, .paragraph  - /*текст*/.info, .information - /*информация*/

Картинки

.image, .img - /*картинка*/.icon, .ic   - /*иконка*/.bg - /*фоновая картинки или цвет*/

Формы

.search, .form-search - /*поиск по сайту*/.input - /*текстовый элемент*/.form  - /*форма*/.form-group - /*группа элементов формы*/.help-block - /*текст подсказки*/.label - /*название элемента формы*/

Категории

.type - /*тип*/.cat, .category - /*категория*/.subcat, .subcategory - /*под категория*/.section    - /*раздел*/.subsection - /*подраздел*/

Видео

.video
.play  - /*пуск*/.stop  - /*стоп*/.pause - /*пауза*/

Социальные сети

.social - /* социальные сети */.vk   - /*вконтакте*/.fb   - /*фейсбук*/.twit - /*твиттер*/.inst - /*инстаграм */

Активные классы

.none     - /*скрытый элемент*/.disabled - /*заблокированный*/.active, .current   - /*активный */.selected - /*выбранный*/.visible  - /*видный элемент*/.focus    - /*нажатый*/

Временные классы

.time  - /*время*/.date  - /*дата*/.day   - /*день*/.month - /*месяц*/.year  - /*год*/

Очистка

.clear, .clearfix, .clr - /*очистка*/

Разделители

.separator, .divide - /*разделитель вертикальный для слов */.br, .line - /*разделитель горизонтальный для блоков*/

Остальные названия

.logo    - /*логотип сайта*/.new    - /*новинка*/.sale   - /*распродажа*/.feedback - /*обратная связь*/.support - /*помощь */.group  - /*группа*/.module - /*модуль*/.posters - /*пост*/.form   - /*форма*/.tabs   - /*вкладки*/.slider - /*слайдер*/.news   - /*новости*/.table  - /*таблица*/.full   - /*полный*/.breadcrumbs - /*Хлебные крошки*/.pagination, .pager - /*Нумерация страниц*/.navbar, .nav, .menu, .navigation - /*Навигация (меню)*/.dropdown - /*выпадающее меню */.comment  - /*комментарий*/.subscription - /* Подписка */.special - /* особенный элемент */.standard - /* стандартный элемент */.screens - /* Скриншоты */.rate - /* рейтинг */.online - /* онлайн */.panel - /* панель */.popup - /* попап */.version - /* версия */.page - /* страница */.banners - /* баннер */.map - /* Карта */.more - /*еще, подробнее*/.tags - /* тег */.price - /* цена */