AI专业者开发社区 1 号成员
  •  0 回帖  •  12 浏览  •  4 个月前
   

CSS规范--春风十里不如写好CSS

先吟几句：

最近看了看春风十里不如你，本来很少看剧的，暑假有点闲就看了，感觉不错，挺喜欢这部剧，就套了个名字，嘿嘿嘿。剧里面印象深刻的是《致橡树》这首诗，念几句：

我如果爱你, 绝不像攀援的凌霄花，借你的高枝炫耀自己;
我如果爱你, 绝不学痴情的鸟儿，为绿荫重复单调的歌曲；
也不止像险峰，增加你的高度，衬托你的威仪。

不骚了，回到正题，写 css 也一样需要爱，你爱一门技术就要用心付出，对知识寸土必争，寸草必得。写 css 容易，写好就需要下功夫了。如果我爱你，就会去研究怎么去写好你，下面先说说怎么规范的写 css。

css 语法规范：

  • 每条属性声明占一行，增加易读性
 /*bad*/
 body{margin: 0;padding: 0;}
 /*good*/
 body{
     margin: 0;
     padding: 0;
 }
  • 颜色采用十六进制写法（不使用颜色名），并且能够简写的进行简写:
/*bad*/
.example{
    color: #ffaabb;
}
/*good*/
.example{
    color: #fab;
}
  • 0 值的单位进行省略，如将 margin:0px，写成 margin:0:
/*bad*/
.example{
    margin: 0px;
}
/*good*/
.example{
    margin: 0;
}
  • 有选择器组时，每个选择器占一行：
  body,
  html,
  p{
      margin: 0;
      padding: 0;
  }
  • 连字符使用 -，而不使用 _，因为能少按一个 shift 就少按，还有和 js 变量命名区分开。
/*bad*/
.index_list {}
/*good*/
.index-list {}
  • 选择器避免使用标签名。(首先可能使得一些不必要的标签带上样式，其次会对选择器寻找上也会在一定程度上浪费时间)
/*bad*/
.index-list li{}
/*good*/
.index-list .item{}
  • 媒体查询，不要写在文档最后或分开到另外文档，应该写在相应规则的附近，这样有利于修改和阅读
.index-nav{
    margin-top: 10px;
}
/* 和相关的规则一起放 */
@media (min-width: 480px){
    .index-nav{
        margin-top: 5px;
    }
}
  • 前缀，css3 的一些属性要注意带上前缀：
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
  • 引号方面，使用双引号而不使用单引号,url 不用使用引号：
/*no good*/
.example{
    font-family: 'Times New Roman',Georgia,Serif;
    background: url("../images/icon.png");
}
/*good*/
.example{
    font-family: "Times New Roman",Georgia,Serif;
    background: url(../images/icon.png);
}
  • 每条属性声明语句结束后加上分号，最后一条声明可省略分号，但不建议
  • 每个属性声明的冒号（:）后添加一个空格
  • 小于 1 的小数点的值，省略 0，如 0.5px，可写成.5px
  • 避免使用 @ import 指令。应使用 link 标签来引入 css 文件
  • 避免使用!important，这个优先级最高，滥用会使得维护困难，代码混乱
  • Less,Sass 等预处理言的嵌套不超过 3 层
  • 避免使用 id:(因为 id 优先级高，且具有唯一性，复用性差，而且 id 是 html 与 js 的挂钩，class 是 HTML 与 css 的挂钩，这样能够让代码更为的清晰，不用说看到一个 id，既要到 js 里查查有没有什么用，又到 css 里看看有什么样式，确实麻烦。)
  • 注释需要全面易懂，不要只写一点

css 属性声明顺序规范：

css 属性的书写顺序大致分为 4 组，从上到下依次书写：

  1. Positioning Model（定位的相关属性）：
    • 有 position，display，TRBL，z-index，float，overflow 等
  2. Box Model （盒子模型的属性）：
    • 有 margin，padding，border，width，height 等
  3. Typographic （文本，排版）
    • 有 font，line-height，text-align
  4. Visual （视觉方面的）
    • 有 background，color，transition，list-style

例子：

.example{
    content: "hello";
    /*positioning*/
    position: absolute;
    top: 10px;
    left: 12px;
    /*box model*/
    margin-top: 20px;
    width: 100px;
    heith: 100px;
    /*typographic*/
    text-align: center;
    font-size: 12px;
    /*visual*/
    color: #f00;
    background-color: #0f0;
}

特别的：如果有 content 属性时，需要把其放到最前面

css 的文件分类：

文件分类这不会有什么标准，分好，适合自己开发和维护便可。比如：可以有公共的 css，某个页面的 css，重置的 css，皮肤的 css，部件的 css 等，可根据自己的需求，习惯等分类。不必太过拘束。

  • common.css（通用）
  • main.css（主要）
  • reset.css（重置）
  • skin.css（皮肤）
    ……

css 选择器命名：

命名这东西可以说让每个前端开发的人员苦恼的东西，有时得想半天去想一个名字，煎熬啊。老是想，到底怎么样的命名才比较好呢？我这样命名接着会不会重复？等等。。。
到底怎样命名才比较规范，参考一下 NEC 规范或者是 BEM 规范。个人比较喜欢 NEC，因为其比较简约些, 详细的可以到 NEC 官网上看看。
看看 NEC 的分类：

  • 布局（grid）（.g-）：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等！
  • 模块（module）（.m-）：通常是一个语义化的可以重复使用的较大的整体！比如导航、登录、注册、各种列表、评论、搜索等！
  • 元件（unit）（.u-）：通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中！比如按钮、输入框、loading、图标等！
  • 功能（function）（.f-）：为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式表现，比如清除浮动等！不可滥用！
  • 皮肤（skin）（.s-）：如果你需要把皮肤型的样式抽离出来，通常为文字色、背景色（图）、边框色等，非换肤型网站通常只提取文字色！非换肤型网站不可滥用此类！
  • 状态（.z-）：为状态类样式加入前缀，统一标识，方便识别，她只能组合使用或作为后代出现（.u-ipt.z-dis{}，.m-list li.z-sel{}）

我们参考 NEC 的分类命名的规范，学习学习它的命名，可以照着使用，也可以有自己不同的命名，可以根据团队的习惯等。规矩是死的，人是活的，能灵活去变通才是最好的，能够写出清晰易懂的代码就 ok。

css 命名常用单词：

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

单词这方面能看懂就好，英语也要学号才行啊，有时候不懂怎么命名，就查查英文单词怎么写，看得出英语还是很重要啊。css 的命名单词长度不要太长太冗余，看懂就好，有些单词过长可以适当的缩写一下。

最后说说：

如果想学好一门技术，就想要从各个方面研究他，本文也是，了解 css 也要 css 的规范，这对于强迫症的人就是很好的疗药，我就是这样，总觉得自己的 css 写得太不规范，也不容易维护，想要去修饰好，所以写写博客来强迫自己去改正，博客是个好东西，写给自己看看同时也写给别人看，所以这会有约束，从而不断的修饰改正错误，从中自己也会学到很多东西，可谓春风十里不如写博客。