Skip to content

前端 CSS 规范 #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mason369 opened this issue Jan 22, 2023 · 0 comments
Open

前端 CSS 规范 #3

mason369 opened this issue Jan 22, 2023 · 0 comments
Assignees
Labels
good first issue Good for newcomers help wanted Extra attention is needed

Comments

@mason369
Copy link
Member

前端 CSS 规范

分号

每个属性声明后面都要加分号。

命名

  1. 不使用 id 选择器
  2. 适用有意义的名词命名
  3. 单词全部小写,名词超过 1 个时,使用-分隔符

属性声明顺序

原则:整体到局部,外部到内部,重要属性优先

.element {
	display: block;
	float: left;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	margin: 0 100px;
	padding: 50px; // padding习惯写到margin后面
	width: 100px;
	height: 100px;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	font: normal 13px "Helvetica Neue", sans-serif;
	color: #333;
	text-align: center;
	line-height: 1.5;
	background-color: #f5f5f5;
	opacity: 1;
}

参考连接

百度 CSS 规范指南(opens new window)

腾讯 CSS 规范指南(opens new window)

Google CSS 规范指南

@mason369 mason369 added this to the 项目初始化 milestone Jan 22, 2023
@mason369 mason369 moved this to 🔖 Ready in Heimatoutiao Jan 22, 2023
@mason369 mason369 added good first issue Good for newcomers help wanted Extra attention is needed labels Jan 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers help wanted Extra attention is needed
Projects
Status: 🔖 Ready
Development

No branches or pull requests

3 participants