html项目起名技巧,css的命名方法有哪些

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答疑栏目进行学习！