Good assumptions in code

While you are creating CSS code, you have to remember initial assumptions that will help you to keep clear and very readable code. These assumptions are as follows:

• Naming convention—You need to remember that your code needs to be the exact names of classes.
• Use comments, but not everywhere, only in places where they are needed. Yeah, but when they are needed? They are especially needed when you have some exception or when you have some quick fixes for browsers. With comments, you can describe blocks of code, which describes the views, for example, of footer/header, or any other element.
• Try to keep code which is readable and logical. But how does unlogical code look like? Look at the following two examples:

  Example 1 is as follows:

  .classname {
    font-size: 12px;
    color: red;
    font-weight: bold;
    text-align: center;
    margin: 10px;
    padding-left: 2px;
    text-transform: uppercase;
  }

  Example 2 is as follows:

  .classname {
    margin: 10px;
    padding-left: 2px;
  
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
  
    color: red;
  }

Which code looks better? Yeah, of course, the second example because it has grouped declarations. First the description of the box model, then the font and text behaviors, and finally color. You can try to keep it in another hierarchy which will be more readable for you.

Using sample 2 in SASS:

.classname
  margin: 10px
  padding:
    left: 2px
  font:
    size: 12px
    weight: bold
  text:
    align: center
    transform: uppercase
  color: red

Isn't it shorter and more logical?

• Create proper selectors (this will be described later in this chapter).
• Create an elastic structure for your files.