Go to content
The Codest
  • About Us
    • Staff Augmentation
    • Project Development
    • Cloud Engineering
    • Quality Assurance
    • Web Development
  • Our Team
  • Case studies
    • Blog
    • Meetups
    • Webinars
    • Resources
Careers Get in touch
  • About Us
    • Staff Augmentation
    • Project Development
    • Cloud Engineering
    • Quality Assurance
    • Web Development
  • Our Team
  • Case studies
    • Blog
    • Meetups
    • Webinars
    • Resources
Careers Get in touch
2019-01-11
Software Development

How we care about quality of CSS code?

Lukasz Usarz

Senior Software Engineer

How we care about quality of CSS code? - Image

CSS seems to be treated as a supporting medium and yet constitutes a significant part of all Internet applications. What tools and good practices we use in Codest to provide the highest 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.

Related articles

Software Development

3 Useful HTML Tags You Might Not Know Even Existed

Nowadays, accessibility (A11y) is crucial on all stages of building custom software products. Starting from the UX/UI design part, it trespasses into advanced levels of building features in code. It provides tons of benefits for...

Jacek Ludzik
Software Development

5 examples of Ruby’s best usage

Have you ever wondered what we can do with Ruby? Well, the sky is probably the limit, but we are happy to talk about some more or less known cases where we can use this powerful language. Let me give you some examples.

Pawel Muszynski
Software Development

Maintaining a Project in PHP: 5 Mistakes to Avoid

More than one article has been written about the mistakes made during the process of running a project, but rarely does one look at the project requirements and manage the risks given the technology chosen.

Sebastian Luczak
Software Development

Why you will find qualified Ruby developers in Poland?

Real Ruby professionals are rare birds on the market. Ruby is not the most popular technology, so companies often struggle with the problem of finding developers who have both high-level skills and deep experience; oh, and by the...

Jakub
Software Development

9 Mistakes to Avoid While Programming in Java

What mistakes should be avoided while programming in Java? In the following piece we answers this question.

Rafal Sawicki
Software Development

A quick dive into Ruby 2.6. What is new?

Released quite recently, Ruby 2.6 brings a bunch of conveniences that may be worth taking a glimpse of.  What is new? Let’s give it a shot!

Patrycja Slabosz

Subscribe to our knowledge base and stay up to date on the expertise from industry.

About us

The Codest – International Tech Software Company with tech hubs in Poland.

    United Kingdom - Headquarters

  • Office 303B, 182-184 High Street North E6 2JA London, England

    Poland - Local Tech Hubs

  • Business Link High5ive, Pawia 9, 31-154 Kraków, Poland
  • Brain Embassy, Konstruktorska 11, 02-673 Warsaw, Poland
  • Aleja Grunwaldzka 472B, 80-309 Gdańsk, Poland

    The Codest

  • Home
  • About us
  • Services
  • Case studies
  • Know how
  • Careers

    Services

  • PHP development
  • Java development
  • Python development
  • Ruby on Rails development
  • React Developers
  • Vue Developers
  • TypeScript Developers
  • DevOps
  • QA Engineers

    Resources

  • What are top CTOs and CIOs Challenges? [2022 updated]
  • Facts and Myths about Cooperating with External Software Development Partner
  • From the USA to Europe: Why do American startups decide to relocate to Europe
  • Privacy policy
  • Website terms of use

Copyright © 2022 by The Codest. All rights reserved.

We use cookies on the site for marketing, analytical and statistical purposes. By continuing to use, without changing your privacy settings, our site, you consent to the storage of cookies in your browser. You can always change the cookie settings in your browser. You can find more information in our Privacy Policy.