前端样式CSS 规范

通用规范

// bad
padding-bottom: 0px;
margin: 0em;
// good
padding-bottom: 0;
margin: 0;

如果 CSS 可以做到，就不要使用 JS，建议并适当缩写值，提高可读性，特殊情况除外
“建议并适当”是因为缩写总是会包含一系列的值，而有时候我们并不希望设置某一值，反而造成了麻烦，那么这时候你可以不缩写，而是分开写。
当然，在一切可以缩写的情况下，请务必缩写，它最大的好处就是节省了字节，便于维护，并使阅读更加一目了然。

// bad
.box{border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
}
// good
.box{border-top: 0;
font: 100%/6 palatino, georgia, serif;
padding: 0 1em 2em;
}

声明应该按照下表的顺序：左到右，从上到下

display  width   font
visibility  height  text-align
position    margin  text-decoration
float   padding vertical-align
clear   border  white-space
list-style  overflow    color
top min-width   background

// bad
.box {font-family: 'Arial', sans-serif;border: 3px solid #ddd;left: 30%;position: absolute;text-transform: uppercase;background-color: #eee;right: 30%;isplay: block;font-size: 5rem;overflow: hidden;padding: 1em;margin: 1em;
}// good
.box {display: block;position: absolute;left: 30%;right: 30%;overflow: hidden;margin: 1em;padding: 1em;background-color: #eee;border: 3px solid #ddd;font-family: 'Arial', sans-serif;font-size: 5rem;text-transform: uppercase;
}

元素选择器应该避免在 scoped 中出现
官方文档说明[1]：在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。

分类的命名方法

使用单个字母加上"-"为前缀

布局（grid）（.g-）；
模块（module）（.m-）；
元件（unit）（.u-）；
功能（function）（.f-）；
皮肤（skin）（.s-）；
状态（.z-）。

统一语义理解和命名

布局（.g-）
文档 doc doc
头部 head hd
主体 body bd
尾部 foot ft
主栏 main mn
主栏子容器 mainc mnc
侧栏 side sd
侧栏子容器 sidec sdc
盒容器 wrap/box wrap/box

模块（.m-）、元件（.u-）

导航 nav nav
子导航 subnav snav
面包屑 crumb crm
菜单 menu menu
选项卡 tab tab
标题区 head/title hd/tt
内容区 body/content bd/ct
列表 list lst
表格 table tb
表单 form fm
热点 hot hot
排行 top top
登录 login log
标志 logo logo
广告 advertise ad
搜索 search sch
幻灯 slide sld
提示 tips tips
帮助 help help
新闻 news news
下载 download dld
注册 regist reg
投票 vote vote
版权 copyright cprt
结果 result rst
标题 title tt
按钮 button btn
输入 input ipt

功能（.f-）

浮动清除 clearboth cb
向左浮动 floatleft fl
向右浮动 floatright fr
内联块级 inlineblock ib
文本居中 textaligncenter tac
文本居右 textalignright tar
文本居左 textalignleft tal
垂直居中 verticalalignmiddle vam
溢出隐藏 overflowhidden oh
完全消失 displaynone dn
字体大小 fontsize fs
字体粗细 fontweight fw

皮肤（.s-）

字体颜色 fontcolor fc
背景 background bg
背景颜色 backgroundcolor bgc
背景图片 backgroundimage bgi
背景定位 backgroundposition bgp
边框颜色 bordercolor bdc

状态（.z-）

选中 selected sel
当前 current crt
显示 show show
隐藏 hide hide
打开 open open
关闭 close close
出错 error err
不可用 disabled dis

sass 规范

当使用 Sass 的嵌套功能的时候，重要的是有一个明确的嵌套顺序，以下内容是一个 SCSS 块应具有的顺序。

当前选择器的样式属性

父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
伪类元素 (:before and :after)
父级选择器的声明样式 (.selected, .active, .enlarged etc.)
用 Sass 的上下文媒体查询
子选择器作为最后的部分

.product-teaser {// 1. Style attributes
display: inline-block;
padding: 1rem;
background-color: whitesmoke;
color: grey;
// 2. Pseudo selectors with parent selector
&:hover {color: black;
}
// 3. Pseudo elements with parent selector
&:before {content: "";
display: block;
border-top: 1px solid grey;
}
&:after {content: "";
display: block;
border-top: 1px solid grey;
}
// 4. State classes with parent selector
&.active {background-color: pink;
color: red;
// 4.2. Pseuso selector in state class selector
&:hover {color: darkred;
}
}
// 5. Contextual media queries
@media screen and (max-width: 640px) {display: block;
font-size: 2em;
}
// 6. Sub selectors
> .content > .title {font-size: 2em;
// 6.5. Contextual media queries in sub selector
@media screen and (max-width: 640px) {letter-spacing: 2em;
text-transform: uppercase;
}
}
}

特殊规范

对用页面级组件样式，应该是有作用域的
对于公用组件或者全局组件库，我们应该更倾向于选用基于 class 的 BEM 策略

<style lang='scss'></style> // bad
<!-- 使用 scoped 作用域 -->
<style lang='scss' scoped></style> // good
<!-- 使用 BEM 约定 -->
<style> // good
.c-Button {border: none;
border-radius: 2px;
}
.c-Button--close {background-color: red;
}
</style>

References
[1] 官方文档说明: https://cn.vuejs.org/v2/style-guide/#scoped-中的元素选择器-谨慎使用
[2] 风格指南: https://cn.vuejs.org/v2/style-guide/
[3] 更好的css方案: http://nec.netease.com/
[4] 前端js规范文档: https://www.xuanfengge.com/fedoc/

【前端】3.总结一下前端css样式规范相关推荐

前端开发审查元素时CSS样式有个横线（该CSS样式定义后无效）的解决办法
问题概述关于这个问题,博主是在前端开发,样式调试的时候遇到的, 进行盒模型,CSS Debugger调试时,遇到样式设值后不可用的情况! 如下图: 解决办法左看右看,上看下看,最终发现是前面在编码 ...
html表单页面css样式代码,前端html表单与css样式(示例代码)
1,from标签 from标签的功能是向服务器传输数据,实现用户交互的重要标签. from标签的具体使用: input标签使用示例: 姓名: 用户名: 密码: 爱好:骑车游戏电影男女第一句:act ...
【Web前端基础】实验6 CSS样式属性
1.木兰花令网页样式 <!doctype html> <html lamh="en"><head><meta charset=" ...
前端工程师实战开发：CSS样式继承、像素与选择器权重详解
餐厅练习具体看resource文件夹或者百度继承 <body><p>我是p元素<span>我是p里面的span</span></p> ...
WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式能力目标 Ø 理解CSS的 ...
css宋体代码_前端开发必备的CSS命名规范与常用CSS代码集合
编辑 | web前端开发来源 | web前端开发我们在用html+css进行网页的排版布局时,经常会遇到CSS命名,如果是在团队多人协作开发时,团队里都会有自己的命名规范与要求. 但如果是自己在个 ...
Web前端框架（JavaScript，CSS）、html组件、CSS规范与第三方库
1.什么是前端框架前端框架一般指用于简化网页设计的框架,使用广泛的前端开发套件,比如,jquery,extjs,bootstrap等等,这些框架封装了一些功能,比如html文档操作,漂亮的各种控件( ...
css外部命名规范,前端开发较全CSS命名规范
前端开发用什么框架吗前端开发新框架前端开发app混合开发框架文件名命名规范模块:module. 基本共用:base. 布局.版面:layout.css 主题:themes.css 专栏:col ...
web项目开发之前端规范 --- CSS编码规范
此文严格按照W3C规范和部分实际项目可读性,浏览器加载,性能等众多属性权衡,做出平时前端编码规范文档.供广大web工作者参考并实施,对维护和项目扩展升级都能省时省力. 转载请注明出处:JS前端实用开 ...

【前端】3.总结一下前端css样式规范

总结一下前端css样式规范