Skip to content

Latest commit

 

History

History
198 lines (156 loc) · 11.1 KB

README.md

File metadata and controls

198 lines (156 loc) · 11.1 KB

Популярні слова у CSS-класах

Веб-розробка часто потребує використання зрозумілих і уніфікованих 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;
}