CSS Writing specification reference

A CSS naming convention (rules) Daquan common CSS naming rules

头：header内容：content/container尾：footer导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体佈局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载：download 子导航：subnav 菜单：menu 子菜单：submenu 搜索：search 友情链接：friendlink 页脚：footer 版权：copyright 滚动：scroll 内容：content 标签：tags 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guide 服务：service 注册：regsiter 状态：status 投票：vote 合作伙伴：partner

notation:

/* Header */   内容区   /* End Header */

Name of the ID:

(1) Page structure

容器: container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体佈局宽度：wrapper左右中：left right center

(2) Navigation

导航：nav 主导航：mainnav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题: title 摘要: summary

(3) function

标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：register 搜索：search 功能区：shop 标题：title 加入：joinus 状态：status 按钮：btn 滚动：scroll 标籤页：tab 文章列表：list 提示信息：msg 当前的: current 小技巧：tips 图标: icon 注释：note 指南：guild 服务：service 热点：hot 新闻：news 下载：download 投票：vote 合作伙伴：partner 友情链接：link 版权：copyright

Precautions:

1. All lowercase;
2. try to use English;
3. Do not add the lever and underline;
4. Try not to abbreviate unless you see the words clearly.

CSS style sheet file naming

  main master.CSS module Span class= "Hljs-selector-tag" >module.css Basic shared  Base.css layout, layout layout .css theme themes .css column columns .css text font . css form forms.css patch mend.css print  Print.css          

Second, the CSS writing order

1. Position attributes (position, top, right, z-index, display, float, etc.)
2. Size (width, height, padding, margin)
3. Text series (font, Line-height, letter-spacing, color-text-align, etc.)
4. Background (background, border, etc.)
5. Others (animation, transition, etc.)

CSS writing specification using CSS abbreviation properties

CSS Some properties can be abbreviated, such as Padding,margin,font, and so on, so that the refinement of the code at the same time can improve the user's reading experience.

Remove the "0″" before the decimal point

Abbreviated name

Many users like abbreviated class name, but the premise is to let people understand your name to shorthand Oh!

16 Binary color code abbreviations

Some color code can be abbreviated, we try to abbreviate it, improve the user experience mainly.

Hyphen CSS Selector naming specification

1. Long name or phrase you can use the middle horizontal line to name the selector.

2. It is not recommended to use the "_" Underline to name the CSS selector, why?

• Press the SHIFT key less when typing;
• Browser compatibility issues (such as naming using _tips selectors, which are not valid in IE6)
• Good to distinguish JavaScript variable name (JS variable name is "_")

Don't feel free to use ID

ID in JS is unique, can not be used multiple times, and the use of class selector is reusable, and the priority of the ID priority and class, so the ID should be used on demand, and can not be abused.

Add a status prefix to the selector

Sometimes you can add a prefix to the selector to indicate the status, so that the semantics are clearer, such as adding the ". is-" prefix.

Iv. Other specifications of CSS

1. Do not easily change the full-station CSS and common CSS Library. After the change, it should be thoroughly tested.
2. Avoid using filter
3. Avoid using expression in CSS to avoid too small background image tiling.
4. Try not to use!important in CSS never use the "*" selector in CSS
5. The hierarchy (Z-index) must be clear, the page pop-up window, bubble is the highest (the highest level is 999), the different pop-up window bubbles can be adjusted between three digits, the ordinary block is 10-90 within a multiple of 10, chunk expansion, pop-up for the current parent level of the last bit increase, prohibit the blind comparisons between the levels.
6. Background picture Please use Sprite technology as much as possible, reduce the HTTP request, consider the multi-person collaboration development, the sprite according to module, business, page to divide can.

Original: https://www.w3cschool.cn/css3/question-10231614.html

CSS Writing specification reference