How we care about quality of CSS code?

We can find a lot of publications about the quality of a code written in programming languages such as JavaScript, Java, Ruby and others. Quite a lot has already been said in terms of design patterns, automated testing, and software architecture. In all of these publications, CSS seems to be treated as a supporting medium and yet constitutes a significant part of all Internet applications.

In this article we will describe what tools and good practices we use in Codest, so that the projects we provide to our clients always come of the highest quality.

SCSS PREPROCESSOR

Writing CSS code is sufficient for small applications. When dealing with a larger project, it is important that the code for similar HTML objects does not have to be repeated for many times in different places. The SCSS preprocessor helps us to use the variables, functions and so-called mixins, which make our code more structured and clean.

The following listing contains an example of a mixin that allows you to meet the “Do not Repeat Yourself” principle:

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

By using this mixin we can write code:

.item-a {
  display: flex;
  align-items: center;
  justify-content: center;
  ...
}

.item-b {
  display: flex;
  align-items: center;
  justify-content: center;
  ...
}

In more concise and clean way:

.item-a {
  @include flex-center;
}

.item-b {
  @include flex-center;
}

BEM METODOLOGY

The BEM methodology is a simple naming convention that allows you to create a modular, reusable and scalable CSS code. As a part of Codest, we use it to stylize VueJS components. We try to organize our code in such a way that a single .scss file, containing one Block, is assigned to a single .vue component. Styling of the v-page-header.vue component can be set as an example.

.page-header {
  &__title {
    font-size: 2.0rem;
    color: $color-black;
    background: $color-white;
  }

  &__logo {
    background: url('/images/background.png') no-repeat 0 0;

    &--vertical {
      background: url('/images/background-2.png') no-repeat 0 0;
    }
  }
}

UTILITY CLASSES

While working with the BEM methodology, we noticed that in order to perform a very simple operation – for example, bold part of the text – we have to invent artificial CSS class names:

.page-header {
  &__bolder-item {
    font-weight: bold;
  }
}

To eliminate this problem, we got inspired by the “utilities” classes used in the source code of the Bootstrap framework. Thanks to this, in the code of Vue/HTML templates we can use the following type:

<div>
  <span class="text-bold">Content</span>
</div>

STATIC ANALYSIS OF THE CODE

You do not need to convince anyone that working with a code that is transparent and also contains consistent structures allows you to easily modify and add new functionalities. It is important that anyone, who starts working on an existing fragment of a code can find it pretty fast. However, quite often programmers have their own habits that may not be understood by other team members. That is why it is so important to use tools that allow you to automate code checking. As a part of Codest, we use the SCSS-LINT tool to automatically analyze a SCSS code, which contains a set of predefined rules. One of the most interesting and most restrictive rules that we use in our projects may be the PropertySortOrder rule, which ensures the appropriate order of attributes within a single SCSS class.

Imagine the following two parts of the SCSS code:

.item-a {
    font-size: 14px;
    color: #FF00FF;
    margin-top: 10px;
    font-weight: bold;
    background-color: #00FFFF;
    padding: 5px;
    margin-bottom: 10px;
}

.item-b {
    font-size: 18px;
    padding: 3px;
    background-color: #00FFFF;
    margin-bottom: 4px;
}

and:

.item-a {
  margin: 10px 0;
  padding: 5px;
  background-color: #00FFFF;
  color: #FF00FF;
    font-size: 14px;
    font-weight: bold;
}

.item-b {
  margin-bottom: 4px;
  padding: 3px;
  background-color: #00FFFF;
    font-size: 18px;
}

Both passages are correct, but the second one is more readable. Related attributes such as margins and paddings are grouped together.

Summary

It is difficult in a few sentences to give all the information about the CSS code organization in the extensive web applications we create with the Codest framework. We encourage all our readers to leave comments on which tools and good practices you use in your own projects.