CSS开发规范

1、基本规范

所有名称小写，符合w3c规范
类名和id，多个变量之间用中划线连接
所有变量只能使用名词
变量定义要符合语义化

2、基本原则

以项目名或者一个全局名称为命名空间，例如你的项目名叫demo，则命名空间为demo，这样在多人合作开发时，高度统一如一人编写。
关注分离，将 HTML、CSS 解耦；模块化编码。

3、模块化编写实践

1）语义化的模块名

开发者需要通过模块名应该能一眼看出该模块是干什么的。一般模块名代表着这个模块的功能，如看到shopping就知道这个模块是购物模块

2）模块内部的类名继承自父级

如：下面代码中，模块的名为 shopping，模块最外层使用 {命名空间}-{模块名} 的方式命名 Class。模块子元素以在此基础上进行命名。如果不继承父级的类名，很容易造成命名冲突。

<div class="demo-shopping">
  <h2 class="demo-shopping-title">title</h2>
  <p class="demo-shopping-body">hello world!</p>
</div>

3）充分考虑结构的语义化

虽然在 Class 的命名上已经做到的了关注分离，编写样式不再依赖具体的元素名称，但仍应该考虑语义化，根据元素设计的目的来使用元素。是段落的，你就用 <p>；是标题的，就用 <h1>~<h6>；是引用的，就用 <blockquote>，而不是简单粗暴的用 <div>、<span>。语义化的目的，一方面是抽去 CSS 以后，页面还是一个结构良好、可读的页面；另一方面，这也是 SEO 的最基本要求。

4）避免不必要的 CSS 选择符嵌套

Class 已经模块化命名，从类名上已经可以清晰的分辨元素的从属，一般情况下也不会造成类名冲突，没有必要再进行选择器嵌套，保持 css 结构清晰，提高渲染效率。特殊情况可以嵌套（如提高权重、主题之间代码隔离），但应避免过多层级。

/* 推荐写法 */
.demo-shopping {

}
.demo-shopping-body {

}
/* 不推荐写法 */
.demo-shopping .demo-shopping-body {}

5) 与 JS 交互时，在模块 HTML 结构的最外一层添加状态，而非给模块每个子元素单独添加元素

给最外层添加状态类以后，整个模块的样式都能控制，减少操作，提高性能，比如，我们可以这样写：

<div class="demo-shopping demo-shopping-active">
  <h3 class="demo-shopping-title"></h3>
  <p class="demo-shopping-content"></p>
</div>

但不要这样写（效率更低）：

<div class="demo-box">
  <h3 class="demo-shopping-title demo-shopping-title-active"></h3>
  <p class="demo-shopping-content demo-shopping-content-active"></p>
</div>

4、命名注意事项：

语义化，望文见义
如 demo-tab、demo-nav，不要使用 red、left 等表象的词命名。
模块状态： {命名空间}-{模块名}-{状态描述}
常用状态有：hover, current, selected, disabled, focus, blur, checked, success, error 等
子模块： {命名空间}-{模块名}-{子模块名}
常用模块名有：bd(body)，cnt(content)，hd(header)，text(txt)，img(images/pic)，title，item，cell 等，词义表达组件要实现的功能。
模块嵌套：

 <ul class="demo-nav">
     <li class="demo-nav-item">
         <a href="#">nav</a>
         <ul class="demo-subnav">
             <li class="demo-subnav-item">
                 <a href="#">subNav</a>
                     <ul class="demo-list">

统一命名风格（使用相同名词命名不同组件的子元素）：
如 demo-tab-head, demo-modal-head，便于理解。

5、编码规范

CSS 样式表是一个序列通用字符集，传输和存储过程中，这些字符必须由支持 US-ASCII（例如 utf-8, ISO 8859-x, SHIFT JIS 等）字符编码方式编译

1）文档内嵌样式表编码

When a style sheet is embedded in another document, such as in the STYLE element or "style" attribute of HTML, the style sheet shares the character encoding of the whole document.

当样式出现在其它文档，如 HTML 的 STYLE 标签或标签属性 "style"，样式的编码由文档的决定。

2）样式表编码

@charset 规则一定要在样式文件的第一行首个字符位置开始，否则的话就会有机会让 BOM 设置生效（如果有设置 BOM 的话）而优于 @charset 作为样式表的编码
@charset ''; 一定要写上，并且用小写字母，不能出现转义符

3）团队约定

样式文件必须写上 @charset 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 “utf-8”
字符 @charset ''; 都用小写字母，不能出现转义符，编码名统一使用小写。
考虑到在使用“utf-8”编码情况下 BOM 对代码的污染和编码显示的问题，在可控范围下，坚决不使用 BOM。

推荐：

@charset 'utf-8';

.pafe {}

不推荐：

/**
 * @desc File Info
 * @author Author Name
 * @date 2021-01-27
 */

/* @charset规则不在文件首行首个字符开始 */
@charset 'utf-8';

.pafe {}

@CHARSET 'utf-8';
/* @charset规则没有用小写 */
.pafe {}

/* 无@charset规则 */
.pafe {}

6、代码风格

1）代码格式化

样式书写一般有两种，统一使用展开格式（Expanded）书写样式：

一种是紧凑格式 (Compact)

.pafe { display: block; width: 50px; }

一种是展开格式（Expanded）

.pafe {
  display: block;
  width: 50px;
}

2）代码大小写

样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。

/* 推荐 */
.pafe {
  display: block;
}

/* 不推荐 */
.PAFE {
  display: BLOCK;
}

3）选择器

尽量少用通用选择器 *
不使用 ID 选择器
不使用无具体语义定义的标签选择器

/* 推荐 */
.pafe {}
.pafe li {}
.pafe li p {}

/* 不推荐 */
* {}
#pafe {}
.pafe div {}

4）代码缩进

统一使用两个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）

.pafe {
  width: 100%;
  height: 100%;
}

5）分号

每个属性声明末尾都要加分号;

.pafe {
  width: 100%;
  height: 100%;
}

6）代码易读性

左括号与类名之间一个空格，冒号与属性值之间一个空格

推荐：

.pafe {
  width: 100%;
}

不推荐：

.pafe{
  width:100%;
}

逗号分隔的取值，逗号之后一个空格

推荐：

.pafe {
  box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}

不推荐：

.pafe {
  box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}

为单个 css 选择器或新申明开启新行

推荐：

.pafe,
.pafe_logo,
.pafe_hd {
  color: #ff0;
}
.nav {
  color: #fff;
}

不推荐：

.pafe,.pafe_logo,.pafe_hd {
  color: #ff0;
}.nav {
  color: #fff;
}

颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值必需包含前导0

推荐：

.pafe {
  color: rgba(255, 255, 255, 0.5);
}

不推荐：

.pafe {
  color: rgba( 255, 255, 255, .5 );
}

属性值十六进制数值能用简写的尽量用简写

推荐：

.pafe {
  color: #fff;
}

不推荐：

.pafe {
  color: #ffffff;
}

不要为 0 指明单位

推荐：

.pafe {
  margin: 0 10px;
}

不推荐：

.pafe {
  margin: 0px 10px;
}

7）属性值引号

css 属性值需要用到引号时，统一使用单引号

/* 推荐 */
.pafe {
  font-family: 'Hiragino Sans GB';
}

/* 不推荐 */
.pafe {
  font-family: "Hiragino Sans GB";
}

8）属性书写顺序

建议遵循以下顺序：

布局定位属性：display / position / float / clear / visibility / overflow
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient ...

.pafe {
  display: block;
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  margin: 0 10px;
  padding: 20px 0;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  color: #333;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

9）CSS3 浏览器私有前缀写法

CSS3 浏览器私有前缀一般不用直接写，通过autoprefixer编译添加：

推荐：

.pafe {
  border-radius: 10px;
}

不推荐：

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

CSS书写规范-前端项目开发

CSS开发规范

1、基本规范

2、基本原则

3、模块化编写实践

1）语义化的模块名

2）模块内部的类名继承自父级

3）充分考虑结构的语义化

4）避免不必要的 CSS 选择符嵌套

5) 与 JS 交互时，在模块 HTML 结构的最外一层添加状态，而非给模块每个子元素单独添加元素

4、命名注意事项：

5、编码规范

1）文档内嵌样式表编码

2）样式表编码

3）团队约定

6、代码风格

1）代码格式化

2）代码大小写

3）选择器

4）代码缩进

5）分号

6）代码易读性

7）属性值引号

8）属性书写顺序

9）CSS3 浏览器私有前缀写法