css选择器分为哪几类CSS选择器的命名规范
1.模块化命名
例如：
与布局相关的样式以“g”为开头。如“g-content”和“g-header”；
与挂钩相关的样式以“j”为开头。如“j-open”和“j-request”；
与元件相关的样式以“m”为开头。如“m-dropMenu”和“m-slider”；
与状态相关的样式以“s”为开头。如“s-current”和“s-selected”；
与⼯具相关的样式以“u”为开头。如“u-clearfix”和“u-ellipsis”。
“⼯具”是指与业务逻辑解耦的，能够重⽤的样式；“元件”是指⾃定义的可重⽤且可移植的基本⽹页元素；“挂钩”是指供JavaScript操纵的样式。
2.选择器皆为⼩写形式
推荐的写法：
g-first-header
{
line-height: 16px;
}
不推荐的写法：
.g-FirstHeader
{
line-height: 16px;
}
3.每个选择器独占⼀列
除最后⼀个选择器外，其它每⼀列选择器均以逗号结尾。若⽤到兄弟元素选择器，则相关符号的左右两端均留出⼀个半⾓空格。
推荐的写法：
.g-first-header,
.g-second-header-1 > .g-second-header-2
{
border: 2px solid #C3C3C3;
}
不推荐的写法：
.g-first-header, .g-second-header-1>.g-second-header-2
{
border: 2px solid #C3C3C3;
}
4.避开HTML标记
构建选择器时应尽量采⽤语义明确的类别名称，避开HTML标记，因为⼀旦HTML的结构产⽣更动，则与此对应的样式也就⽆效了。尽量将样式与结构分离，这样会使得阶层式样式表在⽇后更易被维护。
推荐的写法：
.g-content .g-item
{
flex-basis: 20%;
}
不推荐的写法：
.g-content li
{
flex-basis: 20%;
}
5.少⽤ID
ID的唯⼀性注定了它所对应的元素的样式就是⼀次性的，⽆法重⽤，⼀旦HTML结构发⽣变化，套⽤ID的选择器就要随之修改。另⼀个重要的原因是：ID的权重值是最⾼的，这可能会导致⽇后添加的样式⽆法复写原先的样式。
推荐的写法：
.g-special-content
{
height: 100px;
width: 300px;
}
不推荐的写法：
#special-content
{
height: 100px;
width: 300px;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。