面向属性的CSS命名
2024-10-18
来源：威能网
使用这个方法的最大前提就是没有必要起名字，并且能够用组合的单一属性来描述的内容，就可以这种方法来加速页面布局的工作。像前面应用实践介绍过的那种情形一样，当你需要配合伪类，伪元素或者背景图片的时候，就不太适合用这种方法。
在面向属性的命名方法不能使用的时候，有另外两种css的命名或者说组织方式可以使用：
1）语义化的命名，在整个页面，语义化的css命名还是不可获缺的一部分，尤其是那些划分页面模块的，比如.header .footer .logo等等，抽象公共样式或者公共组件的，如.dropdown，.btn，.tab等等。这些是css模块化，代码重用的比较大的组织单位，如果把它们也拆分了，会使得整个站点的css结构非常的复杂，那样的话还不如直接用style呢；
2）采用层级来命名，而且要多用直接子元素选择器，虽然在张鑫旭的博客中不建议css有层级，但是有的时候如果不想命名，又无法用面向属性的命名方法来解决的设计，可以考虑用层级来解决，在bootstrap的源码中很多的css组件，比如nav，dropdown,tab等等，都是通过层级来控制的，一来是起到命名空间的作用，二来是减少对层数较深的子孙元素产生影响。但是层数也不能太深，最好不要超过3层，否则html结构变化之后，就会影响css代码的结构。
本文总结
本文主要是传播面向属性的css命名方法这种思想，由于它在我实际工作中帮助我减少了很多不必要的css命名，所以我专门写了这篇文章把它分享出来。这个里面也包含了很多自己在工作中产生的想法，不一定符合你自己的实际需求，要是感兴趣的话，可以去研究下张鑫旭的那2篇文章，相信你自己也能够总结出一些属于自己的东西。感谢阅读：）
显示全文