Improving the readability of CSS-code with the help of "style guides"
In W3Cast # 3, Denis ( CurlyBrace ) touched on the topic of using styleguides, and I just had a translated article on this topic. Therefore, I decided to share it in order to show vivid examples demonstrating the possibilities of “style guides”.
“ Style Guides ” is a set of rules and agreements that provide developers with information about the structure of the code and the accepted rules for execution. Most often used by a group of developers, with joint participation in the project or for self-discipline in the development of code.
If the project is large, it is cluttered with numerous CSS files with different color schemes, typography and other styles. To avoid confusion in the structure of the code and not forget that yes how, you need to develop a structured code, which later will be easier to use, edit and partially use in other projects.
The best way to organize clear code is to use comments. The developers came up with very creative ways to use comments and text formatting to improve code understanding. There are many different techniques that can be combined based on your preferences, but for now we will consider only a few of them.
First, analyze the structure of your layout and highlight the most important components in the CSS code . In most cases, it is useful to sort by class or CSS selector. Before you start "coding", combine the elements into groups. For example, you can select global styles ("body", paragraphs, lists, etc.), structure, headings, text styles, navigation, forms, comments, and individual elements.
Select special tags (for example, "asterisk" - "*" or minus - "-") in order to highlight important elements. For example, they can highlight the headings of individual groups of elements. It is very important that the tags are conspicuous during a quick scan of the code.
However, this approach may not be very effective for large projects, where the main style sheet is large enough. In this case, styles can be divided into several files, each of which will contain a single group. To do this, it is enough to import group styles in the main style file. And on the page it is enough to include only the main file.
It will also be useful for other developers to know some additional technical information about the project: about what changes were made the last time, when and by whom it was done.
In addition, you can enable debug diagnostic CSS styles to search for incorrect elements.
To describe the structure of your code, you can make a small table of contents at the beginning of the style file. This technique will help to make a brief overview of the structure of the location of elements using identifiers (ID) and classes (class) used as separate branches of the page tree. You can also use special keywords to quickly find the section you need in the code.
For example:
or this version of which I adhere to:
It allows you to search by index and gives a schematic representation of the page structure.
There is an even simpler method for which does not use nesting, but uses a regular numbered list. To find a block in the style sheet, just use the file search and enter the number or name of the block. This method is very easy, fast and efficient.
Using a table of contents will make it easier for other developers to read and read your CSS code. It can be printed so that it is constantly before your eyes when you read the code. For teamwork, using a table of contents will be a good advantage and will save a significant portion of your time and the time of your colleagues.
As long as we do not have the ability to set constants in CSS , we are forced to look for quick ways to designate fixed properties. In web development, constants include colors and typography used in the document, which are fixed values ​​and are used repeatedly in the document.
One way to replace the absence of constants is to create definitions of some of the constants that will be used. Again, this will help avoid confusion when copying from one property to another. If you decide to change a property in the stylesheet, it is enough to use the search and replace tools of your editor.
Alternatively, you can also describe the color codes used in your layout. For each color, you can set the sections that use it, or vice versa, for the sections to set the colors used.
The same approach can be used to designate typography.
There are several techniques for writing more structured and intuitive CSS code. There are many sorting methods invented by developers. Some developers prefer to place colors and fonts first; others prefer to first place the more important properties, for example, related to the positioning of the element. Some elements are also often sorted according to structural arrangement or topological scheme. This approach includes the grouping of tag selectors:
Some developers prefer sorting properties alphabetically:
Use your formatting style everywhere and your colleagues will thank you for your work - they will also adhere to this formatting style.
Using tabular selectors will make code understanding easier. The more "deep" element - the greater the number of tabs placed in front of him. Define the “parent” element and separate the “children” with the required number of “tabs”:
There is another interesting approach to using tabs and comments. Sometimes when you make a change, the result is not what you expected. And what if a lot of changes were made and they were not all remembered? This is where highlighting recent changes in your CSS code may be useful. Changes can be marked with an additional indentation, which will distinguish the property from others in the same selector. Or you can use some keywords in the comments. For example, @new , which can be easily found and rolled back the changes made, until you find the problem.
CSS style guides can be useful if used properly. Do not use “style guides” if they do not allow you to get a better understanding of the code and better code structure. Your goal is to achieve a better understanding / readability of the code.
Ps. Do not forget that the final version (or as they say “production”) should not contain comments of the “style guide” in order not to burden users with transferring an extra amount of data. And the developer still has to have the full version after the completion of development.
Free translation based on Improving Code Readability With CSS Styleguides
“ Style Guides ” is a set of rules and agreements that provide developers with information about the structure of the code and the accepted rules for execution. Most often used by a group of developers, with joint participation in the project or for self-discipline in the development of code.
If the project is large, it is cluttered with numerous CSS files with different color schemes, typography and other styles. To avoid confusion in the structure of the code and not forget that yes how, you need to develop a structured code, which later will be easier to use, edit and partially use in other projects.
The best way to organize clear code is to use comments. The developers came up with very creative ways to use comments and text formatting to improve code understanding. There are many different techniques that can be combined based on your preferences, but for now we will consider only a few of them.
"Divide and rule"
First, analyze the structure of your layout and highlight the most important components in the CSS code . In most cases, it is useful to sort by class or CSS selector. Before you start "coding", combine the elements into groups. For example, you can select global styles ("body", paragraphs, lists, etc.), structure, headings, text styles, navigation, forms, comments, and individual elements.
Select special tags (for example, "asterisk" - "*" or minus - "-") in order to highlight important elements. For example, they can highlight the headings of individual groups of elements. It is very important that the tags are conspicuous during a quick scan of the code.
However, this approach may not be very effective for large projects, where the main style sheet is large enough. In this case, styles can be divided into several files, each of which will contain a single group. To do this, it is enough to import group styles in the main style file. And on the page it is enough to include only the main file.
<code class = "css"> / * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - [Master StyleSheet] Project: Obout.ru Version: 1.1 Last change: 05/06/08 [fixed Float bug, Alex] Assigned to: Alexandr (ALex), Vasy Pupkin (VP) Primary use: OBOUT.RU - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * / @import "reset.css"; @import "layout.css"; @import "colors.css"; @import "typography.css"; @import "flash.css"; / * @import "debugging.css"; * / </ code>
It will also be useful for other developers to know some additional technical information about the project: about what changes were made the last time, when and by whom it was done.
In addition, you can enable debug diagnostic CSS styles to search for incorrect elements.
Creating a table of contents
To describe the structure of your code, you can make a small table of contents at the beginning of the style file. This technique will help to make a brief overview of the structure of the location of elements using identifiers (ID) and classes (class) used as separate branches of the page tree. You can also use special keywords to quickly find the section you need in the code.
For example:
<code class = "css"> / * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - [Layout] * body + Header / #header + Content / #content - Left column / #leftcolumn - Right column / #rightcolumn - Sidebar / #sidebar - RSS / #rss - Search / #search - Boxes / .box - Sideblog / #sideblog + Footer / #footer Navigation #navbar Advertisements .ads Content header h2 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * / </ code>
or this version of which I adhere to:
<code class = "css"> / * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - [Table of contents] 1. Body 2. Header / #header 2.1. Navigation / #navbar 3. Content / #content 3.1. Left column / #leftcolumn 3.2. Right column / #rightcolumn 3.3. Sidebar / #sidebar 3.3.1. RSS / #rss 3.3.2. Search / #search 3.3.3. Boxes / .box 3.3.4. Sideblog / #sideblog 3.3.5. Advertisements / .ads 4. footer / #footer - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * / </ code>
It allows you to search by index and gives a schematic representation of the page structure.
There is an even simpler method for which does not use nesting, but uses a regular numbered list. To find a block in the style sheet, just use the file search and enter the number or name of the block. This method is very easy, fast and efficient.
<code class = "css">
/ *
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
[Table of contents]
1. Body
2. Header / #header
3. Navigation / #navbar
4. Content / #content
5. Left column / #leftcolumn
6. Right column / #rightcolumn
7. Sidebar / #sidebar
8. RSS / #rss
9. Search / #search
10. Boxes / .box
11. Sideblog / #sideblog
12. Advertisements / .ads
13. Footer / #footer
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* /
<! - there is a lot of CSS code ->
/ *
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
[eight. RSS / #rss]
* /
#rss {...}
#rss img {...}
/ *
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* /
</ code>
Using a table of contents will make it easier for other developers to read and read your CSS code. It can be printed so that it is constantly before your eyes when you read the code. For teamwork, using a table of contents will be a good advantage and will save a significant portion of your time and the time of your colleagues.
Preset color scheme and typography
As long as we do not have the ability to set constants in CSS , we are forced to look for quick ways to designate fixed properties. In web development, constants include colors and typography used in the document, which are fixed values ​​and are used repeatedly in the document.
One way to replace the absence of constants is to create definitions of some of the constants that will be used. Again, this will help avoid confusion when copying from one property to another. If you decide to change a property in the stylesheet, it is enough to use the search and replace tools of your editor.
<code class = "css"> / * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - # [Color codes] # Dark gray (text): # 333333 # Dark Blue (headings, links) # 000066 # Mid Blue (header) # 333399 # Light blue (top navigation) #CCCCFF # Mid gray: # 666666 # * / </ code>
Alternatively, you can also describe the color codes used in your layout. For each color, you can set the sections that use it, or vice versa, for the sections to set the colors used.
<code class = "css"> / * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - [Color codes] Background: #ffffff (white) Content: # 1e1e1e (light black) Header h1: # 9caa3b (green) Header h2: # ee4117 (red) Footer: # b5cede (dark black) a (standard): # 0040b6 (dark blue) a (visited): # 5999de (light blue) a (active): # cc0000 (pink) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * / </ code>
The same approach can be used to designate typography.
<code class = "css"> / * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - [Typography] Body copy: 1.2em / 1.6em Verdana, Helvetica, Arial, Geneva, sans-serif; Headers: 2.7em / 1.3em Helvetica, Arial, "Lucida Sans Unicode", Verdana, sans-serif; Input, textarea: 1.1em Helvetica, Verdana, Geneva, Arial, sans-serif; Sidebar heading: 1.5em Helvetica, Trebuchet MS, Arial, sans-serif; Notes: decreasing heading by 0.4em with heading level - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * / </ code>
CSS property sorting
There are several techniques for writing more structured and intuitive CSS code. There are many sorting methods invented by developers. Some developers prefer to place colors and fonts first; others prefer to first place the more important properties, for example, related to the positioning of the element. Some elements are also often sorted according to structural arrangement or topological scheme. This approach includes the grouping of tag selectors:
<code class = "css"> body, h1, h2, h3, p, ul, li, form {border: 0; margin: 0; padding: 0; } </ code> Some developers prefer sorting properties alphabetically:
<code class = "css">
body {
background: #fdfdfd;
color: # 333;
font-size: 1em;
line-height: 1.4;
margin: 0;
padding: 0;
}
</ code>
Use your formatting style everywhere and your colleagues will thank you for your work - they will also adhere to this formatting style.
Nesting is your friend!
Using tabular selectors will make code understanding easier. The more "deep" element - the greater the number of tabs placed in front of him. Define the “parent” element and separate the “children” with the required number of “tabs”:
<code class = "css">
# main-column {display: inline; float: left; width: 30em; }
# main-column h1 {font-family: Georgia, "Times New Roman"; margin-bottom: 20px; }
# main-column p {color: # 333; }
</ code>
There is another interesting approach to using tabs and comments. Sometimes when you make a change, the result is not what you expected. And what if a lot of changes were made and they were not all remembered? This is where highlighting recent changes in your CSS code may be useful. Changes can be marked with an additional indentation, which will distinguish the property from others in the same selector. Or you can use some keywords in the comments. For example, @new , which can be easily found and rolled back the changes made, until you find the problem.
<code class = "css">
#sidebar ul li a {
display: block;
background-color: #ccc;
border-bottom: 1px solid # 999; / * @new * /
margin: 3px 0 3px 0;
padding: 3px; / * @new * /
}
</ code>
Conclusion
CSS style guides can be useful if used properly. Do not use “style guides” if they do not allow you to get a better understanding of the code and better code structure. Your goal is to achieve a better understanding / readability of the code.
Ps. Do not forget that the final version (or as they say “production”) should not contain comments of the “style guide” in order not to burden users with transferring an extra amount of data. And the developer still has to have the full version after the completion of development.
Free translation based on Improving Code Readability With CSS Styleguides
')
Source: https://habr.com/ru/post/28726/
All Articles