Именование классов
(Стандартизация помогает быстрее сориентироваться в проекте новому члену команды, понять логику элемента и его поведения) Также можно внедрять БЭМ нейминг используя ниже приведенный список классов
Навигации и меню
.panel, .bar (блок с навигацией и доп. эл-тами)
.navbar (блок с навигацией. Возможны доп. эл-ты)
.navigation (блок/список исключительно для навигации)
.main-nav (.main-navigation — основная навигация)
.add-nav (.add-navigation — доп. навигация)
.breadcrumbs (блок/список с breadcrumbs )
.tags (для отображения тегов / списка тегов)
.topiclist (список тем)
.item-list (.product-list, .article-list, .recent-articles) - Список изделий (товаров), список статей (разделов), наиболее частых статей (разделов)
.paging (блок/список с нумерацией страниц)
.news (.news-list) - список новостей
.tools (список с иконками (home, contact, sitemap, print и прочее) ) - классы на эл-ты такого списка: **.home, .contact, .sitemap, .print** и др.
Формы
.login (.login-form)
.search (.search-form)
.subscribe (подписаться на новости и т.д.)
.newsletter (подписаться на рассылку)
.details (форма с реквизитами)
.profile (профиль)
.account (аккаунт (учетная запись))
.information (форма для ввода какой-либо доп. информации)
.feedback (обратная форма связи (фидбек))
.poll, survey (опрос)
.vote (голосование)
.some-form (вместо слова some подбираем нужное слово по смыслу)
Заполнение форм, покупка товаров по шагам и т.п
.steps (шаги)
.step - (шаг)
Блог
.post – объявление блока одного поста
.entry-title – заголовок поста
.entry-content – содержание поста
.meta – мета информация о посте
.updated — время обновления
.published — время публикации
.date (только тэг em) — дата публикации
.timestamp — метка или тег поста
.discussion — блок с комментариями
.comments – комментарии
.list-comments — список комментариев
.add-comments — добавление комментариев
RSS-иконки
.feed
.rss
Активные состояния
.active
.selected
Иные блоки
.box (блок с какой-то рамочкой или четкой границей)
.block (может быть без рамок)
.section (для доп. раздела)
.item (может использоваться для оформления блока с доп. содержимым, для оформления какого-либо пункта, предмета).
.products (блок, содержащий список продуктов)
.items (блок со списком каких-либо доп. эл-тов)
.article (блок для статьи или описания продукта/товара)
.books (книги, описание книги)
.calendar (календарь)
.visual (блок для имаджей (например: иллюстрация к статье, посту))
.promobox (блок для отображения рекламы и только рекламы)
.photo (для фотографий)
.featured-item (рекомендуемые вещи)
.alignleft, .alignright, .aligncenter (используются для позиционирования картинки в контентной части)
.sociable (список социалок)
Header
.logo
.slogan
Footer
.copyright
.by
.nav – если список дублирует навигационные ссылки
.listing (.list) – для списков (не используйте класс для списка, если в этом нету необходимости)
.doc – если это ссылки на документацию («privacy» и т.п.)
Отзывы:
.testimonials, reviews
More
.all, .more(ссылка, ведущая на просмотр всего содержимого)
.another (другое)
.details (ссылка, ведущая на страницу с доп. информацией)
Дополнительная информация по именованию