5 tips for writing CSS to make your style more standardized

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:

<div id="wrapper">
<div id="header"><!--end #header-->
<div id="container">
<div id="content">
</div><!--end #content-->
<div id="sidebar">
</div><!--end #sidebarr-->
</div><!--end #container-->
<div id="footer">
</div>!<--end #footer-->
</div><!--end #wrapper-->
</body>

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

Recommend

Two ideas for implementing database horizontal segmentation

introduction With the widespread popularity of In...

Development details of Vue3 components

Table of contents 1. Introduction 2. Component De...

Install and use Git and GitHub on Ubuntu Linux

Introduction to Git Git is an open source version...

Axios cancels repeated requests

Table of contents Preface 1. How to cancel a requ...

Detailed Analysis of or, in, union and Index Optimization in MySQL

This article originated from the homework assignm...

React implements the principle analysis of the three stages of loading, loading, completion, loading failure

Recently I wrote in my blog that in the project l...

Some indicators of excellent web front-end design

The accessibility of web pages seems to be somethi...

CSS naming conventions (rules) worth collecting Commonly used CSS naming rules

CSS naming conventions (rules) Commonly used CSS ...

Solve the problem of invalid utf8 settings in mysql5.6

After the green version of mysql5.6 is decompress...

Detailed explanation of padding and abbreviations within the CSS box model

As shown above, padding values ​​are composite at...

React implements infinite loop scrolling information

This article shares the specific code of react to...

Implementation code of the floating layer fixed on the right side of the web page

Copy code The code is as follows: <!DOCTYPE ht...

MySQL 5.7.21 installation and configuration tutorial under Window10

This article records the installation and configu...

Gojs implements ant line animation effect

Table of contents 1. Gojs Implementation 1. Drawi...

Build a high-availability MySQL cluster with dual VIP

Table of contents 1. Project Description: 2. Proj...