Write CSS so that standards don’t need to be edited

Tram Ho

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 )

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.

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.

Put the name of the ID and class in the form lowercase and use the -

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

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

Single-line comments

Whether multi-line or single-line , make sure the maximum number of characters per line is 80.

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.

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 …)

If you find the above arrangement too difficult to remember, use another way of sorting in alphabetical order.

Declaration Separation

For selectors with common properties, write down each selectors line

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 and bold .

0 and Units

We do not need to write the unit after the value to 0 , unless it is required

Leading 0s

For values ​​between -1 and 1 , it is not necessary to write a leading zero .

Hexadecimal Notation

For hex code color type, we can concisely rewrite the color code from 6 characters to 3 characters with some color codes.

then write it into

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.

Share the news now

Source : Viblo