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 change the root user's password in MySQL

5 tips for writing CSS to make your style more standardized

How to change the root user's password in MySQL

Detailed explanation of how to use Teleport, a built-in component of Vue3

HTML form tag usage learning tutorial

MySQL advanced learning index advantages and disadvantages and rules of use

How to implement hot deployment and hot start in Eclipse/tomcat

Analyzing the node event loop and message queue

Causes and solutions for cross-domain issues in Ajax requests

The effect of zooming in on a Taobao store is similar to the principle of using a slideshow.

How to achieve the maximum number of connections in mysql

Vue routing returns the operation method of restoring page status

Recommend

js canvas to realize the Gobang game

Solution to the problem of too high penetration of input and textarea levels in WeChat applet

mysql8.0 forgotten password modification and net command service name invalid problem

Nginx monitoring issues under Linux

MySQL learning database backup detailed explanation

Node uses koa2 to implement a simple JWT authentication method

Vue Basic Tutorial: Conditional Rendering and List Rendering

Steps to encapsulate the carousel component in vue3.0

js realizes two-way data binding (accessor monitoring)

This article summarizes the specific use of CSS two-column layout and three-column layout

Detailed explanation of webpack-dev-server core concepts and cases

MySQL 8.0.15 installation and configuration tutorial under Win10

Detailed explanation of the 14 common HTTP status codes returned by the server

Detailed explanation of nginx shared memory mechanism

Sample code for implementing history in vuex