The CSS specification of NetEase NEC Project

CSS Specification-classification method

Classification and reference order of CSS files

Usually, a project we only reference a CSS, but for larger projects, we need to classify CSS files.

According to the nature and purpose of CSS, we divide the CSS file into "common style", "Special style", "Skin style", and refer to it in this order (whether or not to add the version number as required).

Common style: Includes the following sections: "Reset and set default values for labels", "Call the background map uniformly and clear floating or other long styles that need to be treated uniformly, general layout for the site, common modules and their extensions, symbols and their extensions, feature class styles, skin class styles.

Special style: When a column or page style and site overall difference is large or high maintenance rate, you can independently reference a style: "Special layout, modules and components and extensions", "special features, colors and backgrounds", can also be a large control or module independent style.

Skin Style: If the product needs to change skin function, then we need to pull out the color, background, and put it here.

<link href= "Assets/css/global.css" rel= "stylesheet" type= "Text/css"/>
<link href= "Assets/css/index.css" rel= "stylesheet" type= "Text/css"/>
<link href= "Assets/css/skin.css" rel= "stylesheet" type= "Text/css"/>

The classification and order of the CSS interior

Reset (reset) and default (base) (tags): eliminates default style and browser differences, and sets the initial style of some tags to reduce the repetition of the following work! You can set it according to your website requirements!

Unified Processing: It is recommended that in this position a unified call to the background map (this refers to a number of layouts or modules or components shared diagram) and clear floating (here refers to the higher generality of the layout, modules, components within the purge) and other unified style of processing!

Layout (grid) (. g): Splits the page into chunks, usually with head, body, main bar, sidebar, tail, etc!

Module (. m): is usually a semantically reusable larger whole! such as navigation, login, registration, a variety of lists, reviews, search and so on!

A component (unit) (. u): Usually a small, compact individual that is often reused for various modules! such as buttons, input boxes, loading, icons and so on!

function (. f): To facilitate the use of some common styles, we peel out these higher usage styles and use them on demand, usually with fixed-style performance, such as clearing floats, etc. No abuse!

Skin (skin) (. s): If you need to pull out of the skin style, usually text color, background color (figure), border color, etc., the non-change site usually only extracts text color! Non-change web site can not abuse this category!

Status (. z): Adds a prefix for the State class style, uniform identification, easy to identify, she can only use or as a descendant to appear (. U-ipt.z-dis{},.m-list li.z-sel{}), as detailed in the naming convention extension related items.

Functional class and skin style for the presentation style, please do not abuse! The above order can be adjusted as required.

The naming methods for the above categories are detailed in the naming rules

/* Reset * *
div,p,ul,ol,li{margin:0;padding:0;}
/* Default */
Strong,em{font-style:normal;font-weight:bold;}
/* Unified Call Background Map * *
. M-logo A,.m-nav A,.m-nav em{background:url (images/sprite.png) no-repeat 9999px 9999px;
* * Unified Clear Floating * *
. g-bdc:after,.m-dimg Ul:after,.u-tab:after{display:block;visibility:hidden;clear:both;height:0;overflow:hidden; Content: '. ';}
. g-bdc,.m-dimg Ul,.u-tab{zoom:1;}
/* Layout * *
. g-sd{float:left;width:300px;}
/* Module * *
. m-logo{width:200px;height:50px;}
/* Components * *
. u-btn{height:20px;border:1px solid #333;}
/* Function * *
. F-tac{text-align:center;}
* * Skin * *
. S-fc,a.s-fc:hover{color: #fff;}



CSS Specification-naming rules


Use class selector to discard ID Selector

The uniqueness of IDs in a single page results in the inability to reuse if you write CSS with an ID selector.

NEC Special Character: "-" hyphen

"-" does not indicate the meaning of hyphens in this specification.

She only represents two meanings: the category prefix separator, the extended separator, as described in the following specific rules.

Naming methods for classifications: prefix with single letter + "-"

Layout (grid) (. g), module (module) (. m), Component (unit) (. u), function (function) (. f), Skin (skin) (. s), state (. z).

For more information on the above explanations, see the classification and Order of CSS within the classification method.

Note: The selector in your style always starts with the five categories above and then uses the descendant selector inside.

If these five categories do not meet your needs, you can define one or more large classes, but must conform to a single letter + "-" as the prefix of the naming convention, that is,. x format.

Special:. j-will be dedicated to JS get node, do not use. j-definition style.

Descendant selector naming

A class selector that is not prefixed with a single letter + "-" and has a length greater than or equal to 2 is a descendant selector, such as:. Item for each item in the M-list module,. Text is the textual part of the M-list module:. m-list. item{}.m-list. text{}.

A semantic label can also be a descendant selector, such as:. M-list li{}.

The class selector for a single letter is not allowed to appear for the following reasons, as described below, "extended classes for module and component descendant selectors".

By using the descendant selector method, you do not need to consider whether his name has been used, because he is only in the current module or component, the same style name can be reused in different modules or components, non-interference, in collaboration with many people or modules to collaborate when the effect is particularly obvious!

The descendant selector does not need to fully represent the structure tree hierarchy, as short as possible.

Note: The descendant selector should not be used in the layout of the page, because the possibility of pollution is greater;

* * here, ITM and. CNT are only available in. m-list.
. m-list{margin:0;padding:0;}
. m-list. itm{margin:1px;padding:1px;
. m-list. cnt{margin-left:100px;
* the. CNT and. Num are only valid in. m-page.
. m-page{height:20px;}
. m-page. Cnt{text-align:center;
. m-page. num{border:1px solid #ddd;

Naming should be concise without losing semantics

/* Objection: presentation or no semantics of the name * *
. M-abc. green2{}
. g-left2{}
/* Recommendation: Use a semantically short name/*
. M-list. wrap2{}
. g-side2{}

Different class names for the same semantics

Methods: The direct addition of numbers or letters can be distinguished (such as:. M-list,. M-list2,. M-list3, etc., are list modules, but are completely different modules).

Other examples:. f-fw0, F-FW1, s-fc0, S-FC1, M-logo2, M-LOGO3, etc.

Naming methods for extended classes of modules and components

When a, B, C 、... They are of the same type and have a little difference in shape, so that they have the highest incidence of the base class, and others are made into base class extensions.

Method: + "-" + number or letter (such as:. m-list extension class is. m-list-1,. M-list-2, etc.).

Supplemental: The base class itself can be used independently (such as class= "M-list"), and the extended class must be based on the base class (such as: class= "M-list m-list-2").

If your extension class is representing a different state, then you can name it like this: U-btn-dis,u-btn-hov,m-box-sel,m-box-hov, and so on: class= "U-btn U-btn-dis".

If your site can not be compatible with IE6 and other browsers, then you can identify the state of the method may also take the independent State category (. z) method:. U-btn.z-dis,.m-box.z-sel, and then use like this: class= "u-btn Z-dis."

Extension classes for descendant selectors for modules and components

Sometimes there are similar things in the module, and if you don't make them into components and extensions, you can also use descendant selectors and extensions.

Descendant selector:. M-login. btn{}.

Descendant selector extension:. m-login. Btn-1{},.m-login. btn-dis{}.

You can also take an independent State category (. z) method:. M-login. btn.z-dis{}, and then use it like this: class= "btn Z-dis".

Note: This method is used for class selectors, and you do not need to use this naming method if you use labels directly as selectors.

Note: The descendant selector does not allow a single letter to be used to prevent the extension class of the descendant selector from conflicting with the large class naming convention.

For example:. M-list. a{} is not allowed because when this. A needs to be expanded it becomes. A-BB, which conflicts with the naming conventions of large classes.

Grouping selectors can sometimes take the place of extension methods

Sometimes although two modules of the same type are similar, but you want them to have no dependencies, that is, you do not want to use the extended method, then you can set the common style by merging selectors.

The premise of using this method is: the same type, function and appearance are similar, write in the same piece of code area for easy maintenance.

/* Two components in common style * *
. u-tip1,.u-tip2{}
. u-tip1. itm,.u-tip2. itm{}
/* In each of the two components of the respective style * *
* TIP1 * *
. u-tip1{}
. U-tip1. itm{}
* TIP2 * *
. u-tip2{}
. u-tip2. itm{}

Prevent pollution and pollution

When a module or component is nested between each other and the same label selector or other descendant selector is used, the selector inside is affected by the same selector outside.

So, if your module or component may be nested or nested in other modules or components, be careful with the tag selector, use the class selector when necessary, and pay attention to the naming method, you can use the. M-layer layerxxx, M-list2. List2xxx form to reduce the pollution of the progeny selector.



CSS Specification-code format

Selectors, properties, and values all use lowercase

All tags, attributes, and values are lowercase in the XHTML standard, as are CSS.

One-line finish writing a selector definition

Easy to find and read the selector, but also easy to insert new selectors and editors, easy to identify modules. Remove extra space and make code compact to reduce line wrapping.

If you have nested definitions, you can take the form of an internal single-line.

/* One-line definition of a selector * *
. m-list li,.m-list h3{width:100px;padding:10px;border:1px solid #ddd;}
/* This is a selector with a nested definition.
@media all and (max-width:600px) {
. M-class1. itm{height:17px;line-height:17px;font-size:12px;
. m-class2. Itm{width:100px;overflow:hidden;
}
@-webkit-keyframes showitm{
0%{height:0;opacity:0;}
100%{height:100px;opacity:1;}
}

The last value also ends with a semicolon

A semicolon is usually omitted before the end of curly braces, but doing so can cause unnecessary errors and hassles in the modification, addition, and maintenance work.

Units with a value of 0 o'clock omitted

To save unnecessary bytes and make reading easier, we will abbreviate the 0px, 0em, and 0% equivalents to 0.

. m-box{margin:0 10px;background-position:50% 0;}

Using single quotes

Omit the quotation marks in the URL reference, and use single quotes where other quotes are required.

. M-box{background:url (Bg.png);
. M-box:after{content: '. ';}

Use 16 to represent color values

Unless you need transparency and use RGBA, use #f0f0f0 as a notation and abbreviate as much as possible.

. M-box{color: #f00; Background:rgba (0,0,0,0.5);}

Write sequentially according to the importance of the attribute

Only follow the horizontal order, first show the positioning layout class attributes, the rear-box model, and so on their own properties, and finally the text class and decorated class attributes.

→ Display property Text properties and other adornments
Display width font
Visibility height Text-align
Position margin Text-decoration
float padding vertical-align
Clear Border White-space
List-style Overflow Color
Top Min-width Background

. m-box{position:relative;width:600px;margin:0 Auto 10px;text-align:center;color: #000;}

If there is a correlation between attributes, do not separate write.

/* The height and line-height here are related to * *
. M-box{position:relative;height:20px;line-height:20px;padding:5px;color: #000;}

Private in front, standard in post

First write with the browser private logo, and then write the standard of the consortium.

. m-box{-webkit-box-shadow:0 0 0 #000;-moz-box-shadow:0 0 0 #000; box-shadow:0 0 0 #000;}

Annotation format:/* Comment Text * *

The annotations to the selector are uniformly written on the previous line of the annotated object, and the comments on the attributes and values are written after the semicolon.

Note spaces are required on both sides of the content to ensure that the style is parsed correctly even in the case of a coded error.

When necessary, block annotations can be used to maintain uniform indentation alignment.

In principle, the style of each series needs to have a note, concise to indicate the name, purpose, attention, and so on.

/* Block Comment text
* Block Annotation text
* Block Annotation text
*/
. m-list{width:500px;}
. m-list li{height:20px;line-height:20px;/* Here is a comment on the line-height */overflow:hidden;}
. m-list Li A{color: #333;}
/* Single NOTE text * *
. m-list Li Em{color: #666;}

Not allowed to use hack in principle

Many incompatibilities can be solved by changing methods and ideas, not necessarily hack, and based on experience you can completely circumvent certain compatibility issues.

A reasonable structure and reasonable style, is very rarely encountered compatibility problems.

Due to the limitations of the browser itself, we can not avoid the time, we may allow the use of appropriate hack.

Unified Hack Method

Unified use of "*" and "_" respectively for IE7 and 6 hack. As shown in the following code:

/* IE7 will show the gray #888,ie6 will display a white #fff, other browsers display black #000 * *
. M-list{color: #000; *color: #888; _color: #fff;}

Recommended and appropriately abbreviated values

"Recommended and appropriate" is because the abbreviation always contains a series of values, and sometimes we do not want to set a value, but caused trouble, then you can not abbreviate, but write separately.

Of course, in the case of all abbreviations, be sure to abbreviate, its biggest advantage is to save bytes, easy to maintain, and make reading more at a glance.

For abbreviations, consult the CSS Manual.

Selector order

Please consider the following order basis:

From large to small (whichever is the range of selectors)
From low to high (whichever is the grade)
From to the post (in structural succession)
From parent to child (in structural nesting)

Here is a simple demonstration:

* * FROM big to small * *
. M-list p{margin:0;padding:0;}
. M-list p.part{margin:1px;padding:1px;}
/* from low to high * *
. M-logo a{color: #f00;}
. M-logo a:hover{color: #fff;}
* * FROM to the rear * *
. g-hd{height:60px;}
. g-bd{height:60px;}
. g-ft{height:60px;}
/* FROM parent to child * *
. m-list{width:300px;}
. m-list. Itm{float:left;

Selector level

A = inline styles style.

b = number of ID selectors.

c = Number of classes, pseudo classes, and property selectors.

d = number of type selector and pseudo element selectors.

selector	Grade (A,B,C,D)
Style= ""	1,0,0,0
#wrapper #content {}	0,2,0,0
#content. dateposted {}	0,1,1,0
Div#content {}	0,1,0,1
#content p {}	0,1,0,1
#content {}	0,1,0,0
P.comment. dateposted {}	0,0,2,1
Div.comment p {}	0,0,1,2
. Comment P {}	0,0,1,1
P.comment {}	0,0,1,1
. Comment {}	0,0,1,0
div p {}	0,0,0,2
P {}	0,0,0,1

CSS Specification-optimization scheme

Value abbreviation

Abbreviated values can reduce the size of the CSS file and increase readability and maintainability.

But not all values must be abbreviated, because when the value of an attribute is abbreviated, all items are always set once, and sometimes we do not want to set certain items in the value.

/* For example, we use the following style to center a fixed-width container horizontally, and we want only left and right,
* and top and bottom are not the style to care about (if set it will affect other styles in the use of this container),
* So then we don't need abbreviations *
*/
. F-mgha{margin-left:auto;margin-right:auto;}
/* For example, the following module's style settings, we do need to set padding all the items, so we can use the abbreviation * *
. m-link{padding:6px 12px;}

See code format for commonly used abbreviations.
Properties to avoid lossy performance

The properties of the columns listed below may cause a rendering performance problem. But sometimes the demand is bigger than everything ...

* Expression * *
. class{width:expression (this.width>100? ') 100px ': ' Auto ');}
/* Filter * *
. Class{filter:alpha (OPACITY=50);
Selector merge

CSS selector combination, you can define multiple selectors at once, saving you a lot of bytes and valuable time.

Usually we will unify the definition by combining a series of selectors that have the same definition or that most of the property values are the same (indeed because they are related) together (in a comma-like way).

/* The following to the layout class selector unified to clear the floating operation * *
. G-hd:after,.g-bd:after,.g-ft:after{display:block;visibility:hidden;clear:both;height:0;content: ".";}
. G-hd,.g-bd,.g-ft{zoom:1;}
/* Usually background will always occupy a lot of bytes, so in general, we will call the
. m-logo,.m-help,.m-list Li,.u-tab Li,.u-tab Li A{background:url (.. /images/sprite.png) no-repeat 9999px 9999px;
. m-logo{background-position:0 0;}
/* The following is a component of the writing, because it is true that many elements are linked or related, so using a combination of writing, you can easily understand and modify the * *
. u-tab Li,.u-tab Li a{display:inline;float:left;height:30px;line-height:30px;
. U-tab li{margin:0 3px;}
. u-tab Li A{padding:0 6px;}
Background image Optimization Merging
Optimization of the picture itself:

Image quality requirements and image file size determine what format you use the picture, with a smaller picture file to render better image quality.
When the picture color is too rich and no transparency requirements, it is recommended to use JPG format and save for higher quality.
When a picture is too rich and transparent or translucent or shaded, it is recommended to use the PNG24 format and png8 degradation of the IE6 (or, if necessary, a filter).
When the picture color is not too rich, whether there is no transparency requirements, please use the PNG8 format, in most cases it is recommended to use this format.
When a picture is animated, you can only use the GIF format.
You can use the tool to compress the picture again, but only if it doesn't affect color and transparency.

Merging of multiple pictures:

Spaces must be retained between individual icons, and the size of the voids is determined by the size and display of the container. The advantage of this is that both the "fault tolerance" and the maintenance of the picture are improved.
The arrangement of the icons is also determined by the size and display of the containers. The arrangement is divided into the following categories: horizontal arrangement (container width is limited), vertical arrangement (container height limited), diagonal arrangement (container width and height is not limited), the left arrangement (the container background left), the right arrangement (container background to the right), the horizontal center arrangement (container background horizontally centered), vertical center arrangement (container background vertically centered).
The picture size should not exceed 50K after merging, the recommended size is between 20k-50k.
In order to ensure the quality of the picture after several changes, please keep a PSD original map, modify and add all in PSD, and finally export PNG.

Classification Merge:

Not all of the icons are merged in a picture is the best, in addition to control the size of the picture and also pay attention to the following methods.

According to the image arrangement, the arrangement of the same picture is merged to facilitate style control.
According to the module or component, the picture which belongs to a module or component is merged to facilitate the maintenance of the module or component.
According to the size of the picture, the size of the same or similar to the combination of pictures, can make full use of picture space.
According to the picture color, the color consistent or similar to the picture to merge, to ensure that the color of the merged picture is not rich, can prevent color distortion.
Combining the above methods.

Avoidance of hack

When you avoid the costly, you can use hack without avoiding, such as you need to add a lot of html or write a lot of CSS will not outweigh the gains.
Experience and thinking methods are important to help you understand common problems and to avoid them with a variety of different ideas.
Depending on your ability to solve hack problems, we do not recommend that you avoid hack in a way that you are not sure of, because you may have problems that you do not find yourself.

If CSS can do, do not use JS

Let CSS do more things to reduce the amount of JS development.

Using CSS to control interaction or visual changes, JS only needs to change the classname.
Use CSS to change multiple node styles at once, avoid multiple rendering and improve rendering efficiency.
If your product allows an incompatible version of the browser, then the animation implementation can be given to CSS.

Easy to read and modify

If you do all the requirements of the CSS specification, you will naturally write a nice CSS that is easy to read and modify.

Of course, code formatting and naming rules are relatively important.
A clear CSS Module

If you do the naming rules, your CSS modules are clearly visible.

Use annotations to illustrate that each module is particularly important for larger CSS files.
File compression

Reasonable writing CSS can greatly reduce the size of the file, after completion, without damaging the contents of the file, want to do everything to compress your CSS, you can use the compression tool to the comments and extra space, line-breaking removed.

The compression tool is described in the "Html/css Tools" section.
Other formatting optimizations

optimization methods see code format.

CSS specification-best practices

Best selector notation (module)

/* This is a module */
. m-nav{}/* Module Container * *
M-nav Li,.m-nav a{}/* The first common combination.
. M-nav li{}/* After the personalized semantic label Selector * *
. M-nav a{}/* Personality After the general character in the structure of the order * *
. M-nav a.a1{}/* Personality in Personality * *
. M-nav a.a2{}/* Personality in Personality * *
. M-nav. Z-CRT a{}/* Interaction State Change * *
. M-nav. Z-crt a.a1{}
. M-nav. Z-crt a.a2{}
. M-nav. btn{}/* typical descendant Selector * *
. M-nav. btn-1{}/* typical descendant selector extension * *
. M-nav. btn-dis{}/* typical descendant selector extension (status) */
M-nav. btn.z-dis{}/* role Ibid., please choose one (if you can not be compatible with IE6) * *
. M-nav. m-sch{}/* control other module position inside
. M-nav. u-sel{}/* control the position of other components inside
. m-nav-1{}/* Module Extension * *
. M-nav-1 li{}
. m-nav-dis{}/* module Extension (status) */
m-nav.z-dis{}/* effect Ibid., please two choose one (if you can not be compatible with IE6) * *

Unified semantic understanding and naming

Layout (. g)

Semantics	naming	Shorthand
Document	Doc	Doc
Head	Head	hd
Subject	Body	Bd
Tail	Foot	Ft
Main column	Main	Mn
Primary column child container	Mainc	Mnc
Side bar	Side	Sd
Sidebar child container	Sidec	Sdc
Box container	Wrap/box	Wrap/box

module (. m), component (. u)

Semantics	naming	Shorthand
Navigation	Nav	Nav
Child navigation	Subnav	Snav
Bread crumbs	Crumb	Crm
Menu	Menu	Menu
tab	tab	tab
Title Area	Head/title	Hd/tt
Content Area	Body/content	Bd/ct
List	List	Lst
Form	Table	Tb
Form	Form	Fm
Hot	Hot	Hot
Ranking	Top	Top
Login	Login	Log
Sign	Logo	Logo
Advertising	Advertise	Ad
Search	Search	Sch
Slide	Slide	Sld
Tips	Tips	Tips
Help	Help	Help
News	News	News
Download	Download	Dld
Registered	Regist	Reg
Vote	Vote	Vote
Copyright	Copyright	Cprt
Results	Result	Rst
Title	Title	Tt
Button	button	Btn
Input	Input	Ipt

function (. f)

Semantics	naming	Shorthand
Floating clear	Clearboth	Cb
Float left	Floatleft	Fl
float Right	Floatright	Fr
Inline block level	Inlineblock	Ib
Center text	Textaligncenter	Tac
Text reside right	Textalignright	Tar
Text occupies left	Textalignleft	Tal
Center vertically	Verticalalignmiddle	Vam
Overflow hidden	Overflowhidden	Oh
Completely disappeared	Displaynone	Dn
Font size	FontSize	Fs
Font weight	FontWeight	Fw

Skin (. s)

semantics	name	shorthand
font color	fontcolor	FC
background	Background	BG
background color	backgroundcolor	BGC
background picture	backgroundimage	BGI
background positioning	backgroundposition	BGP
Border color	bordercolor	BDC

Status (. z)

Semantics	naming	Shorthand
Selected	Selected	Sel
Current	Current	Crt
Show	Show	Show
Hide	Hide	Hide
Open it	Open	Open
Shut down	Close	Close
Error	Error	Err
Not available	Disabled	Dis

&NBSP;CSS Specification-typical error

Selector usage with NEC specification

. class{}

do not use a style that does not have a category as the primary selector. Such selectors can only be used as descendant selectors, such as. m-xxx. class{}.
. M-xxx div{}

do not use a label without semantics as a selector, which can cause extensive contamination unless you can conclude that your selector now or in the future will not contaminate other species.
. g-xxx. class{}

do not use descendant selectors in page layouts because this descendant selector may contaminate the elements inside.
. g-xxx. m-yyy{}.g-xxx. u-yyy{}

Do not use layout to control modules or components, modules and components should be separate from the layout.
. m-xxx. f-xxx{}.m-xxx. s-xxx{}

do not redefine or modify or add a defined feature class selector and skin class selector through a module or other class.
. m-xxx. Class. class. class{}

do not write selectors too verbose, which can add additional file sizes and limit too small a range of selectors so that the tree structure is too restrictive to apply. The proposal is written within 3-4 lengths. The

Selector does not need to fully reflect the nesting order of the structures, but instead it can contributors Jane.
. m-xxx. m-yyy. zzz{}

do not leapfrog control, if. ZZZ is a descendant selector of. M-yyy, it is not allowed to be controlled or modified by selector other than. m-yyy.

the. m-yyy extension can now be used to modify. zzz, such as. m-yyy-1. zzz{}. The

Extension class uses an error

Extension class must be used with the same node as its base class.

Error: class= "g-xxx g-yyy-1" class= "m-xxx-1" class= "u-xxx u-yyy-1" class= "xxx-yyy".
Correct: class= "g-xxx g-xxx-1" class= "m-xxx m-xxx-1" class= "u-yyy u-yyy-1" class= "xxx xxx-yyy".