Front-end CSS naming rules and CSS naming rules

Front-end CSS naming rules and CSS naming rules

This article summarizes various CSS specifications in Web Front-end development, including file specifications, annotation specifications, naming rules, writing specifications, and test specifications.

1. File specifications 1. All files are archived to the specified directory. The specific requirements are explained through the CSS specifications of Douban. All CSS types are classified into two categories: general and business. Common CSS files are stored in the following directory:

• Basic Style Library/css/core
• General UI element style Library/css/lib
• JS component-related style Library/css/ui

CSS of the business class refers to the files related to specific products, which are stored in the following directory:

• Reading/css/book/
• Movie/css/movie/
• Music/css/music/
• Community/css/sns/
• Small site/css/site/
• Local/css/location/
• Radio station/css/radio/

The external CSS file is applicable to all-site and product-level general large files. Inline CSS files are applicable to CSS shared on one or more pages. In addition, a specific pair of CSS files are documented. 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 items/css/core/media_item.css
• Ui-03. Rating/css/core/rating.css
• Ui-04. Universal 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 dialog box/css/core/old_dialog.css
• Ui-08. Old Tab/css/core/old_tab.css
• Ui-09. Old Version member list/css/core/old_userlist.css
• Ui-10. Old Version Information Zone/css/core/yy.css
• Ui-11. Community user navigation/css/core/profile_nav.css
• Ui-12. Current big community navigation/css/core/site_nav.css
• Ui-13. Loading/css/lib/loading.css

2. File introduction can be introduced through external or Inline methods.

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

Link and style labels should be placed in the head. In principle, style Writing on html is not allowed. Avoid using @ import in CSS. the nesting should not exceed one layer.

3. file name, file encoding, and file size

• The file name must contain lowercase letters, numbers, and dashes.
• The file must be encoded in UTF-8, using UTF-8 (not BOM), specifying UTF-8 encoding in HTML, and not particularly specifying in CSS because the default is UTF-8.
• Avoid too large a single CSS file (less than 300 rows are recommended)

Ii. annotation specifications

1. Copy the code at the top of the file (recommended). 2. Copy the code module comments by module comments. The comments of the Code module must be written in a single line.

3. Single line comment and multi-line comment

/* This is a short comment */a single line comment can be written in a single line or at the end of a line. Each line in the comment cannot exceed 40 Chinese characters or 80 English characters. /*
* This is comment line 1.
* This is comment line 2.
*/Comments for multiple rows must be written in a separate row.

4. Special notes

/* TODO: xxxx by name 2013-04-13 * // * BUGFIX: xxxx by name 2012-04-13 */used to mark changes, to-do lists, and other information

5. Block comment

Copy the code to annotate a code block (optional), partition the style statement block, and comment it on the new line.

Iii. Naming rules

Use meaningful or common IDs and class names: the names of IDs and classes should reflect the functions of the element or use a common name, rather than abstract obscure names. The purpose of reflecting the use of elements is preferred. The use of a common name indicates that the element has no specific meaning and is similar to the element of the same level. It is usually used for auxiliary naming; the use of functional or general names can be more suitable for document or template changes.

• /* Not recommended: meaningless */# yee-1901 {}
• /* Not recommended: style related */. button-green {}. clear {}
• /* Recommendation: Special */# gallery {}# login {}. video {}
• /* Recommendation: versatility */. aux {}. alt {}

Frequently used names (multiple records and multiple 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 name of ID and class, the better, as long as it is sufficient to express its meaning. This helps both understanding and code efficiency.

• /* Not recommended */# navigation {}. Recognition {}
• /* Recommended */# nav {}. author {}

The Type selector avoids the use of tags, IDs, and classes as the positioning element selector. In terms of performance, the hierarchy of the selector should be minimized.

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

Notes for naming:

• In the naming rules, uppercase letters or _
• Naming should avoid Chinese pinyin and use more concise and semantic English words for Combination
• For more information about naming conventions, see common CSS naming rules.
• Names with numbers 1, 2, and 3 are not allowed.
• Avoid duplicate class and id names
• Id is used to identify a parent container area of a module or page. The name must be unique and do not create an id at will.
• Class is used to identify an object of a certain type. The name must be concise.
• Improve code module reuse as much as possible, and try to combine styles
• The rule name should not contain colors (red/blue), positioning (left/right), and other information related to the specific display effect. The name should be meaningful, rather than the style display result name.

1. Name of common IDs:

(1) Page Structure

• Container: container
• Header: header
• Content: content/container
• Page subject: main
• Footer: footer
• Navigation: nav
• Sidebar: sidebar
• Column: column
• Overall Layout width of the page peripheral control: wrapper
• Left right center

(2) Navigation

• Navigation: nav
• Main navigation: mainbav
• Subnavigation: subnav
• Top navigation: topnav
• Side navigation: sidebar
• Left Navigation: leftsidebar
• Right navigation: rightsidebar
• Menu: menu
• Sub menu: submenu
• Title: title
• Abstract: summary

(3) Functions

• Logo: logo
• Advertisement: banner
• Login: login
• Logon entry: loginbar
• Registration: regsiter
• Search: search
• Functional Area: shop
• Title: title
• Join: joinus
• Status: status
• Button: btn
• Scroll: scroll
• Tab: tab
• Article list: list
• Message: msg
• Current: current
• Tips: tips
• Icon: icon
• Note: note
• Guide: guild
• Service: service
• Hotspot: hot
• News: news
• Download: download
• Vote: vote
• Partner: partner
• Link
• Copyright: copyright

2. Name of common classes:

(1) color: use the color name or hexadecimal code, such

• . Red {color: red ;}
• . F60 {color: # f60 ;}
• . Ff8600 {color: # ff8600 ;}

(2) font size: Use "font + font size" as the name, as shown in figure

• . Font12px {font-size: 12px ;}
• . Font9pt {font-size: 9pt ;}

(3) alignment style. Use the English name of the alignment target, as shown in figure

• . Left {float: left ;}
• . Bottom {float: bottom ;}

(4) use the "category + function" method to name the title bar style, as shown in figure

• . Barnews {}
• . Barproduct {}

Iv. Writing specifications

1. Typographical specifications (1) four spaces instead of tabs or mixed spaces + tabs as indentation; (2) Rules can be written as single lines or multiple lines, however, the layout rules of the entire file must be unified; the layout constraints of the single-line Writing Style

• If inline css is written in html, it must be written as a single line;
• Braces of each rule {plus and minus spaces;
• Braces ending with each rule} are prefixed with spaces;
• No space is added before the attribute name colon, and a space is added after the colon;
• A semicolon must be added after each attribute value, followed by a space;
• If multiple selectors share one style set, multiple selectors must be written as multiple rows;

Typographical constraints of multi-row Writing Style

• Braces for each rule {Add spaces before;
• If multiple selectors share one style set, multiple selectors must be written as multiple rows;
• Braces ending with each rule} must be aligned with the first character of the rule selector;
• No space is added before the attribute name colon, and a space is added after the colon;
• Add a semicolon after the property value;

2. Attribute writing order

• Display attribute: display/list-style/position/float/clear...
• Attributes (Box Model): width/height/margin/padding/border
• Background: background
• Row 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 attributes: transform/transition/animation/box-shadow/border-radius
• If you use the CSS3 attribute and add a browser prefix if necessary, add it in the order of-webkit-/-moz-/-ms-/-o-/std, the standard attributes are written at the end.
• Add the link style strictly in the following order: a: link-> a: visited-> a: hover-> a: active

3. Rule writing specifications

• Single quotation marks are used. Double quotation marks are not allowed;
• Each declaration should end with a semicolon, whether or not it is the last statement;
• Except for hexadecimal color and font settings, all codes in the CSS file should be in lower case;
• In addition to Resetting the default style of the browser, do not add css style settings for html tags directly;
• Each rule should ensure that the selector is unique. Do not set attributes for the Global. nav/. header/. body class;

4. Code Performance Optimization

• Combine settings of-left/-top/-right/-bottom of margin, padding, and border to use short names as much as possible.
• The selector should be as short as possible on the basis of satisfying the function, reducing selector nesting and query consumption. However, do not overwrite the global style settings.
• Note the performance of the selector. Do not use a low-performance selector.
• Do not use the * selector in css.
• Unless required. Otherwise, there is generally a class or id, and you do not need to write the tag corresponding to the element.
• No unit is required after 0. For example, 0 PX can be omitted to 0, and 0.8px can be omitted to. 8px.
• If it is in hexadecimal notation, the color value should be capitalized.
• If possible, the color should be represented by three characters. For example, # AABBCC is written as # ABC.
• If there is no border, do not write it as border: 0. It should be written as border: none.
• Avoid using AlphaImageLoader whenever possible.
• When code decoupling is maintained, try to merge repeated styles as much as possible.
• Background, font, and other attributes that can be abbreviated. Try to use the abbreviated form.

5. Use of CSS Hack

Please use the browser detection and CSS Hacks without moving. Try other solutions first! Considering the code efficiency and ease of management, although these two methods can quickly solve the differences in browser resolution, they should be regarded as the final means. In a long-term project, allowing hack only brings more hack. The more you use it, the more dependent you are on it!

We recommend the following:

<Ignore_js_op> [/url]
6. Font rules

• To prevent problems caused by file merging and encoding conversion, we recommend that you change the style Chinese font name to the corresponding English name, for example, SimHei (SimHei), SimSun (SimSun), Microsoft Yahei (Microsoft Yahei, quotation marks are required for words with spaces in the middle)
• The font width uses a specific value. The bold value is 700, and the normal value is 400.
• The font-size must be in px or pt units. We recommend that you use px (Note: pt is the font size of the printed version ), xx-small/x-small/medium/large/x-large/xx-large values are not allowed
• In order to unify the font-family values and better support the compatibility of various browsers on each operating system, font-family cannot be set freely in the Business Code.

V. Other Specifications

• Do not modify the full-site CSS and general CSS libraries easily. After the changes, they must be thoroughly tested.
• Avoid using filter
• Avoid using expression in CSS
• Avoid tiled background images that are too small.
• Try not to use it in CSS! Important
• Do not use the "*" selector in CSS.
• The level (z-index) must be clear and clear. the pop-up window and bubble on the page are at the highest level (the highest level is 999), and the bubbles in different pop-up windows can be adjusted between three digits; the normal block is a multiple of 10 in the 10-90 period. The expanded block and pop-up block increase the number of digits at the current parent level. Blind comparison between levels is prohibited.
• Use sprite technology as much as possible to reduce http requests. Considering collaborative development by multiple people, sprite can be divided by module, business, and page.

Vi. test specifications
1. Understand the support of browser special effects for the sake of page performance. If the browser does not support CSS3 related attributes, some special effects of the browser will not be supported, the following table lists the supported attributes (Y is supported, N is not supported): <ignore_js_op>
2. Set browser support standards
<Ignore_js_op>

• A-Requirements for full interaction and Visual Design
• Level B-visual differences are allowed, but the overall page effect is not damaged
• Level C-design details can be ignored, but they are not blocked

3. Common 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/