css规范

Posted 2020-06-26 没事看看电影

一、文件规范

1. 基本样式库 /css/module
2. 通用UI元素样式库 /css/lib
3. JS组件相关样式库 /css/ui 
4. 业务类的CSS是指和具体产品相关的文件，放在如下目录中：读书 /css/book/ 
5. 文件名必须由小写字母、下划线组成 例如  /css/module/rec_btn.css

二、sass使用规范

1. module库和lib库 内文件必须以下划线开头：/css/lib/_lib.scss
2. 通用工具文件 /css/lib/_lib.scss 内只允许 使用 @mixin命令，定义代码块。
3. @import 最多允许嵌套两层（最好一层）。
4. module库中的 类因为会多次引用，所以每个类最外层，都要加上一个本模块的类名。
5. 每个项目外面 都要有一个 style.scss 用俩引入 外联公共样式，公共类。
6. 使用@import时要区分工具文件、内联样式：

   @charset "UTF-8";
   @import "../lib/lib";

 

　　　　@import "../../module/nav"
　　　　@import "../module/site";

　　　　@import "../../module/user_left"

 

　　6. 禁止 scss 标签、类名 多层嵌套，最多可嵌套4层（最好2到3层）。

　　　　错误实例：

       .pro_show{
          .pro_box{
             .pro_ele{
     　　　　　　 p{
       　　　　　　 span{
         　　　　　　　 i{

          　　　　　　　}
        　　　　　　}
      　　　　　　}
    　　　　　 }
 　　　　　 }
　　　　　}

　　　　　　

三、CSS书写顺序

　　1.位置属性(position, top, right, z-index, display, float等)
　　2.大小(width, height, padding, margin)
　　3.文字系列(font, line-height, letter-spacing, color- text-align等)
　　4.背景(background, border等)
　　5.其他(animation, transition等)

四、css书写规范

　　（布局上，外边的壳以 l_打头，功能模块以  m_打头， 里边的元素以 c_ 打头）

1. 使用CSS缩写属性：padding：11px 2px 0  0;　　
2. 去掉小数点前的“0”：  font-size:.8em
3. ID和class命名越简短越好，只要足够表达涵义。
4. 如果没有边框是，不要写成 border:0,应该写成border：none；
5. 链接样式请严格按照如下顺序添加：a:link -> a:visited -> a:hover -> a:active