CSS样式分离之再分离达到精简与重用

2024-07-11 08:29:06

字体：大中小

来源：转载

供稿：网友

一、关于CSS样式分离
zxx://一些名词表意含有自己的理解成分，或许与您的理解有偏差，希望不要拘泥于措辞。
无论是CSS的分离还是js的分离，其主要作用之一就是精简与重用。
CSS本身就代表着精简与重用。例如我们可以设置一个如下的样式：
.example{color:red;}所有想让文字显示红色的标签都可以应用这个样式，这比10年前使用font标签，将color样式写在font标签上（尤其标签多时）要精简很多代码，代码可读性也更佳。
CSS样式分离，我一般指的是“以单独的CSS文件将CSS样式分离出来”，此处的重用多针对不同页面的重用，就是说，一个样式文件，可以多个页面使用，这对于一些公共样式的重构是很有用的。当然，对于一些重要的页面，例如淘宝首页，直接将CSS嵌在了页面头部，其降低链接请求的重要性要大于样式的重用。
以上估计大家都是很熟悉与常用的，我一般不会拿一些众所周知的白蜡拿来嚼的。本文会展示一些新的东西，关于CSS样式分离再分离。本文核心不在于展示如果分离，而是传达一种“库”与“CSS高度重用”的概念，同时也是为后面的文章“我是如何对项目CSS进行架构”做铺垫的。

二、CSS样式分离之再分离
“CSS样式分离之再分离”表型上的两个特点为“分离”和“命名”，掌握与理解其深层次思想的关键是思维方式的转变，这包括“CSS库概念”意识。举个例子吧，依照现在主流的写法，下截图所示的灰色背景的框框命名与样式可能如下：
pic

复制代码

代码如下:
.topic_edit_box{display:inline-block; border:1px solid #ddd; background:#f7f7f7; padding:20px 40px;}

如果您有强烈的分离意识，尤其在大型的项目中，这段样式可能会是这个样子（注意命名）：

复制代码

代码如下:
.dib{display:inline-block;}
.bdd border:1px solid #ddd;}
.bgf7{background:#f7f7f7;}
.p20_40{padding:20px 40px;}

字面上很容易理解，就是把这段样式分离成一个一个单独的样式。当然，这只是表象，要想让样式再分离发挥其最大的功效，对其精髓思想有着较为深入的理解是很必须的，否则，您可能会用的很痛苦，或是滥用而产生其他一些问题。

三、样式分离再分离精简作用的理论基础
高中时学习马克思主义哲学，记得有部分是关于理论与实践的，“理论指导实践”，这句话对我影响很大。在我看来，任何一门学问，要想做到一定的高度，必须有一定的理论基础，这个理论可以在别人看来或是100年后看来是错误的，只要能在当下解释清楚，自圆其说，这就是优秀的理论。即使是做技术也是如此，我现在总是会从哲学中找到与现在所从事的技术所相同的地方，并将之归纳，以自己一套理论解释它，当然，这个理论不是凭空而来，而是在其他一些理论基础上建立起来的，例如，中国古代的那些传承千年的哲学观。

上一篇：CSS的样式合并与模块化提高代码执行效率

下一篇：css 垂直对齐 css中vertical-align属性(垂直对齐)的使用说明