例如: /* good *//* 头部样式定义 */.header {}/* 产品推荐样式定义 */.mayLike {
早在泰半年前,我在卖力整理界说了前端组JavaScript开发规范与less、css样式开发规范。一直想将两个规范整理成文章,但在整理了JavaScript规范后,我花了较多的时间在学习JavaScript根本常识,所以对付样式规范一直处于安排状态。直到上周我收到了一条关于JavaScript规范的评论,提醒了我样式规范不能再拖了,那么在放假前花点时间整理一遍作为温习也算不错。
说在前面,本文虽然作为规范但对付less与css写法也给出了部分建议,所以在阅读本规范前建议读者先掌握less根基用法,而对付规范这里也只是给出建议,终究适合本身的才是最好的,本文开始。
贰 ? 定名规范 贰 ? 壹 class、id定名JavaScript变量我们保举使用小驼峰,但样式定名得做点转变,这里我们保举使用 - 分隔断绝分手符拼接。
/* good */ #foo-bar;.foo-bar /* bad */ #fooBar;.fooBar 贰 ? 贰 less变量定名我们知道less供给了样式变量可供复用,对付多单词变量定名保举给与 @ 开头并以 - 分隔断绝分手符拼接的定名方法。
/* good */ @border-color:#fff; /* bad */ @borderColor: #fff; 贰 ? 叁 less函数定名除了变量,less还供给了函数用于复用多属性class样式类,关于函数保举以 . 开头 - 支解线拼接方法定名;形参若为多个单词,保举使用单词首字母小写方法简写,多个形参之间使用分号;断绝。(虽然函数用的不久不多)
/* good */ .foo-bar (@bg: #f5f5f5;@color: #900; @fz: 12px) { background: @bg; color: @color; font-size: @fz; } /* bad */ .foo-bar (@background: #f5f5f5, @color: #900, @font-size: 12px) { background: @background; color: @color; font-size: @font-size; } 贰 ? 肆 less定名空间less中的定名空间其实就是部分变量与混合模块的包装,对付定名空间保举给与 # 开头 - 支解线拼接方法进行统一。
/* good */ #foo-bar { .border-radius() { font-size: 12px; }; .border-color() { color: #fff; } } 叁 ? less文件引入less一大好处就是撑持将一个文件纯挚作为变量储存文件,从而可以在其它less中引入使用,先说less引入用法,这里直接贴官网用法:
由于可能同时存在index.less文件与index.css文件,为了便于同名但差别后缀的文件区分,@import外部文件引入后缀__不保举省略__,如果文件自身只作为引用使用而不需要编译输出,必需在文件引用时添加reference字段。
/* good */ @import 'demo.css'; //引入demo.css @import (reference) 'demo.less';//引入demo.less,只作引用,不输出demo的内容 /* bad */ @import 'demo.css'; //引入demo.css @import 'demo'; //引入demo.less,并输出 肆 ? css、less简写 肆 ? 壹 属性值省略写法关于padding、margin:
/* good */ margin: 1px 2px; padding: 2px; /* bad */ margin: 1px 2px 1px 2px; padding: 2px 2px 2px 2px;当数值单位为0时,请省略单位;如果存在小数点,保举去失0简写:
/* good */ transition-duration: .5s; margin-top: 0; /* bad */ transition-duration: 0.5s; margin-top: 0px;颜色值保举16进制写法,而非RGB表示方法,固然如果需要使用透明度时还是可以使用RGB,请灵活变通:
/* good */ border-color: #f00; color: #fefefe; /* bad */ border-color: red; color: rgb(254, 254, 254); 肆 ? 贰 不保举使用元素选择器+class/id组合出于性能考虑,制止元素选择器与class或id选择器叠加使用,这种写法违背了html与样式疏散的法则,如果html标签改削还得对应改削css中的元素选择器;其次,,由于选择器匹配法则是从右到左,原来定位到class或id就应该结束,如果你添加了元素选择器,css还得再匹配所有的元素,非常耗性能,所以强烈不保举。
/* good */ .foo-bar /* bad */ div.foo-bar 肆 ? 叁 样式复用当多个选择器具有配合属性,保举使用逗号支解选择器进行复用,每个选择器独立成行。如果为less环境,也保举变量,混入等其它做法。
/* good */ h1, h2, h3{ color: #fff; } /* bad */ h1,h2,h3{ color: #fff; } 肆 ? 肆 使用less父选择器&伪类属性建议给与父选择器写法取代传统写法,看几个例子:
常见伪类,好比hover等
/* good */ a { color: #fff; &:hover { color: #ddd; } } /* bad */ a { color: #fff; } a:hover { color: #ddd; }clearfix hack示例:
/* good */ .demo { font-size: 12px; &:after { display: block; content: ''; clear: both; } } /* bad */ .demo { font-size: 12px; } .demo:after { display: block; content: ''; clear: both; } 伍 ? 代码组织布局 伍? 壹 以构造块为单位划分样式代码在书写样式前,请先划分页面构造并以构造块为单位书写样式,不成随意零散界说。代码块书写保举从上到下,从左到右的书写挨次,不应该存在子级样式界说早于父级,底层样式界说早于上层样式的情况。
温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/31311.html
- 上一篇:先从一级缓存当中查询
- 下一篇:记录器记录结果并编写摘要日志消息