5 tips for writing CSS to make your style more standardized

1. Arrange CSS in alphabetical order
Not in alphabetical order:

Copy code

The code is as follows:

div#header h1 {
z-index: 101;
color: #000;:
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}

In alphabetical order:

Copy code

The code is as follows:

div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}

The reason is this: it is better to find a certain attribute.
2. Better organize CSS structure <br />Use CSS comments to group CSS, so that the structure is clear and conducive to collaborative design.
/****Reset****/
xxxxxxx{www.sytm.net}
xxxxx{xxxxx}
/*****layouts*****/
xxxxxxx{www.sytm.net}
xxxxx{xxxxx}
3. Be consistent <br />Don't waste time discussing whether it is better to write all attributes of a selector on one line or each attribute on one line. If you like to write on one line, because writing one line per row will make the whole document feel too long and inconvenient to find. But when I send it to another person in the team, he likes to have each sentence on one line. What should I do? It is actually very simple. Just send the CSS to W3C for verification, and it will produce a result that will be automatically converted into each row.
4. Markup first, CSS later
It will be less error-prone if you finish the HTML markup before writing CSS. For example, when writing a page, first write a basic tag structure <body>

Copy code

The code is as follows:

Then try to make good use of child selectors instead of adding a selector to each element you want to style.
5. CSS Reset <br />You can copy Eric Meyer Reset, YUI Reset or other css reset, but you should then change it to your own reset according to your project.
* { margin: 0; padding: 0; } This sentence does not apply to some elements such as radio buttons, but if there are radio buttons, you can just reset them.

<<: Summary of the knowledge of embedding instructions that Vue engineers must encapsulate

>>: HTML (css style specification) must read

How to use sed command to efficiently delete specific lines of a file

5 tips for writing CSS to make your style more standardized

How to use sed command to efficiently delete specific lines of a file

Detailed explanation of XML syntax

Some suggestions for improving Nginx performance

Detailed examples of using JavaScript event delegation (proxy)

Method of using MySQL system database for performance load diagnosis

Linux forced release of occupied ports and Linux firewall port opening method detailed explanation

Linux installation MySQL5.6.24 usage instructions

Analysis of the implementation process of Docker intranet penetration frp deployment

Summarize some general principles of web design and production

How to clean up the disk space occupied by Docker

Recommend

JS implements random generation of verification code

Detailed description of HTML table border control

Pure JS method to export table to excel

Script to quickly list all host names (computer names) in the LAN under Linux

Solution to MySQL master-slave delay problem

How to operate MySQL database with ORM model framework

Linux Disk Quota Management Graphical Example

How to hide a certain text in HTML?

Vue implements sample code to disable browser from remembering password function

Implementation example of Docker deployment of front-end and back-end separation projects

How to set utf-8 encoding in mysql database

Two ways to implement HTML page click download file

How to handle images in Vue forms

This article will show you how to use Vue 3.0 responsive

JavaScript array deduplication solution