这方面的技术是我这几天刚好在w3cplus上看到的。之前我几乎没关注过这点，但看完后发现对我们编写高质量的css代码真的很有帮助。原文中，大漠老师已近讲得很清楚了，今天我们主要从菜鸡的角度去分析下。
先不解释SEM和BIO这两个看起来高大上的东西，不过是几种集中思想和规范的集合而已。
首先我们假设要编写一个button按钮，这在平时的开发中很常见吧。
<div class="btn">button</div>
.btn{
display: inline-block;
background-color: #00d6b2;
border-radius: 3px;
color: $black;
padding: 5px 10px;
}但如果一个页面中，还需要另个黄色的按钮呢，很多人觉得，这不很简单吗，
<div class="btn btn-yellow">button</div>.btn{
display: inline-block;
background-color: #00d6b2;
border-radius: 3px;
color: $black;
padding: 5px 10px;
}
.btn-yellow{
background-color: #ffee49;
}如果你们是这样写的，恭喜啊，已经体现了SEM思想中的E：extensible（可扩展的），意思就是说，在不破坏自身重新编码的情况下，方便的添加额外的样式，如颜色上：黄色按钮，样式上：圆形按钮，等等。
并且实现了BIO规范（如何编写代码）中的O：object oriented CSS（面试对象的CSS），意思就是以某个样式为基础类，其它样式在它的基础上做扩展示，就可以实现不同效果了。如以btn为基础类，而黄色按钮，btn--yellow就是在该基础上做的扩展了。
说到这是不是瞬间觉自己平时敲的代码原来这么有内涵，骚操作真不少啊。真是想多了哈，可能平时我们这样写过不少，但很少有那种思想和规范的意识的，可能是一次为了方便这样写，但下次就可能就是复制粘贴整段btn，然后加上一句background-color: #ffee49，而延伸到更广泛的应用，就更少了。所以很多时候我们要归纳和总结出思想和规范，并有所意识，这样才能使用得更加深入和长远。
以上所谓的SEM和BIO不过是很常见的编程思想添加到了CSS而已，而编程思想又是源于我们的实际生活，如面向对象，其实就是事物的封装和扩展。
比较简单的CSS编写，运用SEM的E和BIO的O就够了，个人觉得哈，而面临比较大的工程，可能公司也会给出相应的规范的，那时候再去深入了解也是可以的。所以分析就到这儿吧。
具体请参考：结合SEM和BIO来改进CSS
