css的命名方法有哪些
下面是一些命名规范,可以为您节省一些压力和时间。
使用连字符’-'分隔字符串
如果你写了很多JavaScript,那么驼峰式编写变量就是常见的做法。
var redBox = document.getElementById('...')
看起来还不错。
问题是这种命名形式不适合CSS。
Do not do this:
.redBox { border: 1px solid red; }
Instead, do this:
.red-box { border: 1px solid red; }
这是一个非常标准的CSS命名规范。可以说它更具有可读性。
并且,它与CSS属性名称一致。
// Correct .some-class { font-weight: 10em } // Wrong .some-class { fontWeight: 10em }
BEM命名规范
每个团队有不同的方法来编写CSS选择器。有些团队使用连字符分隔符,而另一些团队则更喜欢使用名为BEM的结构化命名规范。
通常来讲,CSS命名约定试图解决3个问题:
想知道选择器的作用,只需查看其名称即可。
想了解选择器的使用位置,只需查看它即可。
想了解类名之间的关系,只需查看它们即可。
你有没有见过这样的类名:
.nav--secondary { ... } .nav__header { ... }
这就是BEM命名规范。
就我个人而言,对于简单的项目仅适用连字符分隔符类名称就可以,而对于更多页面则适用BEM。
更多CSS相关技术文章,请访问CSS3答疑栏目进行学习!
以上就是css的命名方法有哪些的详细内容,更多请关注易知道|edz.cc其它相关文章!