Front-end CSS naming convention_html/css_WEB-ITnose

The article organizes various CSS specifications in Web front-end development, including file specifications, annotation specifications, naming specifications, writing specifications, testing specifications, etc.

1. File specifications

1. Files are archived in the agreed directory.

Specific requirements are explained through Douban’s CSS specifications:

All CSS is divided into two categories: general categories and business categories. Common CSS files are placed in the following directories:

Basic style library/css/core

General UI element style library/css/lib

JS component-related style library /css/ui

Business CSS refers to files related to specific products and is placed in the following directory:

Reading/css/book/

Movie/css/movie/

Music/css/music/

Community/css/sns/

Small station/css/site/

Same city /css/location/

Radio/css/radio/

Outbound CSS files are suitable for large files that are common to the entire site and product level. Inline CSS files are suitable for CSS that is shared across one or several pages. Another pair of specific CSS documents are organized. For example:

util-01 reset /css/core/reset.css

util-02 Universal module container/css/core/mod.css

ui-01. Like button/css/core/fav_btn.css

ui-02. Video/album list item/css/core/media_item.css

ui-03. Rating/css/core/ rating.css

ui-04. Common button/css/core/common_button.css

ui-05. Pagination/css/core/pagination.css

ui- 06. Recommended button/css/core/rec_btn.css

ui-07. Old version of dialog box/css/core/old_dialog.css

ui-08. Old version of Tab /css/ core/old_tab.css

ui-09. Old version member list/css/core/old_userlist.css

ui-10. Old version information area/css/core/notify.css

ui-11. Community user navigation/css/core/profile_nav.css

ui-12. Current large community navigation/css/core/site_nav.css

ui- 13. Loading/css/lib/loading.css

2. File introduction can be done externally or inline.

Outline method: (type declaration type="text/css" can be omitted)

Inline method: (type declaration type="text/css" can be omitted)

Both link and style tags should be placed in the head. In principle, writing styles directly on html is not allowed. Avoid using @import in CSS and do not nest it more than one level.

3. File name, file encoding and file size

The file name must be composed of lowercase letters, numbers, and underscores

The file must be in UTF-8 Encoding, use UTF-8 (not BOM), specify UTF-8 encoding in HTML, there is no need to specify it in CSS because the default is UTF-8.

Avoid a single CSS file that is too large (less than 300 lines recommended)

2. Comment specifications

1. Comments at the top of the file (recommended)

1. /*
2. * @description: Chinese description
3. * @author: name
4. * @update: name (2013 -04-13 18:32)
5. */

Copy code

2. Module comments

1. /* module: module1 by Zhang San*/
2. …
3. /* module: module2 by Zhang San*/

Copy code

Module comments must be written on a separate line

3. Single-line comments and multi-line comments

/* this is a short comment */

Single-line comments are OK It can be written on a separate line or at the end of the line. The length of each line in the comment should not exceed 40 Chinese characters or 80 English characters.

/*
* this is comment line 1.
* this is comment line 2.
*/

Multi-line comments must be written on separate lines

4. Special comments

/* TODO: xxxx by name 2013-04-13 18:32 */

/* BUGFIX: xxxx by name 2012-04- 13 18:32 */

Used to mark modifications, to-do and other information

5. Block comments

1. /* Header */
2. /* Footer */
3. /* Gallery */

Copy code

Comment a code block Optionally, block the style statement and comment it on a new line.

3. Naming conventions

Use meaningful or generic ID and class naming: ID and class naming should reflect the function of the element or use a generic name instead of Abstract obscure naming. It is preferred to reflect the purpose of use of the element; using a common name means that the element does not have a specific meaning and is no different from its sibling elements, and is usually used for auxiliary naming; using functional or common names can be more suitable for document or template changes. .

/* Not recommended: meaningless*/ #yee-1901 {}

/* Not recommended: related to style*/ .button-green {}.clear {}

/* Recommended: Specificity*/ #gallery {}#login {}.video {}

/* Recommended: Universality*/ .aux {}.alt {}

Commonly used names (memorize more and look up English words): page, wrap, layout, header (head), footer (foot, ft), content (cont), menu, nav, main, submain, sidebar (side), logo, banner, title (tit), popo (pop), icon, note, btn, txt, iblock, window (win), tips, etc.

The shorter the ID and class names are, the better, as long as they are enough to express the meaning. This not only helps with understanding, but also improves code efficiency.

/* Not recommended*/ #navigation {}.atr {}

/* Recommended*/ #nav {}.author {}

Type selection Avoid using labels, IDs, and classes at the same time as selectors to locate an element; from performance considerations, the selector hierarchy should also be reduced as much as possible.

/* Not recommended*/ul#example {}div.error {}

/* Recommended*/#example {}.error {}

Points to note when naming:

In the naming rules, lowercase letters and underscores are always used. Capital letters or _

are not allowed to be used in naming. Avoid using Chinese pinyin and should be more concise. Combine semantic English words

Pay attention to abbreviation when naming, but cannot blindly abbreviate. For details, please refer to the commonly used CSS naming rules

Naming by serial numbers such as 1, 2, 3, etc. is not allowed

Avoid duplicate names of class and id

id is used to identify a certain parent container area of ​​a module or page. The name must be unique. Do not create new ids at will

class is used to identify a certain one Type objects must be named concisely and concisely.

Improve the reuse of code modules as much as possible, and try to use a combination of styles

The rule name should not include color (red/blue), positioning (left/right), etc. and specific display Performance-related information. Names should be named with meaning, not style display results.

1. Common id naming:

(1) Page structure

Container: container

Header: header

Content: content/container

Page body: main

Footer: footer

Navigation: nav

Sidebar: sidebar

Column: column

Page peripheral control overall layout width: wrapper

left right center

(2) Navigation

Navigation: nav

Main navigation: mainbav

Sub navigation: subnav

Top navigation: topnav

Side navigation: sidebar

Left Navigation: leftsidebar

Right navigation: rightsidebar

Menu: menu

Submenu: submenu

Title: title

Summary: summary

(3) Functions

Logo: logo

Advertising: banner

Login: login

Login bar: loginbar

Register: regsiter

Search: search

Ribbon: shop

Title: title

Join: joinus

Status: status

Button: btn

Scroll: scroll

Tab: tab

Article list: list

Tip Information: msg

Current: current

Tips: tips

Icon: icon

Note: note

Guide: guild

Service: service

Hot spot: hot

News: news

Download: download

Vote: vote

Partner: partner

Friendly link: link

Copyright: copyright

2. Naming of commonly used classes:

(1) Color :Use the color name or hexadecimal code, such as

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2) Font size, directly use "font font size" as the name, such as

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3) Alignment style, use the English name of the alignment target, such as

.left { float:left; }

.bottom { float:bottom; }

(4) Title bar style, named using the "category function", such as

.barnews { }

.barproduct { }

4. Writing specifications

1. Typesetting specifications

(1) Use 4 spaces instead of Use tabs or mixed space tabs as indents;

(2) Rules can be written in a single line or multiple lines, but the rule formatting in the entire file must be uniform;

Single-line formatting style Constraints

If you write inline CSS in HTML, it must be written in a single line;

The curly brackets { of each rule are preceded and followed by spaces;

The curly brackets at the end of each rule} Add a space before;

Do not add a space before the colon of the attribute name, add a space after the colon;

A semicolon must be added after each attribute value; and a space after the semicolon;

If multiple selectors share a style set, multiple selectors must be written in multi-line form;

Typesetting constraints of multi-line writing style

The braces { before each rule Add spaces;

If multiple selectors share a style set, multiple selectors must be written in multi-line form;

The curly brackets at the end of each rule} must be the same as the first one of the rule selector Character alignment;

Do not add a space before the colon of the attribute name, add a space after the colon;

Add a semicolon after the attribute value;

2. Attribute writing order

Display properties: display/list-style/position/float/clear…

Self properties (box model): width/height/margin/padding/border

Background: background

Line-height: line-height

Text attributes: color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…

Others: cursor/z-index/zoom/overflow

CSS3 properties: transform/transition/animation/box-shadow/border-radius

If using CSS3 properties, if If it is necessary to add the browser prefix, add it in the order of -webkit- / -moz- / -ms- / -o- / std, and write the standard attributes at the end.

Please add link styles in strict accordance with the following order: a:link -> a:visited -> a:hover -> a:active

3. Rule writing Specifications

Use single quotes, double quotes are not allowed;

Each statement should end with a semicolon, regardless of whether it is the last statement;

Except 16 Except for customizing color and font settings, all codes in CSS files should be lowercase;

In addition to resetting the browser's default style, it is prohibited to directly add css style settings to html tags;

Every A rule should ensure that the selector is unique and prohibits directly setting attributes for global .nav/.header/.body and other classes;

4. Code performance optimization

Merge margin, padding, For the border's -left/-top/-right/-bottom settings, try to use short names.

Selectors should be as short as possible based on satisfying functions to reduce selector nesting and query consumption. But be sure to avoid overriding global style settings.

Pay attention to the performance of the selector and do not use low-performance selectors.

Do not use * selector in css.

Unless necessary, if there is a class or id, there is no need to write the tag corresponding to the element.

No unit is required after 0. For example, 0px can be omitted to 0, and 0.8px can be omitted to .8px.

If the color is expressed in hexadecimal, the color value should be in uppercase letters.

If possible, try to use three characters to represent the color, for example, #AABBCC is written as #ABC.

If there is no border, do not write border:0, but write border:none.

Try to avoid using AlphaImageLoader.

On the premise of keeping the code decoupled, try to merge duplicate styles as much as possible.

For attributes such as background and font that can be abbreviated, try to use abbreviated forms.

5. Use of CSS Hack

Please don’t use browser detection and CSS Hacks all the time, try other solutions first! Considering the efficiency and manageability of the code, although these two methods can quickly resolve browser parsing differences, they should be regarded as a last resort. In a long-term project, allowing hacks will only lead to more hacks, and the more you use it, the more you will rely on it!

It is recommended to use the following:

[/url]

6. Font rules

In order to prevent problems caused by file merging and code conversion, it is recommended to change the Chinese font name of the style to the corresponding English name, such as: SimHei, SimSun, Microsoft Yahei, there are spaces between several words. The composition must be in quotation marks)

The font thickness uses specific values, bold is written as 700, normal is written as 400

font-size must be in px or pt, and px is recommended (Note: pt is the font size setting for the print version). Values ​​such as xx-small/x-small/small/medium/large/x-large/xx-large are not allowed.

In order to select font-family Unify the values ​​to better support the compatibility of various browsers on various operating systems. Font-family is not allowed to be set arbitrarily in the business code

5. Other specifications

Do not change all the specifications easily Site-level CSS and universal CSS libraries. After changes are made, they must be thoroughly tested.

Avoid using filter

Avoid using expression in CSS

Avoid tiling of background images that are too small.

Try not to use !important

Never use the "*" selector in CSS

The level (z-index) must be clear and clear, and the page pop-up window , the bubble is the highest level (the highest level is 999), and different pop-up bubbles can be adjusted between three digits; ordinary blocks are multiples of 10 within 10-90; blocks are expanded and popped up to the previous one on the current parent level. The number of positions increases, and blind comparison between levels is prohibited.

Please use sprite technology as much as possible for background images to reduce http requests. Taking into account multi-person collaborative development, sprites can be divided according to modules, businesses, and pages.

6. Test specifications

1. Understand browser special effects support

For page performance considerations, if the browser does not support CSS3 related attributes, then a certain function of the browser Some special effects will no longer be supported. The support status of attributes is shown in the following table (Y means supported, N means not supported):

2. Set browser support standards

Level A - interaction and visuals fully meet the requirements of full design

B Level - Visual differences are allowed, but do not destroy the overall effect of the page

Level C - Design details can be ignored, but do not hinder use

3. Commonly used style testing tools
W3C CSS validator: http://jigsaw.w3.org/css-validator/

CSS Lint: http://csslint.net/
CSS Usage: https://addons.mozilla .org/en-us/firefox/addon/css-usage/