## Background
When writing CSS classes for Discourse components, themes, or plugins, we follow a modified variant of [Block Element Modifier (BEM)](https://getbem.com/). Following these guidelines will make it much less likely for CSS conflicts to occur, since BEM helps a lot with specificity. Themes and components have an easier time of overriding Discourse core styles, and the more descriptive class names make it easy at a glance to see where CSS classes should be applied in core.
## The guidelines
This is what the Discourse engineering and design teams have aligned on using. It’s mainly BEM, with some influence from [SMACSS](https://smacss.com/) and others.
### Syntax
It is generally a good idea to make a distinct block level CSS class per reusable Ember component, which you can then attach element CSS classes and modifiers to.
- You use default BEM for block and element in the format `.block __element` for example `.header__ item` or `.admin-new-feature-item__screenshot`.
- These special prefixes can be used to signify that the piece of UI in question is currently styled a certain way because of a state or condition:
### Examples of syntax
Visually nesting is recommended because this keeps all relevant elements attached to the block and can be easily collapsed.
```css
.block {
// block styling
&__element {
//element styling
&.--modifier { // direct modifier on element }
.--modifier & { // indirect modifier on parent element}
}
}
```
For modifiers, they can either be applied directly to an element like so:
```html
```
Or in an alternate use case, imagine we want to style all of these elements inside the main block, when there is an error:
```html
```
Instead of placing a modifier on each element separately, we can just place it on the block level and use it indirectly via the syntax with `&` at the end. It makes little difference in the CSS file, but it keeps the DOM cleaner by not repeating modifiers.
A great real world example of our CSS classes in use in Discourse is within the chat plugin, in the [loading skeleton component](https://github.com/discourse/discourse/blob/8b9da12bf2ef02cbf913352d861fd031b763f7fd/plugins/chat/assets/javascripts/discourse/components/chat-skeleton.gjs).
## See also
- [Designing for Different Devices](https://meta.discourse.org/t/-/367810) — adapting styles to viewport size, touch vs. hover, and other device characteristics.
* * *
This document is version controlled - suggest changes [on github](https://github.com/discourse/discourse/blob/main/docs/developer-guides/docs/03-code-internals/26-css-guidelines-bem.md).