关于css命名规范一些小技巧或经验

前言

通过前边自己进行了一周自适应招聘官方网站PC端和移动端的开发，自己在开发过程中也遇到了一些css命名规范的令人头疼的事情，自己回过头来看自身的代码认真思考并总结了一些不成熟的经验，下文将向大家介绍一些命名规范，遵照这些规范可以省时省力，少走弯路。

1、模块化命名

先根据UI图进行页面整体的块级划分，可以画出页面的基本框架布局，然后脑中一定要形成一个清晰的架构图，开发的过程中最好使用一些寓意清晰的语义去定义好块的class类，如下：

nav

header

footer

main

content

main

info

这样，一目了然，在调整样式和布局的时候可以快速定位和修改，也便于其他同事阅读你的代码时不进行吐槽

2、选择器皆为小写形式

推荐的写法：

.header-btn
{
    line-height: 16px;
}复制代码

不推荐的写法：

.headerBtn
{
    line-height: 16px;
}

3、每个选择器独占一列,

除最后一个选择器外，其它每一列选择器均以逗号结尾。若用到兄弟元素选择器，则相关符号的左右两端均留出一个半角空格。

.first-header,
.second-header-1 > .second-header-2
{
    border: 2px solid #C3C3C3;
}复制代码

不推荐的写法：

.first-header, .second-header-1>.second-header-2
{
    border: 2px solid #C3C3C3;
}

4、少用ID，

ID的唯一性注定了它所对应的元素的样式就是一次性的，无法重用，一旦HTML结构发生变化，套用ID的选择器就要随之修改。另一个重要的原因是：ID的权重值是最高的，这可能会导致日后添加的样式无法复写原先的样式。

推荐的写法：

.special-content
{
    height: 100px;
    width: 300px;
}复制代码

不推荐的写法：

#special-content
{
    height: 100px;
    width: 300px;
}

5、缩写属性

有些属性是可以合在一块的，既精简代码，又便于阅读。

推荐的写法：

.test
{
    padding: 3px 5px;
}复制代码

不推荐的写法：

.test
{
    padding-top: 3px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
}

6、避开！important

“！important”会给日后的维护带来麻烦，使开发者难以查找样式问题。如果在书写时发现新样式无法复写旧样式。通常有两个原因：要么新样式写在了旧样式的前面，要么新样式对应的选择器的权重比旧样式的更低。针对后一种情况，只要增加新样式选择器的权重值就可以完全避开这个问题，无需用到“！important”。

推荐的写法：

.test-selector .test-selector
{
    font-size: 16px;
}

.test-selector .test-selector .test-selector
{
    font-size: 14px;
}复制代码

不推荐的写法：

.test-selector .test-selector
{
    font-size: 16px;
}

.test-selector
{
    font-size: 14px !important;
}

7、样式块间留一空行

样式选择器及其样式块与周遭内容要保留一空行以避免内容过于拥挤，妨碍寻找。

8、 使用连字符分隔的字符串

如果你常写 JavaScript，那么你知道对变量使用驼峰式命名法（camel case）是一种惯例。

var redBox = document.getElementById('...')
复制代码

这样很好，对吧？

但问题是这种命名法并不适用于 CSS。

请切忌以如下方式命名：

.redBox {
  border: 1px solid red;
}
复制代码

相应的，你可以这样写：

.red-box {
   border: 1px solid red;
}
复制代码

这是一种非常标准的 CSS 命名规范。也可以说更易读。

同时，这也和 CSS 属性名称保持了一致。

// Correct
.some-class {
   font-weight: 10em
}
// Wrong
.some-class {
   fontWeight: 10em
}

9、可以使用less,

同时使用定义同样的类名，用-间隔符隔开，这样我们用&符合去继承父类，使得style文件结构清晰分明，如下图

10、对于通用的组件部分没有进行一个提取和公共编写，以便于进行复用。

     比如下图的这个正方块

11、调整原先组件的样式时，对于F12要会使用

      具体技巧如下图 

12、 属性格式

• 为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行。
• 属性名的冒号后使用一个空格。出于一致性的原因，
  属性和值（但属性和冒号之间没有空格）的之间始终使用一个空格。
• 每个选择器和属性声明总是使用新的一行。
• 属性选择器或属性值用双引号（””），而不是单引号（”）括起来。
• URI值（url()）不要使用引号。

作为最佳实践，我们应该遵循以下顺序（应该按照下表的顺序）：

结构性属性：

1. display
2. position, left, top, right etc.
3. overflow, float, clear etc.
4. margin, padding

表现性属性：

• background, border etc.
• font, text

不推荐：

 .box {
  font-family: 'Arial', sans-serif;
  border: 3px solid #ddd;
  left: 30%;
  position: absolute;
  text-transform: uppercase;
  background-color: #eee;
  right: 30%;
  isplay: block;
  font-size: 1.5rem;
  overflow: hidden;
  padding: 1em;
  margin: 1em;
}复制代码

推荐：

.box {
  display: block;
  position: absolute;
  left: 30%;
  right: 30%;
  overflow: hidden;
  margin: 1em;
  padding: 1em;
  background-color: #eee;
  border: 3px solid #ddd;
  font-family: 'Arial', sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
}

13、对于css样式文件我们要进行规范的命名

这样可以快速找到对应修改样式的地方，然后引入，不仅结构清晰，也会加快页面的渲染速度，如下

font.css的style  即字体的样式

media.css的style  即媒体查询的样式

 layout.css  布局，版面