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

Question

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

例如:在jquery UI CSS中,

.ui-helper-reset {

    // CSS properties here...

}

Answer 1

可读性:

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 */

要么

BEM:

/* 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是你正在浏览的页面的一部分,你可以使用像.btn和Modifier .btn--big这样的常规Block类<a class="btn btn--big">Post</a>,否则如果你的按钮需要一个特定于你的聊天应用程序的更严格的样式而不是你使用.chat__btn和.chat__btn--big类.这些类名也可以进行预处理.

SCSS

即:通过使用Sass,CSS3 sintax 的超集,您可以执行以下操作:

_{(使用SUIT CSS的示例)}

.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;
  }
}

结论:

在团队中采用更严格的命名格式非常重要.防止并最大限度地减少HTML遗留的遗留类,有助于代码的可重用性,可读性和加速工作流程.此外,它迫使您以更加模块化的方式思考HTML结构 - 作为组件或原子.
无论你决定使用什么都取决于你 - 只是,保持一致.

Answer 2

这只是为了提高可读性的一种做法。一般来说，在 JavaScript 中不能有这样的变量，用于分隔符，就像-运算符一样。当您在 JavaScript 中需要分隔符时，您可以使用以下内容：

.ui_helper_reset //snake_case
.uiHelperReset //camelCase

通过这种方式，您可以区分一个用于 CSS，另一个用于 JavaScript。这是我的观点，但也可以应用于您的答案！:)