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

Posted 2022-10-26

(总结一下前端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 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。

分类的命名方法

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

统一语义理解和命名

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

功能（.f-）

皮肤（.s-）

状态（.z-）

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/