Css framework-css specifications, usage and learning experiences of Netease NEC

Css framework-css specifications, usage and learning experiences of Netease NEC
Let's talk about Netease NEC. (Click here for a look.) I first heard that it was three months ago. It was a front-end guy with more than three years of work experience. I recommend it; then I thought it was quite good. It is also used in the company project, and gradually like this style. Now, it takes more than three months. Today, I once again read the Sina front-end Daniel, Cao Liuyang's "Writing high-quality code -- Web Front-end development practices" (Click here to download it). This book has been released for 10 years, many of the opinions on how to classify and organize css style files, how to name styles, and how to write concise, efficient, and reusable css files can be found in NEC. So, I am talking about my experiences again. First of all, css files are divided into three types of public styles: including the following two parts: "reset and set default values of tags (mainly to eliminate the differences between the default style of tags in various browsers, clear floating, General website layout, General modules and extensions, components and extensions (buttons, input boxes, etc.), and functional styles (such as display, floating, font size, style, etc.) "," skin style ". This section mainly provides the style skin style that determines the overall layout of the website and the basic controls of the website, and also provides the commonly used functional style in the layout. Special style: When the style of a column or page is significantly different from that of the website or the maintenance rate is high, you can reference a style independently: "Special layout, modules and components and extensions", "special features, colors, and backgrounds", can also be an independent style of a large control or module. This part mainly refers to the specific page module and css for specific business-related differences. Skin style: if the product requires skin replacement, We need to extract the color, background, and so on. It is mainly used to expand the style of website change. Timeline (page-level style of a specific module); is it very similar? Next, let's talk about it. The preceding section describes how to classify css files? NEC divides it into eight categories, and provides suggestions for naming of each type. Reset (reset) and default (base) (tags) as described above, this part is mainly to eliminate the differences between the default style and the browser, at the same time, set the initial style of some labels (depending on the actual situation ). All in all, ensure the consistency of the entire site on common browsers and initialize the label style. For unified processing, we recommend that you call the background image at this location (multiple la S, modules, or components are shared here) and clear the floating (here, the layout, modules, and components with high universality are cleared) and so on! The layout (grid) (. g-) Grid, as its name suggests, refers to the structure split of pages. It is generally divided into the header, the main body, the main column, the sidebar, and the tail! Module (. m-) is generally a semantic entity that can be reused! For example, navigation, login, comment, search, and other independent individuals after business and function classification! A unit (. u-) is usually a small entity that cannot be further divided. It is often used repeatedly for common widgets among various modules! For example, common buttons, input boxes, loading, icons, and labels! Function )(. f-) This part mainly refers to common positioning, floating, margin, padding width, Font Style and other commonly used styles. These frequently used styles are stripped out and used as needed, generally, these selectors have fixed style representations. Skin (skin )(. s-) if you need to extract the skin style, it is usually the text color, background color (image), border color, etc. Non-skin websites usually only extract the text color! Non-skin-changing websites cannot abuse this type! Status (. z-) adds a prefix to the status style to unify the identity for easy identification. It can only be used in combination or as a descendant, for example :. u-ipt.z-dis {},. m-list li. z-sel {},. m-listli.z-active {} and so on indicate the selected, disabled, activation, and other States. Several suggestions are also raised regarding the CSS naming for NEC. 1. selector usage (we recommend that you use a class selector to avoid using id). The ID must be unique on the page; this determines that once the id selector is used, the following style cannot be reused; it violates the original intention of nec; and the class selector is not unique, naturally, it can be reused. 2. Classification naming method: Use a single letter + "-" as the prefix. The preceding css content classification rules have been provided. 3. the naming convention for descendant selector is not to use a single letter + "-" as the prefix and a class selector with a length greater than or equal to 2 as the descendant selector, for example :. item is every item in the m-list module ,. text in the m-list module :. m-list. item {}. m-list.text {}. A semantic tag can also be a descendant selector, such as. m-listli {}. The class selector of a single letter is not allowed to appear by using the descendant selector. You do not need to consider whether his name has been used, because he takes effect only in the current module or component, the same style name can be used repeatedly in different modules or components to avoid mutual interference. The effect is particularly significant when multiple people or modules are collaborated! The descendant selector does not need to represent the full structure tree hierarchy. It can be as short as possible. Note: Do not use the descendant selector in the page layout, because there is a high possibility of contamination. Naming should be simple but different naming methods with the same semantics: simply add numbers or letters to distinguish them (for example :. m-list ,. m-list2 ,. m-list3, etc., are list module, but is completely different from the module ). Other examples:. f-fw0,. f-fw1,. s-fc0,. s-fc1,. m-logo2,. m-logo3, u-btn, u-btn2 and so on. When A, B, C ,... if they are of the same type and have similar shapes, the base class will be created based on the highest occurrence rate among them, and other base classes will be extended. Method: + "-" + number or letter (for example, the extension class of. m-list is. m-list-1,. m-list-2, etc ). Supplement: The base class can be used independently (for example, class = "m-list"), and the extension class must be used based on the base class (for example: class = "m-list m-list-2 "). If your extension class represents different states, you can name it u-btn-dis, u-btn-hov, m-box-sel, m-box-hov and so on, and then use: class = "u-btnu-btn-dis" like this ". If your website is not compatible with browsers such as Internet Explorer 6, you can use an independent status classification method (. z-) method :. u-btn.z-dis ,. m-box.z-sel, then use: class = "u-btnz-dis" like this ". The extension class of the descendant selector of modules and components sometimes has something similar in the module. If you do not make them into components and extensions, you can also use the descendant selector and extension. Descendant selector:. m-login.btn {}. Descendant selector Extension:. m-login.btn-1 {},. m-login. btn-dis {}. You can also take the independent State Classification (. z-) method:. m-login.btn.z-dis {}, and then use: class = "btnz-dis" like this ". Note: This method is used for class selectors. If you directly use tags as selectors, you do not need to use this method. Note: To prevent the extension class and the class naming rule conflict of the descendant selector, the descendant selector cannot use a single letter. For example:. m-list.a {} is not allowed, because when this. a needs to be extended, it will become. a-bb, so it is in conflict with the naming conventions of the category. The Group selector can sometimes replace the extension method. Sometimes, although two modules of the same type are very similar, you want them to have no dependency, that is, you do not want to use the extension method, then you can set the common style by merging the selector. The premise of using this method is: the same type, function and appearance are similar, and it is easy to maintain in the same code area. Pollution prevention and pollution prevention are the most annoying and speechless. Sometimes the name is not noticed, the name or selector is improperly used, and the style is disordered in other places; or it is contaminated, you have to enhance the weight overwrite style of the selector. When the module or component is nested with each other and the same tag selector or other descendant selector is used, the selector inside will be affected by the same selector outside. Therefore, if your module or component may be nested or nested in other modules or components, use the label selector with caution. If necessary, use the class selector and pay attention to the naming method. m-layer.layerxxx ,. m-list2. list2xxx to reduce the contamination of the Child selector. Finally, I thought that NEC's suggestions and division on css standards were very reasonable and practical. They could solve the problem of how to organize the whole site css and How to Write concise and highly reusable codes, maintenance issues such as css. Currently, this method is used in our projects. In addition, we have introduced less. In this way, it is more efficient and convenient to use LESS to write css under the guidance of these specifications.