CSS specifications and css naming rules

CSS specifications and css naming rules

CSS file classification and reference sequence

Generally, we only reference one CSS for a project, but for a large project, we need to classify the CSS files.

Based on the nature and purpose of CSS, we divide CSS files into "public style", "special style", and "skin style", and reference them in this Order (determine whether to add version numbers as needed ).

Public style: includes the following parts: "resetting and setting default values of tags", "uniformly calling background images and clearing floating or other long styles that require uniform processing", "General website layout", "General modules and extensions ", "components and extensions", "functional style", and "skin style ".
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.
Skin style: if the product requires skin replacement, we need to remove the color and background.

 

<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"/> 

Classification and sequence inside CSS

Reset (reset) and default (base) (tags): eliminate the differences between the default style and the browser, and set the initial style of some labels to reduce subsequent repetitive work! You can set up according to your website requirements!
Unified processing: We recommend that you call the background image at this location (here, the image shared by multiple la S, modules, or components) and clear floating (here refers to the layout with high versatility, the removal of modules, and components) to set a unified processing style!
Layout (grid) (. g-): divide the page into several blocks, including the header, subject, main bar, sidebar, and tail!
Module (. m-): it is usually a semantic whole that can be reused! Such as navigation, logon, registration, various lists, comments, and searches!
Unit (. u-): it is usually a relatively small entity that cannot be further divided. It is often used repeatedly in various modules! Such as buttons, input boxes, loading, and icons!
Function )(. f-): to facilitate the use of common styles, we can strip these styles with high usage and use them as needed. These selectors usually have fixed style performances, such as clearing floating! It cannot be abused!
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 used as a descendant (. u-ipt.z-dis {},. m-list li. z-sel {}). For details, see the extension items of naming rules.

Functional and skin styles are expressive styles. Please do not abuse them! The above sequence can be adjusted as needed.

For the naming method of the preceding categories, see naming.

/* Reset */div, p, ul, ol, li {margin: 0; padding: 0;}/* default */strong, em {font-style: normal; font-weight: bold;}/* uniformly call the background image */. m-logo ,. m-nav ,. m-nav em {background: url (images/sprite.png) no-repeat 9999px 9999px;}/* clear floating uniformly */. 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;}/* component */. u-btn {height: 20px; border: 1px solid #333;}/* function */. f-tac {text-align: center;}/* skin */. s-fc,. s-fc: hover {color: # fff ;}