CSS类的命名约定
在网页上，有两个控件块（主要和次要），大多数人使用什么类名？
select1：
<div class="primary controls"> <button type="button">Create</button> </div> <div class="secondary controls"> <button type="button">Edit</button> <button type="button">Remove</button> </div> select2：
<div class="primary-controls controls"> <button type="button">Create</button> </div> <div class="secondary-controls controls"> <button type="button">Edit</button> <button type="button">Remove</button> </div>
这个问题的直接答案是正确的 ，Curt。
如果您对css类命名约定感兴趣，我build议考虑一个非常有用的约定BEM（块，元素，修饰符）。
UPD。 请在这里阅读更多关于它 – http://getbem.com/naming/ – 这是一个新的版本，使以下答案过时。
主要原则：
-
一个页面由独立的块构build而成。 Block是一个html元素，其类名有一个“b-”前缀，比如“b-page”或“b-login-block”或“b-controls”。
-
所有的CSSselect器都基于块。 不应该有任何不是以“b-”开头的select器。
好：
.b-controls .super-control { ... }
坏：
.super-control { ... }
- 如果您需要另一个块（在另一个页面上），您可能需要添加一个修改器，而不是创build一个新块。
例：
<div class="b-controls"> <div class="super-control"></div> <div class="really-awesome-control"></div> </div>
修改器：
<div class="b-controls mega"> <!-- this is the modifier --> <div class="super-control"></div> <div class="really-awesome-control"></div> </div>
那么你可以在css中指定任何修改：
.b-controls { font: 14px Tahoma; } .b-controls .super-control { width: 100px; } /* Modified block */ .b-controls.mega { font: 20px Supermegafont; } .b-controls.mega .super-control { width: 300px; }
如果您有任何问题，我很乐意与您讨论。 我已经使用BEM两年了，我声称这是我见过的最好的约定。
我会去：
<div class="controls primary"> <button type="button">Create</button> </div> <div class="controls secondary"> <button type="button">Edit</button> <button type="button">Remove</button> </div>
只要您的CSS结构正确， primary和secondary不应该与您的应用程序上的其他任何东西冲突：
.controls.primary {}
注意我也把controls放在代码的primary / secondary之前，因为这是你的主要类。
我认为下面的第一组比第二组更可读：
.controls.primary {} .controls.secondary {} .primary.controls {} .secondary.controls {}
有一个很好的select叫做NCSS 。
命名级联样式表是语义CSS的命名约定和准则。
为什么：
大规模的CSS曾经是一个噩梦，而与不同types的开发人员的项目工作。 缺乏公约和准则将导致难以维持的泥球。
目标：
CSS的可预测语法，提供有关HTML模板的语义信息。
- 哪些标签，组件和部分受到影响
- 什么是一个阶级与另一个阶级的关系
类别：
命名级联样式表分为：
- 命名空间
- 结构类
- 组件类
- types类
- 修饰符类
- function类
- 例外
进一步阅读： https : //ncss.io/documentation/classes
例子：
<!-- header --> <header id="header" class="foo-header"> <h1 class="foo-title-header">Website</h1> </header> <!-- main --> <main class="foo-main foo-wrapper"> <!-- content --> <article id="content" class="foo-content"> <h2 class="foo-title-content">Headline</h2> <div class="foo-box-content">Box</div> </article> <!-- sidebar --> <aside id="sidebar" class="foo-sidebar"> <h3 class="foo-title-sidebar">Headline</h3> <p class="foo-text-sidebar">Text</p> </aside> </main> <!-- footer --> <footer id="footer" class="foo-footer"> <div class="foo-box-footer">Powered by NCSS</div> </footer>
进一步阅读： https : //ncss.io/documentation/examples
工具：
安装：
npm install ncss-linter
validationHTMLstring：
bin/ncss-linter --html='<div class="box-content"></div>'
validation本地path：
bin/ncss-linter --path=templates/**/*.html --namespace=foo
validation远程URL：
bin/ncss-linter --url=https://redaxmedia.com --namespace=rs --loglevel=info
进一步阅读： https : //ncss.io/documentation/tools
