Front-end Coding specification-CSS Articles

Reasonable avoidance of the use of IDs

In general, the ID should not be applied to the style.

The style of the ID cannot be reused and you can only use the ID once per page.

The only valid use of ID is to determine the location of a Web page or an entire site.

However, you should always consider using class, not ID, unless you use only one

Another objection to the use of ID is that the ID selector has a high weight.

Avoid label signing in CSS Selector

You should use a clear, accurate, and semantic class name when building selectors. Do not use the tag Selector. If you only care about your class (class) name
, not your code element, which is easier to maintain.

If you are using only the Class (class) name that is actually meaningful,
And instead of using the element selector, you just need to change your HTML tags without having to change your CSS.

Abbreviation attribute

CSS provides a variety of abbreviation properties (such as font fonts) that should be used whenever possible, even if only one value is set.

Using abbreviated attributes is useful for code efficiency and readability.

//不推荐border-top-style: none;font-family: palatino, georgia, serif;font-size: 100%;line-height: 1.6;padding-bottom: 2em;padding-left: 1em;padding-right: 1em;padding-top: 0;//推荐border-top: 0;font: 100%/1.6 palatino, georgia, serif;padding: 0 1em 2em;

0 and units

Omit the units after the value "0". Do not use units after the 0 value, unless there is a value.

//不推荐padding-bottom: 0px;margin: 0em;//推荐padding-bottom: 0;margin: 0;

Hexadecimal notation

If possible, use a 3-character hexadecimal notation.
The color value also allows this representation,
A 3-character hexadecimal notation is shorter.

Always use lowercase hexadecimal digits.

//不推荐color: #FF33AA;//推荐color: #f3a;

Declaration Order

This is the approximate outline of the order in which CSS attributes are written in a selector. This is to ensure better readability and scanning is important.

As a best practice, we should follow the following order (which should be in the order of the following table):

Structural Properties:

1. Display

2, position, left, top, right

3, overflow, float, clear

4, margin, padding

Performance attributes:

1, background, border

2. Font, text

CSS Quotes

The property selector or property value is enclosed in double quotation marks ("") instead of single quotation marks (").
URI value (URL ()) Do not use quotation marks.

Media Query Location

Try to keep the media query location close to their relevant rules. Do not put them together in a separate style file, or at the bottom of the document. This will only make it easier for people to forget about them later.

Don ' t use @import

<link>compared to @import slower, additional page requests are added and may lead to other unforeseen problems.

<!--推荐--><link rel="stylesheet" href="core.css"><!-- 不推荐 --><style>    @import url("more.css");</style>

Class naming

Keep class named full lowercase, you can use an underscore (do not use underscores and CamelCase). The underscore should be a natural discontinuity of the related class. (for example,. btn and. Btn-danger).

Avoid over-using shorthand: BTN can describe a button well, but. s cannot represent any element.

The class should be named as short as possible, and be as clear as you can.

Use meaningful names, and use structural or action-targeted correlations rather than abstract names.

Use the nearest parent node or parent class as the prefix for naming.

Use. js-* to represent the behavior (as opposed to styles), but do not include these classes in the CSS.

CSS naming conventions (rules) common CSS naming conventions

Head: Header

Content: Content/container

Tail: Footer

Navigation: Nav

Sidebar: Sidebar

Column: Column

Page perimeter control overall layout width: Wrapper

Middle: Left Right center

Login Strip: Loginbar

Logo: Logo

Ad: Banner

Page body: Main

Hotspot: Hot

Press: News

Download: Download

Sub-navigation: Subnav

Menus: Menu

Sub-menu: submenu

Searches: Search

Links: Friendlink

Footer: Footer

Copyrights: Copyright

Scrolling: Scroll

Contents: Content

Tags: tags

Article List: List

Hint Message: MSG

Tip: Tips

Column Title: Title

Join: Joinus

Guide: Guides

Services: Service

Registration: Regsiter

State: Status

Vote: Vote

PARTNER: Partner

notation:

/* Header */

Content Area

/* End Header */

Name of the ID:　

1) Page structure　

Container: Container

Page Header: Header

Content: Content/container

Page body: Main

Page End: Footer

Navigation: Nav

Sidebar: Sidebar

Column: Column

Page perimeter control overall layout width: Wrapper

Middle: Left Right center

(2) Navigation　　

Navigation: Nav

Main navigation: Mainnav

Sub-navigation: Subnav

Top Navigation: Topnav

Side navigation: Sidebar

Left navigation: Leftsidebar

Right navigation: Rightsidebar

Menus: Menu

Sub-menu: submenu

Caption: Title

Abstract: Summary

(3) function　　

Logo: Logo

Ad: Banner

Login: Login

Login Strip: Loginbar

Registration: Register

Searches: Search

Functional area: Shop

Caption: Title

Join: Joinus

State: Status

Button: BTN

Scrolling: Scroll

Tags page: tab

Article List: List

Hint Message: MSG

Present: Current

Tip: Tips

Icons: Icon

Note: note

Guide: Guild

Services: Service

Hotspot: Hot

Press: News

Download: Download

Vote: Vote

PARTNER: Partner

Links: Link

Copyrights: Copyright

Precautions:　

1. Lowercase;

2. Try to use English;

3. Do not underline;

4. Try not to abbreviate unless you see the words clearly.

CSS style sheet file naming　

The main master.css

Module MODULE.CSS

Basic shared Base.css

Layout, Layout layout.css

Theme Themes.css

Column Columns.css

Text Font.css

Form Forms.css

Patch Mend.css

Print Print.css

If improper or supplement please advise!

Front-end Coding specification-CSS Articles