html 侧边栏怎么命名,HTML书写及CSS命名规则

前言

在HTML的样式组件开发的过程中，比较混乱以及头痛的一件事情便是css选择器的命名。所以在这里以sidebar(侧边栏)组件的书写为例，约定一个css选择器的命名规则，以规范自己的开发。

约定规则

1.首先确定组件布局，设计html框架

2.选定根元素的id或class

3.尽量减少选择器的命名而使用 '>' 来控制子级的样式

4.当标签使>语法超过4级，或需要JavaScript来操作时，则根据根元素类名或ID，使用 '-' 来构建新的名字。

例子

开发工具

sublime + emmet

css样式

.sidebar{}

.sidebar>div{}

.sidebar>div>h3 {}

.sidebar>div>div>{}

.sidebar>div>div>a{}

.sidebar_sub>a{}

.sidebar_sub>div{}

.sidebar_sub>div>a{}

HTML代码

abc1

1

2

3

4

5

1

标签1

标签2

标签3

标签4

标签5

标签6

标签7

标签8

标签9

标签10

abc2

1

2

3

4

5

2

标签1

标签2

标签3

标签4

标签5

标签6

标签7

标签8

标签9

标签10