language-css.md

Cascading Style Sheets

Coding conventions

Please refer to Idiomatic CSS for style–guides about CSS.

Properties ordering

For better readability and maintainability the developers should group the properties by their type and order them according to the following scheme:

.selector {
    - Positioning
    - Display & Box Model
    - Typography
    - Decoration
    - Other
}

NOTE: the colors may be placed in the groups where they logically belong to, e.g. color goes to typography, border-color goes to box model. NOTE: it's not necessary to visually separate the groups by line breaks or comments - just grouping is enough.

Lines between selectors

Split every selector by an empty line to improve readability

• NOT OK

.selector1 {
    margin: 0;
    .child1 {
        padding: 10px;
    }
    .child2 {
        padding: 20px;
    }
}
.selector2 {
    position: absolute;
    .child1 {
        top: 0;
    }
}

• OK

.selector1 {
    margin: 0;

    .child1 {
        padding: 10px;
    }

    .child2 {
        padding: 20px;
    }
}

.selector2 {
    position: absolute;

    .child1 {
        top: 0;
    }
}

Inline-block layout

Bootstrap has a grid system based on floats. There exists another grid based on display: inline-block;. See an example about inline-block layout.

An implementation can be found in juwai-admin and the CSS can be seen online.

This style of layout provides the following benefits:

• Allow automatic alignment elements on their baseline (cleaner design).
• Allow easily alignment of elements, both horizontally and vertically, including distributing them evenly on a row.
• Avoid float consequences (no more margin collapsing, no more height on the parent element…).

It also has one drawback: there can't be any space between the columns:

• This won't work:

     <i>something</i> <i>something</i>

     <i>something</i>
     <i>something</i>

• This will work (preferred method):

     <i>something</i><!--
  --><i>something</i>

• This will work:

  <i>something</i><!-- This is not a space --><i>something</i>

  <i>something</i><i>something</i>

Columns

A row can't have more than 12 columns.

The layout follows Bootstrap’s logic.

Use .col-i.col-[xs|sm|md|lg]-X + .col-i.col-[xs|sm|md|lg]-Y while:

• X and Y are numbers between 1 and 12 included.
• X + Y ≤ 12

Alignments

Use .align-[top|middle|baseline|bottom] to align the columns based on the baseline of the first element.

Use .align-[left|center|right] to align the columns to the left, center or right side or their container.

Quotes

Do not use quotation marks in URI values (url()), if you do need to use the @charset rule, use double quotes.

• NOT OK:

  @charset UTF-8;
  
  .sub-user-avatar {
      background-image: url("/images/sub-user-avatar-holder.png");
  }
  .main-user-avatar {
      background-image: url('/images/main-user-avatar.png');
  }

• OK:

  @charset "UTF-8";
  
  .sub-user-avatar {
      background-image: url(/images/sub-user-avatar-holder.png);
  }
  
  .main-user-avatar {
      background-image: url(/images/main-user-avatar.png);
  }