Речь в этой небольшой статье пойдет о том как правильно называть class для div, spann, p и тд. Каждый хоть раз в своей работе встречался с тем — какой class дать новому блоку, дабы другой человек тоже смог быстро разобраться. Недавно в интернете нашел txt файл вот с такой небольшой подборкой class-ов. Первоисточника данного файла не нашел, но думаю такая подборка может пригодится в работе.
Основные
1
2
3
4
5
| .wrapper - /*обвертка сайта*/
.hedader - /*верхняя часть сайта*/
.sidebar - /*сайд бар (левая или правая часть сайта)*/
.content - /*тело сайта (центральная часть)*/
.footer - /*нижняя часть сайта*/ |
.wrapper - /*обвертка сайта*/
.hedader - /*верхняя часть сайта*/
.sidebar - /*сайд бар (левая или правая часть сайта)*/
.content - /*тело сайта (центральная часть)*/
.footer - /*нижняя часть сайта*/
Название блоков
1
2
3
4
5
6
7
| .bl
.block
.box
.wrap
.inner
.container
.main |
.bl
.block
.box
.wrap
.inner
.container
.main
Секции блока
1
2
3
| .head, .header - /*верхняя часть блока например заголовок*/
.cnt, .content, .body - /*тело блока например текст с картинкой*/
.footer - /*нижняя часть блока к примеру дата добавления, категория и тд*/ |
.head, .header - /*верхняя часть блока например заголовок*/
.cnt, .content, .body - /*тело блока например текст с картинкой*/
.footer - /*нижняя часть блока к примеру дата добавления, категория и тд*/
Колонки
1
| .column, .col - /*колонка*/ |
.column, .col - /*колонка*/
Списки
Позиционные классы
1
2
3
4
5
6
| .top /* элемент сверху */
.left /* элемент слева float:left */
.right /* элемент справа float:right */
.bottom /* элемент внизу */
.center /* элемент отцентрирован margin:0 auto; */
.fixed - /*фиксированный элемент postion:fixed */ |
.top /* элемент сверху */
.left /* элемент слева float:left */
.right /* элемент справа float:right */
.bottom /* элемент внизу */
.center /* элемент отцентрирован margin:0 auto; */
.fixed - /*фиксированный элемент postion:fixed */
Переходы
1
2
3
4
5
6
| .next - /*следующий*/
.prev - /*предыдущий*/
.last - /*последний*/
.first - /*первый*/
.back - /*назад*/
.ahead - /*вперед*/ |
.next - /*следующий*/
.prev - /*предыдущий*/
.last - /*последний*/
.first - /*первый*/
.back - /*назад*/
.ahead - /*вперед*/
Числа
1
2
3
4
5
| .one
.thwo
.three
.four
.five |
.one
.thwo
.three
.four
.five
Размеры
1
2
3
4
5
| .xs, .tiny - /*очень маленький*/
.s, .small - /*маленький*/
.md, .medium - /*средний */
.lg, .large, .big - /*большой */
.xl, .extra-large - /*очень большой*/ |
.xs, .tiny - /*очень маленький*/
.s, .small - /*маленький*/
.md, .medium - /*средний */
.lg, .large, .big - /*большой */
.xl, .extra-large - /*очень большой*/
Цвета
1
2
3
4
5
| .danger - /*цвет опасности*/
.default - /*стандартный цвет*/
.warning, .error - /*ошибки*/
.success - /*цвет успеха (к примеру верно введен код подтверждения)*/
.primary - /*основной цвет */ |
.danger - /*цвет опасности*/
.default - /*стандартный цвет*/
.warning, .error - /*ошибки*/
.success - /*цвет успеха (к примеру верно введен код подтверждения)*/
.primary - /*основной цвет */
Кнопки
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .button, .btn - /*кнопка*/
.loading - /*загрузка*/
.close - /*закрыть*/
.open - /*открыть*/
.touch - /*клик*/
.edit - /*редактировать*/
.more - /*больше*/
.remove - /*удалить*/
.logout - /*выход*/
.select - /*выбрать*/
.divider - /*выпадающий список меню*/
.caret, .arrow - /*стрелочка*/
.up - /* Вверх */
.down - /* Вниз */
.delete - /* удалить */
.reply - /*ответить*/ |
.button, .btn - /*кнопка*/
.loading - /*загрузка*/
.close - /*закрыть*/
.open - /*открыть*/
.touch - /*клик*/
.edit - /*редактировать*/
.more - /*больше*/
.remove - /*удалить*/
.logout - /*выход*/
.select - /*выбрать*/
.divider - /*выпадающий список меню*/
.caret, .arrow - /*стрелочка*/
.up - /* Вверх */
.down - /* Вниз */
.delete - /* удалить */
.reply - /*ответить*/
Персона
1
2
3
4
5
6
7
8
9
10
| .profile - /*профиль*/
.person - /*человек*/
.ava, .avatar - /*аватар, картинка*/
.name - /*имя*/
.description - /*описание*/
.address - /*адрес*/
.nickname - /*ник*/
.birthday - /*дата рождения*/
.sex - /*пол*/
.author - /* автор */ |
.profile - /*профиль*/
.person - /*человек*/
.ava, .avatar - /*аватар, картинка*/
.name - /*имя*/
.description - /*описание*/
.address - /*адрес*/
.nickname - /*ник*/
.birthday - /*дата рождения*/
.sex - /*пол*/
.author - /* автор */
Заголовки
1
2
3
| .title - /*заголовок*/
.short-title - /*укороченный заголовок*/
.full-title - /*полный заголовок*/ |
.title - /*заголовок*/
.short-title - /*укороченный заголовок*/
.full-title - /*полный заголовок*/
Ссылки
Текст
1
2
| .text, .txt, .paragraph - /*текст*/
.info, .information - /*информация*/ |
.text, .txt, .paragraph - /*текст*/
.info, .information - /*информация*/
Картинки
1
2
3
| .image, .img - /*картинка*/
.icon, .ic - /*иконка*/
.bg - /*фоновая картинки или цвет*/ |
.image, .img - /*картинка*/
.icon, .ic - /*иконка*/
.bg - /*фоновая картинки или цвет*/
Формы
1
2
3
4
5
6
| .search, .form-search - /*поиск по сайту*/
.input - /*текстовый элемент*/
.form - /*форма*/
.form-group - /*группа элементов формы*/
.help-block - /*текст подсказки*/
.label - /*название элемента формы*/ |
.search, .form-search - /*поиск по сайту*/
.input - /*текстовый элемент*/
.form - /*форма*/
.form-group - /*группа элементов формы*/
.help-block - /*текст подсказки*/
.label - /*название элемента формы*/
Категории
1
2
3
4
5
| .type - /*тип*/
.cat, .category - /*категория*/
.subcat, .subcategory - /*под категория*/
.section - /*раздел*/
.subsection - /*подраздел*/ |
.type - /*тип*/
.cat, .category - /*категория*/
.subcat, .subcategory - /*под категория*/
.section - /*раздел*/
.subsection - /*подраздел*/
Видео
1
2
3
4
| .video
.play - /*пуск*/
.stop - /*стоп*/
.pause - /*пауза*/ |
.video
.play - /*пуск*/
.stop - /*стоп*/
.pause - /*пауза*/
Социальные сети
1
2
3
4
5
| .social - /* социальные сети */
.vk - /*вконтакте*/
.fb - /*фейсбук*/
.twit - /*твиттер*/
.inst - /*инстаграм */ |
.social - /* социальные сети */
.vk - /*вконтакте*/
.fb - /*фейсбук*/
.twit - /*твиттер*/
.inst - /*инстаграм */
Активные классы
1
2
3
4
5
6
| .none - /*скрытый элемент*/
.disabled - /*заблокированный*/
.active, .current - /*активный */
.selected - /*выбранный*/
.visible - /*видный элемент*/
.focus - /*нажатый*/ |
.none - /*скрытый элемент*/
.disabled - /*заблокированный*/
.active, .current - /*активный */
.selected - /*выбранный*/
.visible - /*видный элемент*/
.focus - /*нажатый*/
Временные классы
1
2
3
4
5
| .time - /*время*/
.date - /*дата*/
.day - /*день*/
.month - /*месяц*/
.year - /*год*/ |
.time - /*время*/
.date - /*дата*/
.day - /*день*/
.month - /*месяц*/
.year - /*год*/
Очистка
1
| .clear, .clearfix, .clr - /*очистка*/ |
.clear, .clearfix, .clr - /*очистка*/
Разделители
1
2
| .separator, .divide - /*разделитель вертикальный для слов */
.br, .line - /*разделитель горизонтальный для блоков*/ |
.separator, .divide - /*разделитель вертикальный для слов */
.br, .line - /*разделитель горизонтальный для блоков*/
Остальные названия
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| .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 - /* цена */ |
.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 - /* цена */
Вам также может понравиться