Reusable, Maintainable, and Modular CSS

  1. BEM
  • Block
  • Element
Don’t put HTML entities with an element class outside of their block!
  • Modifier
  • Base rules: The base category is used to define defaults for single elements. A good example of base rules is the reset.css file that many are using. It’s the bare defaults of how the elements on your page should look. While using base rules that other people created can be convenient, making your own based on your own default style choices can be advantageous as well.
  • Layout rules: These refer to the major layout components in a page. An example would be the header , footer , or content sections of your page. Layout rules can be composed of many different module rules, the next category in SMACSS.
  • Module rules: If layout rules are the major components, module rules make up those major components. Modules are your menu components inside the major header component, or the form in your content layout rule. A key to remember with modules is that they should be designed to exist as a standalone component, without being chained to a certain page layout. This means a form component shouldn’t care about how it’s parent content, footer, and header are layed out together.
  • State rules: these are quite self-explanatory, as they describe the state of a module or layout component. These are the rules like is-hidden , error , or success that provide feedback to the user. These rules imply a javascript dependency as they are toggled with user interaction. When you want to pair a state with a specific module, put the state rules with their accompanying module. For example, you’d put an active-tab state with the tab module.
  • Theme rules: These rules are used when you want different themes for different sections of the site. While the default styles would be in the base and module sections, if there’s a section of the site with a different theme you apply the different colors, padding, or typography in the theme.css file.
  • Separate structure and skin
  • Separate container and content
// Container dependent CSS (nested selectors)
.myHeader > h2 {
//style here
}
// Container Independent css .heading-text {
// styles
}
// Now, add the .heading-text class to the h2 element you're trying to style!
  • Avoid nested selectors
// If i'm trying to set the height for a list icon 
li span {
width: 32px;
height: 32px;
}
.size-32px {
width: 32px;
height: 32px;
}
  • Consistent naming conventions/CSS rules categorization

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adam French

Adam French

Systems Social Impact + Web3 Economics + Personal Development & Spirituality. Any questions? Hit me up afrench@designunity.one