How to Write A CSS in 2021

When you start learning CSS, your only concern is that things should work. However, once you start, you feel the emergence of following some orders and methods. At this point, a good CSS can be a lifesaver.

No denial, a CSS style sheet always runs the risk of becoming gibberish. If not done properly, it can only be understandable to whoever wrote it, and sometimes not even by its author. As a 2021 front-end developer, if you are still doing this, you are not writing your code that could achieve. In this article, we will be sharing a few tips for writing CSS well. Let's learn how to write CSS in 2021.

Use a good code editor

Using a code editor is not a must to write CSS; one can even use a notepad to do the same. However, with an editor, you will be able to see what you are writing and that too in colored format. Here are a few suggested text-editors:

  • Atom
  • Brackets
  • Sublime Text 3
  • Visual Studio Code

Use comments wherever required

Separate the parts of your CSS sheet with headers, in the form of comments. To make your CSS look good, you can be creative in how you write them

/ * ////////////////////////////////////======== header menu == ======/////////////////////////////////// * /

In case, you have used special rules that have helped you solve something, explain it to yourself as a reminder for the future.

/ * effect for mandatory fields. I am using a span after the inputs * /

Use multiline and tabs

Use multiline in general, but if you only have one or two properties, write them on one line.

Order the properties within the rules

There are rules that can have enough properties to be able to draw what we want, for example, a button. In this case, it may be a good idea to order these properties in the FIFO order. Try putting at first what has to do with dimensions, then positioning, then the style, and ending with the respective text.

button {
width: 100%;
margin-bottom: 30px;
padding: 15px;
border: 0;
background: orange;
font-weight: bold;
font-size: 18px;
color: white;

Use a methodology

There are many CSS methodologies such as BEM (Block Element Modifier), SMACSS (Scalable and Modular Architecture for CSS), and OOCSS (Object Oriented CSS).

Implementing these methodologies in regular practice may be a challenging task in the beginning, since they are intended for stub pages where several people work to edit the same style sheets.

However, should we follow these from the start; it can save us from a lot of future coding blunders.

Even after applying these tips, as a developer, you must review your CSS before finishing. You need to make sure that there are no redundancies and you must eliminate useless properties.

If you are looking for any assistance with PSD to HTML conversions or CSS analysis, we, at Bains Labs, would like to help you. Please share your requirements.

Show more