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结构正确, primarysecondary不应该与您的应用程序上的其他任何东西冲突:

 .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

Twitter使用SUIT CSS:

https://github.com/suitcss/suit/blob/master/doc/README.md

同样的作者也写了习语CSS:

https://github.com/necolas/idiomatic-css