| description |
|---|
The standard for CSS and LESS |
{% hint style="danger" %} You are reading a draft edition of this document. If you found any errors, please report them to kary@gnu.org {% endhint %}
{% hint style="success" %} Righteous is an experimental code formatter engine that implements the Kary Coding Standard for CSS language. You can simply utilize it within your editor of choice and have all the formatting done for you.
{% page-ref page="../tools/righteous.md" %} {% endhint %}
CSS is basically a sheet of settings and therefore, putting rules into two columns and showing them as a table is the most convenient way of formatting CSS. The basic rule of columns here is that that each column must begin at a tab and the space between the two columns must be at least 2 characters.
Here as you can see the tabs and spaces are rendered with arrows and dots. Now if you look at the column of properties it has started at the tab that is aligned to the number 2. The reason is, if it started at column 1 then the number of characters between the two columns would have been 1 char (as the selection shows)
{% hint style="warning" %} You don't have to write this by hand and worry about it since it is automatically done by Righteous. {% endhint %}
Very much like the other languages, it is encouraged to have a whitespace after ( and one before )
{% hint style="danger" %} Since it is encouraged and not enforced; Righteous does not format the properties of a rule and therefore it is the user's decision to write the rules in this way. {% endhint %}
CSS Variables are nice additions to CSS and to have them rendered beautifully we have a special rule about them. Since variables are no settings, they have to be separated from the settings and that's why they should be defined in the top of the rule and separated by one empty line to the settings
Also as you can see in the example, the way of writing variables is much different. They are written with their values in the next line and indented by one tab. In case of many variables, they have to be written below each other without any spacing
Rules much be separated by one line as demonstrated in this figure:
When used, Kary Comments must be applied with their respective one level of indentation. Also, it is a necessity that Line Comments decrease one level of indentation.
{% page-ref page="../comments/introduction.md" %}
{% hint style="warning" %} Righteous knows the Kary Comments and is able to automatically apply the needed formatting when finding one. Yet, it is necessary to understand that Righteous does not turn ordinary comment to Kary Comments and they have to be generated by the user. {% endhint %}
Imports must be written with no spacing between them
A radical but nice idea is to have all the selectors in one line, beautifully written as below and that's exactly how this standard implements them.
