https://github.com/frontendlovers/css-class-naming-guide
Популярні слова у CSS-класах
https://github.com/frontendlovers/css-class-naming-guide
css3 modern-css
Last synced: about 2 months ago
JSON representation
Популярні слова у CSS-класах
- Host: GitHub
- URL: https://github.com/frontendlovers/css-class-naming-guide
- Owner: FrontendLovers
- License: mit
- Created: 2025-01-03T19:43:21.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-01-05T12:24:14.000Z (5 months ago)
- Last Synced: 2025-01-05T13:19:52.115Z (5 months ago)
- Topics: css3, modern-css
- Homepage:
- Size: 13.7 KB
- Stars: 5
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Популярні слова у 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
```html
```
- CSS
```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;
}
```