Sometimes speaking
In the process of developing software products, I find it important to pay attention to code conventions (general principles when programming makes code easy to understand, read and maintain) is quite important.
However, I see that a lot of people do not pay attention to the beautiful, short and easy to read CSS code. If your application is small, do not say but if for large applications see the number of CSS code written by developers, maybe tens of thousands of lines, very cumbersome, code duplication will occur => image our page render
speed.
While we still know that CSS code is relatively easy to write, it is another story to write beautifully and professionally. So I determined to learn to share with everyone what I have learned.
CSS coding standard
1. Format
The first thing I want to introduce is the CSS coding standard . I will list a few examples later.
- Go back 2 spaces for each attribute
- Use quotes instead of parentheses (
font-family: "Arial Black", input[type="checkbox"]
) - Put a space after the mark
:
- Place a space before the
{
- Finish defining properties with a semicolon (although adding semicolons is optional).
- Use concise syntax if possible e.g. (padding, margin …)
- Declare only one attribute per line (easy to see, if the error can know which line, which attribute)
- The code adds other properties that one browser does not support
- There should be a space between CSS blocks
- Encourage the use of color codes ( #fff )
1 2 3 4 5 6 | <span class="token selector">p</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> block <span class="token punctuation">;</span> <span class="token property">color</span> <span class="token punctuation">:</span> #fff <span class="token punctuation">;</span> <span class="token property">background-color</span> <span class="token punctuation">:</span> #000 <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
2. Naming method
First, give the ID and class a meaningful name, and give it a name that clearly represents the purpose of the element in question.
1 2 3 4 5 6 7 8 9 10 11 | <span class="token comment">/* Không nên, đặt tên không có nghĩa */</span> <span class="token selector">#phu-1998</span> <span class="token punctuation">{</span> <span class="token property">color</span> <span class="token punctuation">:</span> #e1e1e1 <span class="token punctuation">;</span> <span class="token property">font-size</span> <span class="token punctuation">:</span> 16px <span class="token punctuation">}</span> <span class="token comment">/* Nên, có ý nghĩa với đối tượng cụ thể */</span> <span class="token selector">#gallery</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token selector">#login</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token selector">.video</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> |
Try to pass the contents of the ID and the shortest class if possible, but don’t make too many abbreviations, it will be difficult for us to know the meaning of the name we set it to function.
1 2 3 4 5 6 7 8 | <span class="token comment">/* Không nên */</span> <span class="token selector">#navigation</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token comment">/* có thể viết ngắn gọn được */</span> <span class="token selector">.atr</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token comment">/* cái này tượng trưng cho gì vậy??? */</span> <span class="token comment">/* Thay vào đó */</span> <span class="token selector">#nav</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token selector">.author</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> |
Put the name of the ID and class in the form lowercase
and use the -
1 2 3 4 5 6 7 8 | <span class="token comment">/* nên */</span> <span class="token selector">.dataset-list</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token comment">/* không nên */</span> <span class="token selector">.datasetlist</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token selector">.datasetList</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token selector">.dataset_list</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> |
In addition to the above, I advise you to name according to BEM techniques, it can simply be understood that it is the naming convention for classes in HTML and CSS. To learn this, read the next article of this article
3. Comments
Maybe many of you will often ignore this comment , but for me, this is quite an important part. So that when we or someone else reread the code, we can know what this section formats the css for to be easily modified, limiting the guessing that the functionality of the code can lead to error correction.
Comment file
In the application, we can split the css files to make it easier to work with.
If so, please add a little comment
to see what this file does
1 2 3 4 5 | <span class="token comment">/** * @file * Mô tả qua qua về file làm công việc gì */</span> |
Multi-line comments
For long descriptions, keep in mind that each comment line should have a maximum of 80 characters. If it is longer, return a line like this
1 2 3 4 5 | <span class="token comment">/** * The first sentence of the long description starts here and continues on this * line for a while finally concluding here at the end of this paragraph. **/</span> |
Single-line comments
Whether multi-line
or single-line
, make sure the maximum number of characters per line is 80.
1 2 3 4 5 6 7 8 9 10 | <span class="token selector">.example</span> <span class="token punctuation">{</span> <span class="token comment">/* Đặt margin của body bằng 0 */</span> <span class="token property">margin</span> <span class="token punctuation">:</span> 0 <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* Đọan này để CSS cho .example */</span> <span class="token selector">.example--item</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> inline <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
4. Selector
Types of selectors
Selectors fall into two general categories: specific selectors and non-specific selectors .
Specific selectors
- Type selectors (h1, h2 …) and pseudo-elements (:: after, :: before)
- Class selector (.example …), attribute selectors ([type = “radio”] …)
- ID selectors (#content)
Selectors are not specific
Will include selectors (*)
, selectors include operators like (+, >, ~, ' ', ||)
, and negation pseudo-class (:not())
.
For selector cụ thể
we do not need to declare too clearly the ‘hairline’ of those selectors, as sometimes it will affect the performance of the website.
1 2 3 4 5 6 7 8 | <span class="token comment">/* Không cần thiết */</span> <span class="token selector">ul#example</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token selector">div.error</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token comment">/* Ổn */</span> <span class="token selector">#example</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token selector">.error</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> |
The sorted order of the selectors
I found a pretty famous photo of the selectors’ priority. We can apply this precedence to writing CSS in one order. I have looked through a few source code and also saw that they organize the code according to this.
You see the results of the image below to understand how to organize a CSS file. I found the photo explains quite in detail, so I won’t say anything more.
5. Properties
The organization of properties within a block
also has its own rules.
Usually I see people not paying much attention to this part such as the order of the arrangement. If your project installs a tool to check the CSS file, it will require to arrange the properties in order.
As noted above, attribute writing should follow a few things
- End with a semicolon, followed by
:
is a space - All properties must be written in lowercase, except
font names
- Use hex code color or
rbga()
- Use a concise syntax if possible
Sort order
To sort, we just keep sorting from important to less important.
- SASS INHERITANCE : extend , mixin ..
- CONTENT : Applied to pseudo-elements will have properties as content (:: before, :: after).
- POSITION AND LAYOUT : position, z-index, top, bottom, left, right, Flexbox properties, float, clear
- DISPLAY AND VISIBILITY : display, opacity, transform
- CLOCK : animation, transition
- BOX MODEL : margin, border, box-shadow, width, height …
- BACKGROUND : background, cursor
- TYPOGRAPHY and COLOR : font-size, line-height …
- PSEUDO-CLASSES & PSEUDO-ELEMENTS : This only applies when you are writing CSS nested. (: hover,: before,: after …)
1 2 3 4 5 6 7 8 | <span class="token selector">#content</span> <span class="token punctuation">{</span> <span class="token property">position</span> <span class="token punctuation">:</span> absolute <span class="token punctuation">;</span> <span class="token property">z-index</span> <span class="token punctuation">:</span> 1 <span class="token punctuation">;</span> <span class="token property">padding</span> <span class="token punctuation">:</span> 10px <span class="token punctuation">;</span> <span class="token property">background</span> <span class="token punctuation">:</span> #fff <span class="token punctuation">;</span> <span class="token property">color</span> <span class="token punctuation">:</span> #777 <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
If you find the above arrangement too difficult to remember, use another way of sorting in alphabetical order.
1 2 3 4 5 6 7 8 9 | <span class="token property">background</span> <span class="token punctuation">:</span> fuchsia <span class="token punctuation">;</span> <span class="token property">border</span> <span class="token punctuation">:</span> 1px solid <span class="token punctuation">;</span> <span class="token property">-moz-border-radius</span> <span class="token punctuation">:</span> 4px <span class="token punctuation">;</span> <span class="token property">-webkit-border-radius</span> <span class="token punctuation">:</span> 4px <span class="token punctuation">;</span> <span class="token property">border-radius</span> <span class="token punctuation">:</span> 4px <span class="token punctuation">;</span> <span class="token property">color</span> <span class="token punctuation">:</span> black <span class="token punctuation">;</span> <span class="token property">text-align</span> <span class="token punctuation">:</span> center <span class="token punctuation">;</span> <span class="token property">text-indent</span> <span class="token punctuation">:</span> 2em <span class="token punctuation">;</span> |
Declaration Separation
For selectors with common properties, write down each selectors line
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token comment">/* Hợp lý */</span> <span class="token selector">h1, h2, h3</span> <span class="token punctuation">{</span> <span class="token property">font-weight</span> <span class="token punctuation">:</span> normal <span class="token punctuation">;</span> <span class="token property">line-height</span> <span class="token punctuation">:</span> 1.2 <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* Chưa hợp lý */</span> <span class="token selector">h1, h2, h3</span> <span class="token punctuation">{</span> <span class="token property">font-weight</span> <span class="token punctuation">:</span> normal <span class="token punctuation">;</span> <span class="token property">line-height</span> <span class="token punctuation">:</span> 1.2 <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
6. Values
Talking about properties, then surely values will also be necessary to pay attention
- Behind the
value
must be a semicolon, in front of it must be a space - Use double quotes instead of parentheses, for example, for font names with more than one word, double quotes are required.
- For font-weight, use numbers instead of existing attributes like
normal
andbold
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token comment">/* Viết chuẩn */</span> <span class="token selector">.class</span> <span class="token punctuation">{</span> <span class="token property">background-image</span> <span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span> <span class="token punctuation">(</span> images/bg.png <span class="token punctuation">)</span></span> <span class="token punctuation">;</span> <span class="token property">font-family</span> <span class="token punctuation">:</span> <span class="token string">"Helvetica Neue"</span> <span class="token punctuation">,</span> sans-serif <span class="token punctuation">;</span> <span class="token property">font-weight</span> <span class="token punctuation">:</span> 700 <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* Không chuẩn */</span> <span class="token selector">.class</span> <span class="token punctuation">{</span> <span class="token property">font-family</span> <span class="token punctuation">:</span> Times New Roman <span class="token punctuation">,</span> serif <span class="token punctuation">;</span> <span class="token comment">/* Cần dấu ngoặc kép */</span> <span class="token property">font-weight</span> <span class="token punctuation">:</span> bold <span class="token punctuation">;</span> <span class="token comment">/* Tránh sử dụng name font weight */</span> <span class="token property">line-height</span> <span class="token punctuation">:</span> 1.4em <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
0 and Units
We do not need to write the unit after the value to 0 , unless it is required
1 2 3 4 | <span class="token property">flex</span> <span class="token punctuation">:</span> 0px <span class="token punctuation">;</span> <span class="token comment">/* Cái này thì bắt buộc */</span> <span class="token property">margin</span> <span class="token punctuation">:</span> 0 <span class="token punctuation">;</span> <span class="token property">padding</span> <span class="token punctuation">:</span> 0 <span class="token punctuation">;</span> |
Leading 0s
For values between -1 and 1 , it is not necessary to write a leading zero .
1 2 | <span class="token property">font-size</span> <span class="token punctuation">:</span> .6em <span class="token punctuation">;</span> |
Hexadecimal Notation
For hex code color
type, we can concisely rewrite the color code from 6 characters to 3 characters with some color codes.
1 2 | <span class="token property">color</span> <span class="token punctuation">:</span> #eebbcc <span class="token punctuation">;</span> |
then write it into
1 2 | <span class="token property">color</span> <span class="token punctuation">:</span> #ebc <span class="token punctuation">;</span> |
That’s OK.
Conclude
Above are a few ways that I think will help your images organize CSS files in a better way. If there is anything wrong in the article, please comment.
If you find it helpful, give me an upvote.