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

Implementation code for installing vsftpd in Ubuntu 18.04

Five guidelines to help you write maintainable CSS code

Implementation code for installing vsftpd in Ubuntu 18.04

A complete guide to the Docker command line (18 things you have to know)

Javascript to achieve the effect of closing advertisements

Detailed explanation of the usage and differences of MySQL views and indexes

GDB debugging MySQL actual combat source code compilation and installation

Some thoughts and experience sharing on web page (website) design and production

Sample code for installing ElasticSearch and Kibana under Docker

Summary of JavaScript's setTimeout() usage

mysql 5.6.23 winx64.zip installation detailed tutorial

Can you do all the web page making test questions?

Recommend

Detailed tutorial on installing the jenkins container in a docker environment

HTML pop-up transparent layer instance size can be set and can be proportional

The difference between button and input type=button and precautions

MySQL database development specifications [recommended]

Suggestions on creating business HTML emails

After idea publishes web project, Tomcat server cannot find the project and its solution

MySQL aggregate function sorting

Implementation of Docker deployment of ElasticSearch and ElasticSearch-Head

CenterOS7 installation and configuration environment jdk1.8 tutorial

Steps to introduce PWA into Vue project

Vue imports excel table, and automatically downloads the data that failed to import

Docker container time zone error issue

Instructions for recovering data after accidental deletion of MySQL database

mysql8.0.23 linux (centos7) installation complete and detailed tutorial

How to get the width and height of the image in WeChat applet