壹 ? 引
早在大半年前, 我在负责整理定义了前端组 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;
- }
伍 ? 代码组织结构
伍? 壹 以布局块为单位划分样式代码
在书写样式前, 请先划分页面布局并以布局块为单位书写样式, 不可随意零散定义. 代码块书写推荐从上到下, 从左到右的书写顺序, 不应该存在子级样式定义早于父级, 底层样式定义早于上层样式的情况.
比如页面分为头部, 主体与尾部, 那么尾部样式早于头部样式定义; 再如主体内部分为左右两个盒子, 右侧盒子样式不可早于左侧盒子, 这样代码更符合布局阅读习惯.
- /* good */
- .parent {
- }
- .child {
- }
- .top {
- }
- .bottom {
- }
- /* bad */
- .child {
- }
- .parent {
- }
- .bottom {
- }
- .top {
- }
伍? 贰 Less 变量, 函数请先定义后使用
变量, 文件必须先声明 / 引用再使用, 其次, 文件引用代码应放在文件头部.
- /* good */
- @import 'demo.less';
- @color: #fff;
- .page {
- color:@color;
- }
- /* bad */
- @import 'demo.less';
- .page {
- color:@color;
- }
- @color: #fff;
伍? 叁 样式嵌套规则
Less 推荐嵌套写法, 且嵌套不推荐超过三层:
- /* good */
- .parent {
- color: #fff;
- .child{
- font-size: 12px;
- }
- }
- /* bad */
- .parent {
- color: #fff;
- }
- .parent .child {
- font-size: 12px;
- }
陆 ? 注释要求
对于页面整体布局中的大块, 推荐在样式定义前添加注释说明, 例如:
- /* good */
- /* 头部样式定义 */
- .header {
- }
- /* 产品推荐样式定义 */
- .mayLike {
- }
柒 ? mixin 混入要求
关于函数混入, 如果被混入的属性类自身不需要被编译输出, 必须为属性类加上括号 ().
- /* good */
- .border-color() {
- color: #fff;
- }
- .demo {
- .border-color;
- }
- /* bad */
- .border-color{
- color:#fff;
- }
- .demo{
- .border-color;
- }
关于函数参数, 若需要引用所有形参是一条属性的不同值, 推荐 @arguments 代替形参分散的写法:
- /* good */
- .box-shadow(@x:0;@y:0;@blur:1;@color:#000){
- box-shadow:@arguments;
- }
- /* bad */
- .box-shadow(@x:0; @y:0; @blur:1; @color:#fff){
- box-shadow:@x @y @blur @color;
- }
捌 ? extend 继承要求
如果被混入的属性类自身需要被编译输出, 建议使用继承来代替混入:
- /* good */
- .border-color{
- color: #fff;
- }
- .demo {
- &:extend(.border-color);
- }
- /* 编译后 */
- .border-color,
- .demo{
- color: #fff;
- }
- /* bad */
- .border-color{
- color: #fff;
- }
- .demo {
- .border-color;
- }
- /* 编译后 */
- .border-color{
- color: #fff;
- }
- .demo {
- color: #fff;
- }
玖 ? 性能优化 (补充)
Display 属性会影响页面的渲染, 请合理使用
display: inline 后不应该再使用 width,height,margin,padding 以及 float;
display: inline-block 后不应该再使用 float;
display: block 后不应该再使用 vertical-align;
display: table-* 后不应该再使用 margin 或者 float;
float 在渲染时计算量比较大, 勿滥用 float; 情况允许下推荐 flex 进行布局.
动画优化
使用 translate 取代 absolute 定位就会得到更好的 fps, 动画会更顺滑.
避免通过类似 jQuery animate()-style 改变每帧的样式, 使用 CSS 声明动画会得到更好的浏览器优化.
如果使用基于 JavaScript 的动画, 尽量使用 requestAnimationFrame. 避免使用 setTimeout, setInterval.(关于 CSS 动画我会单独介绍, 先留个坑)
提升 CSS 选择器性能, 合理使用关键选择器
特别说明, CSS 选择器匹配机制是从右到左匹配, 只要当前选择符的左边还有其他选择符, 样式系统就会继续向左移动, 直到找到和规则匹配的选择符, 或者因为不匹配而退出. 所以我们把最右边选择符称之为关键选择器.
避免使用通用选择器
.content * {color: red;}
避免使用标签限制 id 选择器
button#backButton {...}
避免使用标签限制 class 选择器
treecell.indented {...}
避免使用多层标签选择器, 请使用 class 选择器替换, 减少 CSS 查找.
避免使用后代选择器, 请尽可能标明层级关系.
减少回流 (重排)
如果你要控制一个元素位移, 建议先将它脱离文档流.
尽量少改变 font-size 和 font-family
少改变元素的内外边距
使用 Flex 时取代 inline-block 和 float 时, 虽然都会回流, 但 flex 性能更佳.
拾 ? 总
那么到这里, 关于 CSS,Less 规范就介绍完毕了, 样式虽然简单, 但通过合理的规划, 不管是在后期维护代码或者去读懂同事的代码, 都会带来意想不到的便利.
说好一个月最少写八篇博客, 还差三篇只能回家写了. 现在是 2020 年 1 月 20 日零点 18 分, 过完今天我就要回家过年啦!!!! 虽然我还没抢到回家的票... 明天还是找黄牛安排一下, 那么晚安, 我又熬夜了.
来源: http://www.bubuko.com/infodetail-3388951.html