css规范

一、文件规范

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

二、sass使用规范

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

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

转载于:https://www.cnblogs.com/hjsblogs/p/5301545.html