在命名css选择器时使用大写,短划线或下划线

Question

命名CSS选择器时的最佳实践是什么？

SomeContainerContent
some_container_content
some-container-content

我在这里读到了关于堆栈溢出的其他类似问题,但答案中没有一致的共识.我想知道是否有其他人有更多要补充.

Answer 1

一般的想法是使用连字符.事实上,其他选项存在潜在的兼容性问题.

• 某些(授权的,旧的,NS4类型)浏览器中的类名或ID中不允许使用下划线.
• CSS规范没有规定浏览器应该如何处理大小写,因此使用camelCase会使一个开放的模糊解释.

另外,CSS在内部使用连字符first-child.

虽然兼容性问题在现代浏览器中通常不是问题,但这就是标准的出现,我建议坚持使用它.如果你偏离你会好的,但为什么要这么做？

Answer 2

.hyphens-for-multi-word-names
.underscores_for_pseudo_namespacing

结果是:

.grid-system_push-100
 \_________/ \______/
  namespace   object

命名空间和对象可以很容易地用于某种BEM实现.

.grid-slot { }          /* block */

.grid-slot_size-100 { } /* block-specific modifier */

._size-100              /* generic modifier */

我的0.02美元