Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to write maintainable css code, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

First, add a comment block at the beginning of the style sheet to describe the creation date, creator, markup and other remarks of the style sheet.

The code is as follows:

Example Source Code:

/ *

-

Site: Site name

Author: 52CSS.com

Updated: Date and time

Updated by: Name

-

, /

2. Including common color marking

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

-

, /

Give meaningful names to ID and Class

Deprecated naming methods:

Example Source Code:

The code is as follows:

. green-box {...}

# big-text {...}

Recommended naming method:

Example Source Code:

The code is as follows:

.pullquote {...}

# introduction {...}

Fourth, integrate the associated style rules

Example Source Code:

The code is as follows:

# header {...}

# header h2 {...}

# header h2 img {...}

# header form {...}

# header a#skip {...}

# navigation {...}

# navigation ul {...}

# navigation ul li {...}

# navigation ul li a {...}

# navigation ul li a:hover {...}

# content {...}

# content h3 {...}

# content p {...}

# content ul {...}

# content ul li {...}

Add clear comments to the style

Example Source Code:

The code is as follows:

/ *

-

Header styles

-

, /

# header {...}

# header h2 {...}

# header h2 img {...}

# header form {...}

/ *

-

Navigation styles

-

, /

# navigation {...}

Thank you for reading this article carefully. I hope the article "how to write maintainable css code" shared by the editor will be helpful to you. At the same time, I also hope you can support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.