BEM
Block Element Modifier
A CSS naming convention using block__element--modifier format to create reusable, maintainable class names.
Teknik Detay
CSS BEMs (--*) differ from preprocessor variables: they cascade, inherit, and can be modified at runtime with JavaScript via element.style.setProperty(). They participate in the cascade and specificity system. The var() function accepts a fallback value: var(--color, #000). Custom properties enable dynamic theming, design tokens, and component-scoped styling without JavaScript framework overhead. They are computed at used-value time, enabling animations and transitions on custom properties.
Ornek
```css
:root {
--color-primary: oklch(0.65 0.24 265);
--spacing-md: 1.5rem;
--radius: 0.5rem;
}
.btn {
background: var(--color-primary);
padding: var(--spacing-md);
border-radius: var(--radius);
}
```
Ilgili Formatlar
Ilgili Araclar
C
CSS Minifier
C
CSS Beautifier
C
CSS Gradient Generator
C
CSS Box Shadow Generator
C
CSS Flexbox Generator
C
CSS Grid Generator
C
CSS Animation Generator
C
CSS Border Radius Generator
C
CSS Text Shadow Generator
C
CSS Transform Generator
C
CSS Unit Converter
C
CSS Color Converter
M
Media Query Generator
C
CSS Filter Effects
C
CSS Clip-Path Generator
Ilgili Terimler
Specificity
Cascade
Box Model
Flexbox
Grid
Custom Property
Media Query
Pseudo-class
Pseudo-element
Transition
Keyframe Animation
Z-Index
Clamp
Container Query
Selector Combinator
Viewport Unit
Calc
Aspect Ratio (CSS)
Stacking Context
Logical Property
Color Function
Nesting
Layer
Scroll Snap
:has() Selector
Subgrid
Scroll-Driven Animation
View Transition
Anchor Positioning
Popover
oklch()
lab()
Custom Properties Inheritance
CSS min()
CSS max()
CSS Scope
Starting Style
Color Mix
Text Wrap Balance
CSS Nesting Selector
Content Visibility
CSS Paint API
Relative Color Syntax