Best Practices and Accessibility
Learn CSS best practices and accessibility tips.
When you write CSS, following best practices and making your site accessible helps your website look better, work well for everyone, and is easier to maintain.
Here are some simple tips to help you do that:
1. BEM Naming Methodology
BEM (Block Element Modifier) is a way to name your CSS classes so your code stays clean and easy to understand.
- Block: The main part or component, like a button or header.
- Element: A smaller part inside the block, like an icon inside a button.
- Modifier: A special version or state, like a large button or a disabled button.
Example:
.button { /* Block: base button styles */ }
.button__icon { /* Element: icon inside button */ }
.button__large { /* Modifier: large version of button */ }Using BEM makes your CSS organized and avoids confusing class names or accidental style conflicts.
2. DRY CSS (Don’t Repeat Yourself)
DRY means you don’t write the same CSS code again and again. Instead, create reusable classes and components.
For example, instead of making separate styles for each button, make one .button class and add modifiers for variations:
.button { padding: 10px; background: blue; }
.button__red { background: red; }This saves time, reduces mistakes, and makes your code easier to update.
3. Focus States & Outline Management
Focus states show which element is selected when you use a keyboard (like pressing Tab). This is very important for people who don’t use a mouse.
Browsers usually add a blue outline to focused elements by default. Don’t remove this outline completely — it helps users know where they are on the page.
Instead, style the focus outline so it looks good but stays visible:
.button:focus {
outline: 3px solid purple;
outline-offset: 2px;
}4. prefers-reduced-motion & Reduced Transparency
Some people feel dizzy or uncomfortable with too many animations or effects. You can respect their preference by checking if they want less motion.
Use the CSS media query:
@media (prefers-reduced-motion: reduce) {
/* Turn off animations or transitions */
.animated {
animation: none;
transition: none;
}
}Similarly, some users might prefer less transparency for better clarity. Avoid heavy transparent backgrounds if possible.
5. Color Contrast Best Practices
A good contrast between text and background makes your content easy to read for everyone, especially for people with poor eyesight.
- Use dark text on a light background or light text on a dark background.
- Check your colors using free online tools like WebAIM Contrast Checker.
- Aim for a contrast ratio of at least
4.5:1for normal text.
6. Visibility: display: none vs visibility: hidden vs ARIA
Sometimes you want to hide elements on your page, but the way you hide them affects accessibility:
display: none;The element is completely removed from the page and is not visible to screen readers. Use this when you want to hide content from everyone.
visibility: hidden;The element is invisible but still takes up space, and screen readers can still access it. Use this when you want to keep layout space but hide visually.
aria-hidden="true"This tells screen readers to ignore the element but does not hide it visually. Use this to hide decorative elements from screen readers.
Choosing the right method depends on what users should or shouldn’t see or hear.
7. Accessible Responsive Layouts
Responsive design means your website looks good on phones, tablets, and desktops.
To make responsive layouts accessible:
- Use flexible grids and CSS media queries to adjust content for different screen sizes.
- Don’t rely only on color to convey information. Use icons, text, or shapes too.
- Make buttons and links easy to tap on small screens by making them big enough.
- Ensure keyboard users can navigate through content easily.
8. Use Semantic HTML with CSS
Write your HTML with proper tags like <button>, <nav>, <header>, <main>, and <footer>. CSS styles these elements, but good HTML structure improves accessibility by helping screen readers understand your page better.
9. Avoid Using !important
Using !important can make your CSS hard to maintain because it overrides other styles. Instead, try to write clear and specific selectors or use proper CSS structure like BEM to manage styles.
10. Limit Use of Fixed Widths and Heights
Fixed sizes can break layouts on small or large screens. Use relative units like %, em, rem, or vw/vh to make your design flexible and more accessible.
11. Use CSS Variables for Consistency
CSS variables (--primary-color, --font-size) help keep your styles consistent and easy to update. Changing a variable once updates every place it’s used.
:root {
--primary-color: #007bff;
--font-size: 16px;
}
.button {
background-color: var(--primary-color);
font-size: var(--font-size);
}12. Provide Clear Visual Feedback
Make sure buttons, links, and form inputs change visually when hovered or clicked. This helps all users understand what’s interactive and what's happening.
.button:hover {
background-color: #0056b3;
}13. Avoid Content Shifts
When your page loads or resizes, try to avoid layout shifts (like text or buttons jumping around). This helps people with cognitive disabilities and improves user experience.
Use CSS properties like min-height or reserve space for images to reduce shifts.
By following these best practices in CSS and focusing on accessibility, your website will be easier to build, easier to maintain, and usable by everyone, including people with disabilities.
On this page