偶是一名前端，看了这个问题并且看了你说的这篇文章，偶来说说偶的观点！
首先大家谈谈CSS的类名语义化，偶个人觉得这就是一个命名规范的问题！
如上图，这是一个普通的页面，大家可以根据页面的功能划分为header、nav、list、footer这个四个部分，然后再对细节部分做划分！如果你对CSS做了模块化，可以这样命名class：
header-x1-x2
nav-x1-x2
list-x1-x2
footer-x1-x2
文件夹有几级，名字可以用横线拼接，当然也可以是驼峰法！
这样的好处非常明显，维护方便，查找样式更方便，但是看见‘语义化’这三个字你就应该感觉到它很业务，它可以快速适应业务迭代，对于新人的学习成本非常小，大家在浏览器中一眼就能识别这个样式在哪个文件中，根本无需sourceMap！
再来说说你说的这篇文章Challenging CSS Best Practices，直接用文中例子：
特点很明显，对样式的作用切割的很细致，几乎一个类名包含一个样式，而且命名也是根据样式的作用来取的！这样的优点是：复用性强，冗余代码非常少，类名很少发生级联！
对比两种开发css规范（已经超出了类名的命名规范的范畴），你可以发现：
1、语义化适用于很业务的场景，开发者无论新人还是老人都能信手拈来，开发成本和维护成本小，但是一个class具体包含的样式呈现不受控制
2、对于UI框架和组件类的模板很适用于第二种方案，但是对开发者的能力要求会更高，可能开发前要制定各种各样的base class，而且还要牢记于心
一句话，还是要看自己的业务场景进行技术选型！
喜欢偶的回答就关注偶吧，有问题可以发表评论，大家一起学习，共同成长！
css 颜色动画，圆css切角，css显示隐藏效果，css色修精华掉色，利用DOM和CSS结合，css加一个边框，css虚化滤镜