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

时间：2022-10-24 15:57:08

(总结一下前端css样式规范)

前端样式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/

标签：

相关文章