Five guidelines to help you write maintainable CSS code

Five guidelines to help you write maintainable CSS code
1. Add a comment block at the beginning of the style sheet to describe the creation date, creator, tags and other notes of the style sheet.

Copy code
The code is as follows:

Example Source Code:
/*
---------------------------------
Site: Site name
Author: 52CSS.com
Updated: Date and time
Updated by: Name
---------------------------------
*/

2. Including public color marking

Copy code
The code is as follows:

Example Source Code:
/*
---------------------------------
COLORS
Body background: #def455
Container background: #fff
Main Text: #333
Links: #00600f
Visited links: #098761
Hover links: #aaf433
H1, H2, H3: #960
H4, H5, H6: #000
---------------------------------
*/

3. Give ID and Class meaningful names <br />Not recommended naming method:
Example Source Code:

Copy code
The code is as follows:

.green-box { ... }
#big-text { ... }

Recommended naming convention:
Example Source Code:

Copy code
The code is as follows:

.pullquote { ... }
#introduction {... }

4. Integrate related style rules
Example Source Code:

Copy code
The code is as follows:

#header { ... }
#header h1 { ... }
#header h1 img { ... }
#header form { ... }
#header a#skip { ... }
#navigation { ... }
#navigation ul { ... }
#navigation ul li { ... }
#navigation ul li a { ... }
#navigation ul li a:hover { ... }
#content { ... }
#content h2 { ... }
#content p { ... }
#content ul { ... }
#content ul li { ... }

5. Add clear comments to styles
Example Source Code:

Copy code
The code is as follows:

/*
---------------------------------
Header styles
---------------------------------
*/
#header { ... }
#header h1 { ... }
#header h1 img { ... }
#header form { ... }
/*
---------------------------------
navigation styles
---------------------------------
*/
#navigation { ... }

<<:  JS ES new feature of variable decoupling assignment

>>:  HTML form value transfer example through get method

Recommend

Introducing ECharts into the Vue project

Table of contents 1. Installation 2. Introduction...

Best Practices for Deploying ELK7.3.0 Log Collection Service with Docker

Write at the beginning This article only covers E...

How to deploy SpringBoot project using Docker

The development of Docker technology provides a m...

Deleting the database and running away? How to use xtraback to back up the MySQL database

1. The mysqldump backup method uses logical backu...

jQuery implements simple pop-up window effect

This article shares the specific code of jQuery t...

Pure CSS3 to achieve mouse over button animation Part 2

After the previous two chapters, do you have a ne...

Vue uses openlayers to load Tiandi Map and Amap

Table of contents 1. World Map 1. Install openlay...

A solution to the abnormal exit of Tomcat caused by semaphore

I'm playing with big data recently. A friend ...

How to display percentage and the first few percent in MySQL

Table of contents Require Implementation Code dat...

JS uses map to integrate double arrays

Table of contents Preface Simulating data Merged ...

WeChat applet realizes the nine-square grid effect

This article shares the specific code for the WeC...

React and Redux array processing explanation

This article will introduce some commonly used ar...

js implements single click to modify the table

Pure js implements a single-click editable table ...

Solution for using Baidu share on Https page

Since enabling https access for the entire site, ...

CSS World--Code Practice: Image Alt Information Presentation

Using the <img> element with the default sr...