工作的时候该怎么样写CSS？

我们已经知道

编程有两类不同的工作：一类是机械性的，把比较清晰的行为逻辑翻译成代码；另一类是创造性的，给你的信息是不足的，需要发挥创造力，补上不足的部分，完成整个项目。它可以包含难易程度各自不同的很多内容：1. 根据接口设计算法2. 根据功能设计相配合的接口和数据结构3. 设计容纳现有功能及未来扩展的软件框架4. 设计能达到预定目标、满足用户需求同时开发成本最小的的功能

所以说 如果说你写CSS的时候得到的信息跟写业务逻辑一样清楚，比如说：整个页面有三个框，采用浮动布局，左边和右边固定200px，最小高度是100vh，内容是中间框的子节点，padding是10px……那你也会觉得写CSS很容易，就是翻译一下嘛。问题在于写CSS的时候给的并不是这种清晰的描述，而是只有整个东西长什么样，至于具体每个元素如何排布、使用怎样的布局方式、如何设计选择器，都是需要自己精心设计的，自然就显得难了。
但是我们为什么不能设计一种程序，给出样式 直接翻译成CSS呢？
很多人以为CSS是给DOM元素设置属性（attribute），其实CSS规定的并不是属性，而是行为（behavior），DOM里的每个元素都可以看成是一个独立的物体，按照CSS规定的方式运动，最后稳定下来的结果就是最终布局的结果。所以高票答案说CSS不正交，它当然不是正交的，因为它的设计就是要求协变，要求在其他元素做出调整的时候，即便本元素的样式没有发生任何变化，也可以跟着调整位置和大小，以适应新的内容，维持设计风格。
为什么CSS要设计成基于选择器和多种各异的behavior，而不像其他框架那样直接将显示样式绑定到每个元素呢？恰恰是因为正交性，因为CSS和DOM是正交的，这样DOM内容变化时，CSS可以规定一组不变的特性，从而以灵活的方式适应内容的改变。传统的GUI通常每个元素都有固定的位置和大小，要实现根据内容动态调整，就必须针对各种情况（如视口大小改变，内容改变）专门编写代码；WPF则有网格、流式、绝对三种不同的定位方式，与CSS有不少共同点，但是自适应的功能少了不少，也没有选择器的功能，这样动态生成的内容就需要更多的代码来调整。而CSS只要将DOM组织成特定的格式，就会自动启用相应的样式。WPF制作的界面毕竟变化比较少，大部分元素仍然是固定的，而网页通常要求更高的灵活性。

-看不懂这一团浆糊在讲什么吧？真的想骂CSS的发明者就是一坨狗屎。
这就是为什么他们付大价钱。