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

1. CSS writing order

1. Location attributes (position, top, right, z-index, display, float, etc.)

two。 Size (width, height, padding, margin)

3. Text series (font, line-height, letter-spacing, color- text-align, etc.)

4. Background (background, border, etc.)

5. Others (animation, transition, etc.)

II. CSS Writing Standard

1. Use CSS acronym properties

Some properties of CSS can be abbreviated, such as padding,margin,font, etc., so as to simplify the code while improving the user's reading experience.

two。 Remove the "0" before the decimal point

3. Abbreviated naming

Many users like to abbreviate class names, but only if people understand your name.

4.hexadecimal color code abbreviation

Some color codes can be abbreviated, so let's try to abbreviate it to improve the user experience.

5 hyphen CSS selector naming convention

1)。 A long name or phrase can be named using a middle line for the selector.

2)。 It is not recommended to use "_" underscores to name CSS selectors. Why?

Press one less shift key when typing; browser compatibility issues (such as using selector naming with _ tips, which is not valid in IE6) can well distinguish JavaScript variable naming (JS variable naming is named with "_")

6. Do not use id casually

Id is unique in JS and cannot be used multiple times, while using class class selectors can be reused, and id takes precedence over class, so id should be used on demand and should not be abused.

7. Add a status prefix to the selector

Sometimes you can add a state prefix to the selector to make the semantics clearer, such as the ".is -" prefix added in the following figure.

III. CSS naming conventions (rules)

Commonly used CSS naming rules

Head: header

Content: content/container

Tail: footer

Navigation: nav

Sidebar: sidebar

Column: column

The overall width of the page periphery control: wrapper

Left and right center: left right center

Login bar: loginbar

Logo: logo

Advertisement: banner

Page body: main

Hot spot: hot

News: news

Download: download

Subnavigation: subnav

Menu: menu

Submenu: submenu

Search: search

Link: friendlink

Footer: footer

Copyright: copyright

Scroll: scroll

Content: content

Tag: tags

List of articles: list

Tip: msg

Tip: tips

Column title: title

Join: joinus

Guide: guide

Service: service

Registration: regsiter

Status: status

Voting: vote

Partner: partner

How to write the notes:

/ * Header * /

Content area

/ * End Header * /

Naming of id:

1) Page structure

Container: container

Header: header

Content: content/container

Page body: main

Footer: footer

Navigation: nav

Sidebar: sidebar

Column: column

The overall width of the page periphery control: wrapper

Left and right center: left right center

(2) Navigation

Navigation: nav

Main navigation: mainnav

Subnavigation: subnav

Top navigation: topnav

Edge navigation: sidebar

Left navigation: leftsidebar

Navigation on the right: rightsidebar

Menu: menu

Submenu: submenu

Title: title

Summary: summary

(3) function

Logo: logo

Advertisement: banner

Login: login

Login bar: loginbar

Registration: register

Search: search

Ribbon: shop

Title: title

Join: joinus

Status: status

Button: btn

Scroll: scroll

Banner page: tab

List of articles: list

Tip: msg

Current: current

Tip: tips

Icon: icon

Note: note

Guide: guild

Service: service

Hot spot: hot

News: news

Download: download

Voting: vote

Partner: partner

Link: link

Copyright: copyright

Points for attention:

1. All lowercase

two。 Try to use English

3. No center line or underscore.

4. Try not to abbreviate, except for words that are easy to understand.

Fifth, CSS stylesheet file naming

Major master.css

Module module.css

Basic shared base.css

Layout, layout layout.css

Topic themes.css

Column columns.css

Literal font.css

Form forms.css

Patch mend.css

Print print.css

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.