Guidelines for CSS Development

This is an opiniated guide line for front-end development. It is based on more than 10 years of experience developing front-end applications and more than 25 years of developing software. My experience is based on developing enterprise applications, so this guide therefor focused on enterprise applications development.

Use BEM naming conventions

Follow BEM naming conventions. BEM stands for Block – Element – Modifier. BEM helps you create consistent, meaningful and easy-to-understand class names that avoid conflicts and specificity issues. It is very easy to follow and implement. There are no complicated rules and it is fast to learn.

All names are in lower-case.

BEM divides your styles into three components:

• Block: A standalone component that can be reused in different contexts, such as header, footer, menu, etc.
• Element: A part of a block that has a specific function or role, such as title, logo, item, etc.
• Modifier: A variation or state of a block or an element that changes its appearance or behavior, such as active, disabled, large, etc.

BEM uses a double underscore (__) to separate blocks and elements, and a double dash (–) to separate modifiers.

For example:

.menu__item {
  color: black;
}

.menu__item--active {
  color: red;
}

Read https://getbem.com/naming/ and you are good to go.

In case of Angular or React development, the Angular/React component and the CSS BEM block should follow the same naming. For example in React you create a component named “Card”, the CSS block name should be “card” (CSS always lower-case).

Use BEM in combination with SCSS/SASS to make your code clearer and less typing.

Use SASS CSS-preprocessor with SCSS style

Use the SCSS CSS-preprocessor. SASS (Syntactically Awesome Style Sheets) is one of the most popular and widely used CSS preprocessors.

We recommend SASS style SCSS because it is an extension of CSS, meaning that you can write any valid CSS and it will work. So, for developers that know already CSS, it is very easy to start. Just write valid CSS. SASS can help you write more concise and organized code, as well as avoid repetition and errors.

Using SCSS has the following benefits:

• Variables: You can define and reuse values for colors, fonts, sizes and other properties using the $ sign. So instead of writing { color: #ff6347 } in your CSS, you can define variables in a global variables.scss file and use these in your CSS. For example in your variables.scss $color-text-alarm;, in your regular CSS file you use it like this: { color: $color-text-alarm; }
• Mixins: You can create and reuse groups of styles that can accept arguments and parameters using the @mixin and @include directives.
• Nesting: You can nest selectors inside each other to create hierarchical and logical structures using the indentation or brackets. This helps you write more compact BEM namings.
• Imports: You can import and combine multiple files into one using the @import directive.

Example SCSS nesting with BEM naming convetions

.card { 
  &__title { }
  &__content { }
  &--is-inactive { }
}

Example SCSS button style

$color: blue;
$size: 16px;
$shape: 5px;

@mixin button($color, $size, $shape) {
  background-color: $color;
  font-size: $size;
  border-radius: $shape;
}

.button {
  @include button($color, $size, $shape);
}

Understand Specificity

Using BEM naming conventions will help avoid many problems related to CSS Specificity. But still, it is important to understand well how this works.

See:

• https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#specificity_2
• https://cssguidelin.es/#specificity

Know and use Flexbox

With flexbox you can create easy responsive layouts.

Guides for flexbox:

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Use relative units

Relative units are units that are based on the size of another element, such as em, rem, vw, vh and %. Relative units can help you create responsive and flexible layouts that adapt to different screen sizes and resolutions, as well as improve accessibility and user experience. For example, using em or rem for font sizes can allow users to adjust the text size according to their preferences.