[分享]css中class命名中空格

在CSS中，我们经常会使用class来为HTML元素设置样式。但是在给class命名时，有些人可能会用空格来区分不同的元素，比如“navbar menu”。这种做法常常会引发一些问题。.navbar ...

在CSS中，我们经常会使用class来为HTML元素设置样式。但是在给class命名时，有些人可能会用空格来区分不同的元素，比如“navbar menu”。这种做法常常会引发一些问题。

.navbar menu {
    /* CSS样式 */
} 

问题之一是，空格会被解释为层级结构，这可能会带来一些不必要的麻烦。比如上面的代码中，我们实际上想要为一个导航栏菜单设置样式，但是由于class里有空格，浏览器会把它解释为“navbar下的menu”，这与我们的意图不符。

另一个问题是，使用空格的class命名在CSS选择器中需要用到“”转义，这让代码显得更加复杂和难以阅读。

为了解决这些问题，我们可以考虑使用连字符（-）或下划线（_）来代替空格。这样做不仅可以避免解释问题，还可以让代码更加简洁和易读。

.navbar-menu {
    /* CSS样式 */
} 

总之，虽然在class命名中使用空格在某些情况下看起来更加直观，但是这样做可能会带来一些问题。为了使代码更加清晰、简洁和易读，我们应该尽量避免使用空格，并使用连字符或下划线来区分不同的元素。