CSS样式表中继承关系中的空格与不空格

admin

在一些大型的前端框架的css样式表中常常会看到有的有的css类后面有一个空格，有的css类后面没有空格，原因是框架为了复用css类，并不会产生代码的冲突，如SUI框架

Css部分:

1. .bar .button-nav.pull-left {
   
2.   margin-left: -.25rem;
   
3. }

复制代码

Html部分:

1. <div class="page">
   
2. <header class="bar bar-nav">
   
3.     <a class="button button-link button-nav pull-left" href="/demos/card" data-transition='slide-out'>
   
4.         <span class="icon icon-left"></span>
   
5.         返回
   
6.     </a>
   
7.     ...
   
8. </header>
   
9. ...
   
10. </div>

复制代码

其中bar类是作为上层元素出现的，多以在.bar后面加空格，代表他下面的子类；
而button-nav pull-left 是写在了同一个clss类中，所以这两个样式名之间没有空格
这样写的优点，会使样式更加精准，降低了样式起冲突的问题几率；

以上为个人理解。