转载请联系唯一大学前端技术公众号。写在前面，开头问大家一个问题：前端三剑客是谁？不用说，大多数前端开发都会脱口而出：HTML、CSS和JavaScript。如果你还需要为此犹豫，朋友们，到角落里反省一下自己[手动狗头]。既然叫三剑客，就说明这三位在前端开发中起到了举足轻重的作用。HTML负责构建页面结构，CSS负责页面的布局和美化，JS负责赋予静态页面动态逻辑。从这一点来看，三者还真是缺一不可。然而随着业务需求的紧迫，我们往往达不到“连雨露”，有意无意地忽略了某个作用——CSS。就像我自己一样，在日常的业务开发中，往往关注的是HTML结构和JS逻辑，对CSS的漠不关心要少得多。这样做的后果是，当页面交互丰富，样式多样的时候，我们写的CSS代码行数多得吓人，再也不想看了。用高情商的话来说，我们写的CSS代码让后续开发者维护起来非常有挑战性。静下心来仔细分析原因，发现主要是因为样式代码的稳定性高。CSS写完一次，以后基本不可能再修改了。这种“一次性”，很难不让人带着一点傻逼的“心态”去开发，然后留下烂摊子让后面的同事骂。但！神转世！如果你需要修改别人写的CSS样式，那么这就是一场噩梦？？。很难不让人改变对人生的怀疑，最后选择重写（呜呼，别骂了，别骂了）！遇到这种情况后，我意识到我们需要从整体的角度来指导CSS的编写，让样式文件变得更加美观！这也是我写这篇文章的初衷。1.CSS和美学??审美是主观的，受文化背景、知识体系、性格爱好等多种因素的影响。作为前端开发者，我们在编程领域经常会和美学打交道。有时候我们经常说某段代码写的垃圾，看了半天也看不懂。某大佬写的代码无敌，逻辑清晰。这些对代码的评价是我们审美认知的体现。??CSS的存在就是为了让页面美观，如下动图所示：我想每个用户都比较喜欢在上面的动画中加入CSS文件后的页面，因为它符合人的审美。既然CSS可以让页面变得更漂亮，那我们就应该为CSS本身而变得更漂亮！二、什么样的CSS受欢迎？？？我们之前已经找到了我们的目的：让CSS更漂亮！那么好看的目的是什么？就是为了让人喜欢。让我们在开发需求的时候不要抗拒修改原来的代码。那么这就引出了一个问题：什么样的代码让人抗拒修改？我们来看下面两段CSS代码：个人感觉，第一眼左边的代码“挤”在一起，显得杂乱无章。右边的代码更清晰，每一块之间都有空行，让人感觉更舒服。那么问题来了，为什么右边的代码让我看起来更舒服呢？仔细比较了两段代码的区别后，我找到了答案：每段代码之间的间隔是有序的，以免给人一种极其庞大的概念。层级控制不超过3层，避免层级嵌套过多“恶心”人们遵循BEM命名约定，潜在传达元素之间的层级关系？？总结一下：将代码的逻辑关注点分成多个小块，开发人员可以轻松消化这些小块，同时仍然不言自明。这样的处理降低了人脑处理这些代码逻辑的难度，自然会给人一种舒服的感觉！那么下面再深入思考一下，抽象出CSS的书写原理。3.CSS的一些书写原则??CSS本身没有内置的组织方式，有内联、外链等多种写法。所以我们需要自己动手，在写CSS的时候保持统一性和规律性。Web社区中已经存在各种工具和方法来帮助开发人员管理大型CSS项目。我们可以借鉴和适应我们自己的写作方式。不过在此之前，我们需要明确几个CSS的书写原则。少即是多不言自明可重复使用？？以上3条原则是我自己在开发过程中总结出来的。如果你有更多想法??，欢迎与我讨论。先说第一个原则：少即是多（Lessismore）。这句话的英文版是建筑师vanderRohe在建筑领域提出的一个观点。他反对存在于机械化产品中的繁琐和毫无意义的装饰。这同样适用于编写CSS。前端三剑客中，HTML是结构，JS是行为，CSS是表现。换句话说，CSS的工作就是装饰页面。在此前提下，去掉那些冗余复杂的CSS代码，不仅可以降低浏览器的性能消耗，还可以让开发者更深入地思考性能与结构的关系。我觉得这对于前端开发工程师的思维成长是有帮助的。//有冗余代码.footer{margin-top:30px;margin-bottom:20px;}//Optimization.footer{margin:30px020px0;}以上代码是lessismore最简单的做法，但不限于此.我们需要整体思考和实践。那么该怎么做呢？没有它，却手到擒来。所以我们每次开发的时候，一定要记住我们的口号：“NeverwriteextralineofCSS!”。self-explanation的第二条原则，就是CSS的编写要尽量解释自己做了什么，减少额外的注释代码。//有歧义.footer:first-child{color:#FFF;font-size:18px;}//.footer-title{color:#FFF;font-size:18px;}上面的代码解释了这个元素purpose是关于页脚部分标题的文本。这样我们就可以方便的定位到相应的html元素来修改样式。对于这个原则的实现，社区已经有了非常完善的解决方案：BEM命名。这套规范不仅避免了不同文件下的命名冲突，还赋予了CSS类名语义。让我们头脑中对CSS的模糊印象变得清晰。
