为什么连字符( - )分隔的类名在CSS中被广泛使用

虽然经历了一些网站和一些其他广泛使用的插件和框架所包含的一些CSS文件,但发现他们广泛使用连字符分隔的单词作为类名.实际上使用这样的类名有什么好处.

例如:在jquery UI CSS中,

.ui-helper-reset {

    // CSS properties here...

}

Roko C. Bulj.. 37

可读性:

ui-helper-reset可读,
uiHelperReset不可读.

安全分隔符:

当使用属性选择器时,[class^="md-"], [class*=" md-"]要特别安全地定位特定的类名样式,以防止:.mdSomething成为目标.

便于使用:

在每个体面的文本编辑器中,如果您使用-单独的组合类名称,您可以通过双击它来轻松突出显示所需的部分:col --3,并将其替换(甚至全局文档)到col --3.另一方面,如果你使用像class_name_here这样的下划线,如果你双击它,你最终会突出显示整个类名,如:.这样会强制您手动拖动选择所需的部分.mdsm _class_name_here

CSS命名约定方法

您可以采用CSS命名概念,如:

SUIT CSS

BEM(块,元素,修饰符),

OOCSS(面向对象的CSS)

SMACSS(CSS的可扩展和模块化架构)

原子CSS

... 你自己的概念 CSS :)

他们都通过采用更严格的"命名事物"来帮助团队说"同一种语言",例如:

SUIT CSS

/* Block */
.Chat{}

/* -element (child) */
.Chat-message{} 

/* --modifier */
.Chat-message--me{}   /* Style my messages differently from other messages */

/* .is-state */
.Chat.is-active{}     /* Multiple chats - active state handled by JS */

/* block */
.chat{}

/* __element (child) */
.chat__message{} 

/* --modifier */
.chat__message--me{}   /* Style my messages differently from other messages */
.chat--js-active{}     /* Multiple chats - active state handled by JS */

.Chat {
  font: 14px/1.4 sans-serif;
  position: relative;
  overflow-y: scroll;
  width: 300px;
  height: 360px;

  &-message {                 // refers to .Chat-message
    padding: 16px;
    background: #eee;

    &--me {                   // refers to .Chat-message--me
      background: #eef;       // Style my messages differently from other messages */
      text-align: right;
    }
  }

  &.is-active {               // refers to .Chat.is-active (JS)
    outline: 3px solid lightblue;
  }
}