🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
🤔 Какие знаешь подходы по написанию css?
Существует несколько методологий и подходов к написанию CSS, которые помогают структурировать код, сделать его более читаемым, масштабируемым и поддерживаемым. Рассмотрим основные.
🟠Классический (обычный) CSS
Стандартное написание CSS без структурных ограничений.
.button {
background-color: blue;
color: white;
padding: 10px;
}
🟠BEM (Block Element Modifier)
BEM — один из самых популярных методологий. Он помогает избежать конфликтов классов и улучшает читаемость кода.
- Block (Блок) — независимый компонент (.button).
- Element (Элемент) — часть блока (.button__icon).
- Modifier (Модификатор) — изменение блока (.button--primary).
Нажми меня
.button {
background-color: gray;
color: white;
padding: 10px;
}
.button--primary {
background-color: blue;
}
.button__icon {
margin-right: 5px;
}
🟠OOCSS (Object-Oriented CSS)
OOCSS (Объектно-ориентированный CSS) предлагает разбивать стили на структуру и внешний вид, чтобы повторно использовать код.
.card {
border: 1px solid #ccc;
padding: 10px;
}
.card--dark {
background-color: black;
color: white;
}
🟠CSS-in-JS (Styled Components, Emotion)
Этот подход популярен в React и других фреймворках, где стили пишутся внутри JavaScript.
import styled from 'styled-components';
const Button = styled.button`
background-color: blue;
color: white;
padding: 10px;
`;
export default function App() {
return Нажми меня;
}
🟠Utility-First (Tailwind CSS)
В этом подходе используются готовые утилитарные классы для быстрого стилизации.
Кнопка
Ставь 👍 и забирай 📚 Базу знаний