Best Practices
## Learning Objectives
- Write maintainable CSS
- Organize CSS files
- Follow naming conventions
- Optimize for performance
## CSS Organization
### Single File vs Multiple Files
```css
/* Large project - consider splitting */
/* styles.css */
/* typography.css */
/* layout.css */
/* components.css */
/* utilities.css */
/* Or use a build tool to combine */
```
### CSS Methodologies
#### BEM (Block Element Modifier)
```css
/* Block */
.card { }
/* Element */
.card__title { }
.card__body { }
.card__image { }
/* Modifier */
.card--featured { }
.card__title--large { }
```
#### Utility-First (Tailwind-inspired)
```css
/* Utility classes */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.d-flex { display: flex; }
.gap-1 { gap: 0.25rem; }
```
## Naming Conventions
### Use Descriptive Names
```css
/* Good */
.navigation-primary { }
.button-submit { }
.section-about { }
/* Bad */
.nav { }
.btn { }
.sec { }
```
### Component Naming
```css
/* Component + part */
.article-card { }
.article-card__header { }
.article-card__image { }
.article-card__content { }
.article-card--featured { }
```
## Specificity Management
### Keep Specificity Low
```css
/* Good - low specificity */
.button {
background-color: blue;
}
/* Bad - high specificity */
header nav ul li a.button {
background-color: blue;
}
```
### Avoid !important
```css
/* Use specificity instead */
/* Bad */
.button {
background-color: blue !important;
}
/* Good */
header .button-primary {
background-color: blue;
}
```
## Code Style
### Consistent Formatting
```css
/* Use consistent indentation */
/* Use spaces, not tabs */
/* One selector per line for multiple */
/* Good */
.button,
.button-secondary,
.button-tertiary {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
}
/* Bad */
.button, .button-secondary, .button-tertiary {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
}
```
### Group Related Properties
```css
.button {
/* Display */
display: inline-flex;
align-items: center;
justify-content: center;
/* Box model */
padding: 10px 20px;
margin: 5px;
/* Typography */
font-size: 16px;
font-weight: 500;
color: white;
/* Visual */
background-color: blue;
border: none;
border-radius: 4px;
}
```
### Use Shorthand Wisely
```css
/* Good - using shorthand */
margin: 10px 20px;
padding: 10px;
/* When you need specific values */
/* Bad - resets other values */
margin: 10px 0 10px 0; /* Could use margin-top, margin-bottom */
```
## Performance
### Minimize Repaints and Reflows
```css
/* Bad - multiple reflows */
.element {
width: 100px;
height: 100px;
background-color: red;
}
.element {
width: 200px;
}
/* Good - batch changes */
/* Use classes instead */
.element {
transition: width 0.3s, height 0.3s;
}
.element.expanded {
width: 200px;
height: 200px;
}
```
### Use transforms for Animations
```css
/* Good - GPU accelerated */
.animated {
transform: translateX(100px);
transition: transform 0.3s;
}
/* Bad - causes layout */
.animated {
left: 100px;
transition: left 0.3s;
}
```
### Optimize Selectors
```css
/* Bad - overly specific */
html body div.container ul li a.link { }
/* Good - simple and specific */
.nav-link { }
```
### Use will-change Sparingly
```css
/* Use before animating */
.animated-element {
will-change: transform;
}
/* Remove after animation */
.animated-element.done {
will-change: auto;
}
```
## Responsive Design
### Mobile-First
```css
/* Base styles (mobile) */
.container {
width: 100%;
padding: 0 15px;
}
/* Tablet and up */
@media (min-width: 768px) {
.container {
width: 720px;
margin: 0 auto;
}
}
```
### Breakpoints
```css
/* Choose breakpoints based on content */
/* Not specific devices */
@media (min-width: 576px) { /* Small phones */ }
@media (min-width: 768px) { /* Tablets */ }
@media (min-width: 992px) { /* Laptops */ }
@media (min-width: 1200px) { /* Desktops */ }
```
## Accessibility
### Color Contrast
```css
/* Ensure sufficient contrast */
.text {
color: #333; /* On light background */
background-color: #f5f5f5;
}
/* Check contrast ratios */
/* WCAG AA: 4.5:1 for normal text */
/* WCAG AA: 3:1 for large text */
```
### Focus States
```css
/* Never remove focus outlines without replacement */
.button:focus {
outline: 2px solid blue;
outline-offset: 2px;
}
/* Custom focus style */
.button:focus-visible {
outline: 2px solid blue;
outline-offset: 2px;
}
```
### Reduced Motion
```css
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
```
## CSS Custom Properties
### Use Variables for Design Tokens
```css
:root {
/* Colors */
--color-primary: #007bff;
--color-text: #333;
--color-background: #fff;
/* Spacing */
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
/* Typography */
--font-size-base: 16px;
--font-family: system-ui, sans-serif;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
}
```
## Debugging
### Chrome DevTools
- Use Styles panel to edit CSS
- Toggle checkboxes to enable/disable properties
- See computed styles
- Checkbox model visualization
### Firefox DevTools
- Grid and Flexbox inspectors
- Font viewer
- Animation inspector
## Summary
- Organize CSS with methodology (BEM, utility-first)
- Keep specificity low
- Use CSS custom properties for maintainability
- Use transforms for animations (performance)
- Mobile-first responsive approach
- Respect accessibility (contrast, focus, reduced motion)
- Use DevTools for debugging
- Keep code consistent and readable
Comments
Comments powered by Giscus
To enable comments, add your Giscus embed code here.
Learn more about Giscus →