WEB front end of the CSS specification

CSS refers to Cascading Style Sheets (Cascading Style Sheets), define how to display HTML elements, but the CSS born global, with increasing complexity of the project, as well as other styles covering prone to problems.

1. General Specification

file encoding

• To avoid garbled contents, use unified UTF-8coding saved.

• Style File The first line sets the character set to UTF-8

@charset 'UTF-8'; /* 注意字符集说明应在第一行 */

Indent specification

Unified use两个空格缩进

2. Initialization Specification

Each browser vendors initial style is different, in order to eliminate differences in different browsers render HTML text, we often introduce some initialization styles, such as normalize.css, reset.css, etc., for the introduction of these styles when we need to pay attention to the following several situations:

• Do not use UI framework from scratch to build a
  case built from scratch, to style initialization, when it introduced the very beginning of the project, not to introduce in the middle of development, to avoid conflict unpredictable style.

• Do not use UI framework, but with some of the plug-in
  plug-ins often comes with its own unique style, such as rich text plug-in, use of an initialization pattern may lead the way in the development of style confusion, it is not recommended to initialize a large range, just 简单进行初始化can.

* {
  padding: 0;
  margin: 0;
}

• UI framework has been used
  in the UI framework clearly aware of the need to use the time 不使用第三方初始化样式, whether in or carried out before the start of the project, because the UI framework generally comes initialization, the introduction of additional but will affect the original effect.

3. Code Specification

Naming conventions

should function or content class name, named forms no
class id and lowercase word, multiple words when using underlined - separated
using a unique id as Javascript hook, while avoiding creating no style information class
Web front end development resources Qqun: 767273102, there are free development tools, zero-based, advanced video tutorials, I hope the novice detours

Code style

• Unified use 展开格式is not recommended compact format

  /* 展开格式 */
  .test {
    color: red;
    font-size: 12px;
  }
  
  

  /* 紧凑格式 */
  .test {
    color: red;
    font-size: 12px;
  }
  
  

• Unified 两个空格indent

• End property declarations add a semicolon

• Between the selector and the left bracket a space, a space after the colon property

  /* 推荐 */
  .test {
    color: red;
    font-size: 12px;
  }
  
  

  /* 不推荐 */
  .test {
    color: red;
    font-size: 12px;
  }
  
  

• Do not specify 0 units

• Color values ​​hexadecimal values ​​and attribute values ​​can be abbreviated as much as possible of the abbreviated

  /* 推荐 */
  .test {
    color: #fff;
  }
  
  

  /* 不推荐 */
  .test {
    color: #ffffff;
  }
  
  

• Use quotation marks

  URL (), selector attributes, attribute values used 单引号.

• Clear float

  When the elements need to hold up the height of the inner float comprising, by setting clear clearfix pseudo class or trigger the BFC mode. Try not to increase the use of empty labels.

  BFC trigger many ways, the common are:

  • float non-none
  • position 非 static
  • overflow 非 visible

Font specifications

• Foreign commercial site, do not use font-facethe introduction of 微软雅黑the font, avoid infringement (including images Content)
• In the Chinese need to display the contents of the Windows platform, and its size should not be less than 12px

网站上使用 微软雅黑 字体有三种形式：

1、【侵权】图片中使用 微软雅黑 字体，比如网站头图
2、【安全】网站 CSS 用 font-family 声明网站使用 微软雅黑 字体，比如文章标题和正文
3、【侵权】网站通过 font-face 引用 微软雅黑 ，这种方式不常见

Select Specification

In strict accordance with the BEM (Block Element Modifier) , it is recommended to use only class selectors, but BEM trouble writing, it is recommended that the following

• Disable universal selector *
• Without using no specific definitions semantic tag selector

Attribute Order

CSS CSS property order is part of good coding style helps improve code readability, easy to find code issues, it is conducive to teamwork, but found that some students are more casual in writing the order of attributes, thought to write a property in the project One.

Recommends the following order to write

1. Positioning properties (position, display, float, left, right)
2. Size attribute (width, height, padding, margin, border)
3. Font properties (color, font, text-align)
4. Other attributes (background, cursor, outline)

The purpose is to browse the code, to gradually clear the effect of the target element.

.test {
  display: block;
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  margin: 0 10px;
  padding: 20px 0;
  font-size: 12px;
  color: #333;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}
web前端开发资源Q-q-u-n： 767273102 ，内有免费开发工具，零基础，进阶视频教程，希望新手少走弯路 

4. Notes Specification

Single-line comments

Notes to /*begin to */end, comments can not be nested within a commentary content 前后空一个空格.

/* 推荐的单行注释 */

/*不推荐的单行注释*/

Note: You can also use the sass and less preprocessing language double slash comment, but after compiling comments do not appear in the css file, it is recommended to use a unified /* */comment.

Module Remark

Sometimes we need a module (block of code) described functionally and can be clearly distinguished from other code desired, we can note with the module.

Notes to /*begin to */end 前后空一个空格the first line fill 描述, fill in the last line by line 分割线.

/* 推荐的模块注释
---------------------------------------------------- */

/* 不推荐的模块注释 ---------------------------------------------------- */

* File Information Notes

If you need to file for a functional description to help people quickly understand the role of the file, it is recommended (Character Set Description) file is written to the beginning of the following comments, which include the file description, creator, creation time and so on.

@charset "UTF-8";
/**
 * @desc 文件功能描述，方便其他人快速理解
 * @author 创建人
 * @date 创建时间
 */

The specification covers

• As 少用importent
• vue single unified file components using css / less / sass scoped
• Each page / component needs to have a 全局唯一logo id / class, style belong below it needs to add to the unique identification
• Avoid globally modify an existing style, you must be specific to the page (by weight)
• Match-disable *selector (except for special circumstances, such as initialization)

vue single-file assemblies can be used to modify the style does not take effect /deep/or>>>

6. Media Inquiries

For internal management systems, multi-use ThinkPad business notebook, the screen resolution 1366*768. Recommended Resolution Testbrowser to navigate to expand the size of the debug window.

Download: www.cnplugins.com/devtool/res...

Common dimensions are as follows

size	description
≥1366px	Big screen big desktop monitor
≥1200px	Medium screen desktop monitor
≥992px	Medium screen desktop monitor
≥768px	Small screen tablet
<768px	Ultra-small mobile phone screen

Priority end PC

The default layout according to a maximum size, when the size of a mobile terminal becomes gradually narrow layout

body {
  background: gray;
}
@media screen and (max-width: 1366px) {
  body {
    background: red;
  }
}
@media screen and (max-width: 1200px) {
  body {
    background: yellow;
  }
}
@media screen and (max-width: 920px) {
  body {
    background: green;
  }
}
@media screen and (max-width: 768px) {
  body {
    background: black;
  }
}

Priority mobile terminal

The default layout according to the minimum size, when the size is enlarged gradually into the PC layout

body {
  background: gray;
}
@media (min-width: 768px) {
  body {
    background: red;
  }
}
@media (min-width: 920px) {
  body {
    background: green;
  }
}
@media (min-width: 1200px) {
  body {
    background: yellow;
  }
}
@media (min-width: 1366px) {
  body {
    background: red;
  }
}

If you need to do print style adaptation, use @media print

@media print {
  body {
    background: #fff;
  }
}
web前端开发资源Q-q-u-n： 767273102 ，内有免费开发工具，零基础，进阶视频教程，希望新手少走弯路 

7. Unit Specifications

CSS has two units, respectively, 绝对单位and 相对单位.

• Common absolute units

  • px: pixels (a point on the computer screen)
  • cm: cm
  • in: inches
  • pt: pound (1 pt equal to 1/72 of an inch)

• Common relative units

  • %: Percentage of its parent element
  • vw: percentage of the width of the viewport
  • vh: the percentage of the viewport height
  • em: a multiple of the current font
  • rem: The root element of a multiple fonts
  • * rpx: micro-channel dedicated small program, a predetermined width of the screen 750rpx

Use more units px,%, rem are three建议 PC 端用 px 单位、移动端用 rem，需要具体控制尺寸还是使用 px

Note: If you need to calculate values ​​for different units, the method may be used css3 Calc () _

8. Compatibility Specification

The use of private property

It is because of the different browser vendors, resulting in a need to add some style to take effect prefix, a common browser kernel and the following prefixes

Browser	Kernel	Prefix
Firefox	Gecko	-moz-
Chrome	WebKit	-webkit-
IE	Trident	-ms-
Safari	WebKit	-webkit-
Opera	Presto	-O-
Well-known browser	WebKit	-webkit-
Common mobile browser	WebKit	-webkit-

CSS3 browser private prefix in front, after the standard prefixes

.test {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

NOTE: In webpack environment, you can use postcss-loader automatically add the prefix _ private