css规范

Posted 没事看看电影

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css规范相关的知识,希望对你有一定的参考价值。

一、文件规范

  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 

以上是关于css规范的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——CSS选择器

VSCode自定义代码片段——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段6——CSS选择器

css常用代码片段 (更新中)