网站上的淘客组件是怎样做的,广告网站定制,热铁盒网页托管,新开服网页游戏一览表在两年工作中#xff0c;总结一下我所见的css命名风格。 1.单一class命名 .header {width: 500px;
}
.item {text-indent: 20%;
} 优点#xff1a;简单#xff0c;渲染效率高。 缺点#xff1a;零散#xff0c;没有模块化。 2. 后代选择器class命名 .header .item a {font…在两年工作中总结一下我所见的css命名风格。 1.单一class命名 .header {width: 500px;
}
.item {text-indent: 20%;
} 优点简单渲染效率高。 缺点零散没有模块化。 2. 后代选择器class命名 .header .item a {font-size:14px;
}
.header .item a span {color:#000;
} 优点模块化只对当前模块有效。 缺点渲染效率低增加冗余字符。 3.前缀叠加class命名 .header {width: 100%;height: 80px;
}.header-item {font-size: 14px;
}.header-item-a {color: #0066ff;
} 优点可读性好渲染效率高。 缺点增加冗余字符。 4.OOCSS面向对象命名 .tr { text-align: right;}
.pb8 { padding-bottom: 8px;} 优点语义化可读性好渲染性能高。 缺点不利于频繁重构代码。比如修改上面的padding-bottom的距离假如改成7px话是不是类名pb8也要改成pb7。 5.BEM块、元素、修饰符命名 .header {width: 300px;height: 400px;
}.header__item { font-size: 16px;
} .header--blue { background: #0066ff;
} 优点语义化可读性好渲染性能高。 缺点暂时没有发现。 6.BEM块、元素、修饰符驼峰式class命名 .header {width: 100%;height: 80px;
}
.header-item {font-size16pc;
}
.header-isShow {display: block;
} 优点类似于BEM风格无需区分下划线还是是中横线可读性好渲染性能高。 缺点暂时没有发现。 PS:具体问题具体分析合理的命名css有利于提高开发效率便于版本迭代。转载于:https://www.cnblogs.com/Sroot/p/7534980.html
