大佬教程收集整理的这篇文章主要介绍了CSS类命名约定,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
选择1:
<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>
选择2:
<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>
如果你对css类命名约定感兴趣,我建议考虑一个非常有用的约定名为BEM(Block,Element,Modifier)。
UPD。请在这里阅读更多 – http://getbem.com/naming/ – 这是一个更新的版本,使以下回答过时。
主要原则:
>页面由独立的块构成。 Block是一个html元素,其类名具有“b-”前缀,例如“b-page”或“b-login-block”或“b-controls”。
>所有css选择器都基于块。不应该有任何不以“b-”开头的选择器。
好:
.b-controls .super-control { ... }
坏:
.super-control { ... }
>如果你需要另一个块(在另一个页面上)类似于你已经拥有的块,你应该添加一个修饰符到你的块,而不是创建一个新的。
<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两年,我声称这是我见过的最好的约会。
以上是大佬教程为你收集整理的CSS类命名约定全部内容,希望文章能够帮你解决CSS类命名约定所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。