Веб-розробка часто потребує використання зрозумілих і уніфікованих CSS-класів для стилізації елементів. Нижче наведено категорії з найбільш вживаними словами, які допоможуть підтримувати ваш код чистим і структурованим.
Слово | Приклад класу | Опис |
---|---|---|
page |
.page |
Кореневий елемент сторінки |
header |
.page-header |
Шапка (сторінки чи елемента) |
footer |
.page-footer |
Підвал (сторінки чи елемента) |
section |
.about-section |
Розділ контенту |
main , body |
.main-content |
Основна частина |
content |
.article-content |
Вміст елемента |
sidebar |
.sidebar-menu |
Бокова колонка |
aside |
.news-aside |
Додатковий блок інформації |
widget |
.search-widget |
Віджет |
Слово | Приклад класу | Опис |
---|---|---|
image , img |
.product-image |
Зображення |
icon |
.search-icon |
Іконка |
logo |
.site-logo |
Логотип |
userpic , avatar |
.user-avatar |
Аватар користувача |
thumbnail , thumb |
.post-thumbnail |
Мініатюра |
hero |
.hero-banner |
Великий банер |
gallery |
.image-gallery |
Галерея зображень |
lightbox |
.lightbox-view |
Модальне вікно для перегляду зображень |
Слово | Приклад класу | Опис |
---|---|---|
title , heading , headline , caption , subject |
.main-title |
Заголовок |
subtitle |
.card-subtitle |
Підзаголовок |
slogan |
.brand-slogan |
Слоган |
lead , tagline |
.lead-text |
Лід-абзац |
text |
.content-text |
Текстовий контент |
desc |
.item-desc |
Опис |
excerpt |
.post-excerpt |
Відривок тексту |
quote , blockquote |
.quote-block |
Цитата |
snippet |
.code-snippet |
Приклад коду |
link |
.footer-link |
Посилання |
copyright , copy |
.site-copyright |
Копірайт |
Слово | Приклад класу | Опис |
---|---|---|
list , items |
.feature-list |
Список |
item |
.list-item |
Елемент списку |
Слово | Приклад класу | Опис |
---|---|---|
button , btn |
.submit-btn |
Кнопка |
control |
.form-control |
Елемент управління |
dropdown |
.nav-dropdown |
Випадаючий список |
Слово | Приклад використання | Опис |
---|---|---|
mobile , phone |
@media (max-width: 600px) |
Стилі для мобільних пристроїв |
phablet |
@media (max-width: 768px) |
Телефони з великими екранами |
tablet |
@media (max-width: 1024px) |
Стилі для планшетів |
notebook , laptop |
@media (max-width: 1200px) |
Стилі для ноутбуків |
desktop |
@media (min-width: 1200px) |
Стилі для настільних комп’ютерів |
Слово | Приклад класу | Опис |
---|---|---|
tiny , xs |
.btn-xs |
Маленький |
small , sm |
.btn-small |
Невеликий |
medium , base |
.btn-medium |
Середній |
big , large , lg |
.btn-large |
Великий |
huge , xl |
.container-xl |
Гігантський |
narrow |
.container-narrow |
Вузький |
wide |
.container-wide |
Широкий |
Слово | Приклад класу | Опис |
---|---|---|
search |
.search-bar |
Пошук |
socials |
.social-icons |
Іконки соцмереж |
advertisement , adv , commercial , promo |
.advertisement-banner |
Рекламний блок |
features , benefits |
.product-features |
Особливості товару |
slider , carousel |
.carousel-slider |
Слайдер |
pagination |
.page-pagination |
Посторінкова навігація |
user , author |
.post-author |
Автор запису |
meta |
.post-meta |
Блок з додатковою інформацією |
cart , basket |
.cart-items |
Корзина |
breadcrumbs |
.breadcrumb-nav |
Хлібні крихти / Навігаційний ланцюжок |
more , all |
.read-more-link |
Посилання на більше |
modal |
.modal-window |
Модальне вікно |
popup |
.popup-window |
Вспливаюче вікно |
tooltip , tip |
.tooltip-text |
Підказка |
preview |
.post-preview |
Попередній перегляд |
overlay |
.overlay-layer |
Перекриваючий шар |
Слово | Приклад класу | Опис |
---|---|---|
active , current |
.active-item |
Активний елемент |
visible |
.visible-item |
Видимий елемент |
hidden |
.hidden-item |
Прихований елемент |
error |
.error-state |
Статус помилки |
warning |
.warning-state |
Статус попередження |
success |
.success-state |
Статус успіху |
pending |
.pending-state |
Стан очікування |
Слово | Приклад класу | Опис |
---|---|---|
wrapper , wrap |
.wrapper |
Обгортка, зазвичай зовнішня |
inner |
.inner-wrapper |
Внутрішня обгортка |
container , holder , box |
.container |
Контейнер |
grid |
.grid |
Макет сторінки або елемента у вигляді сітки (зазвичай містить row і col ) |
row |
.row |
Контейнер у вигляді рядка |
col , column |
.col |
Контейнер у вигляді стовпця |
- HTML
<nav class="nav">
<ul class="list">
<li class="item"><a class="link" href="/">Головна</a></li>
<li class="item"><a class="link" href="/category">Категорія</a></li>
<li class="item"><a class="link" href="/category/product">Продукт</a></li>
<li class="item active"><a class="link" href="#">Поточна сторінка</a></li>
</ul>
</nav>
- CSS
.nav {
background-color: #f8f9fa;
padding: 10px;
}
.list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.item {
margin-right: 10px;
}
.link {
text-decoration: none;
color: #007bff;
}
.link:hover {
text-decoration: underline;
}
.item.active .link {
font-weight: bold;
color: #333;
}