|
网站CSS进行架构策略 文章内容
网站CSS进行架构策略 zxx://一些名词表意含有自己的理解成分,或许与您的理解有偏差,希望不要拘泥于措辞。 无论是CSS的分离还是js的分离,其主要作用之一就是精简与重用。 CSS本身就代表着精简与重用。例如我们可以设置一个如下的样式: .example{color:red;} 所有想让文字显示红色的标签都可以应用这个样式,这比10年前使用font标签,将color样式写在font标签上(尤其标签多时)要精简很多代码,代码可读性也更佳。 CSS样式分离,我一般指的是“以单独的CSS文件将CSS样式分离出来”,此处的重用多针对不同页面的重用,就是说,一个样式文件,可以多个页面使用,这对于一些公共样式的重构是很有用的。当然,对于一些重要的页面,例如淘宝首页,直接将CSS嵌在了页面头部,其降低链接请求的重要性要大于样式的重用。 以上估计大家都是很熟悉与常用的,我一般不会拿一些众所周知的白蜡拿来嚼的。本文会展示一些新的东西,关于CSS样式分离再分离。本文核心不在于展示如果分离,而是传达一种“库”与“CSS高度重用”的概念,同时也是为后面的文章“我是如何对项目CSS进行架构”做铺垫的。 二、CSS样式分离之再分离 “CSS样式分离之再分离”表型上的两个特点为“分离”和“命名”,掌握与理解其深层次思想的关键是思维方式的转变,这包括“CSS库概念”意识。举个例子吧,依照现在主流的写法,下截图所示的灰色背景的框框命名与样式可能如下:
.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;} 字面上很容易理解,就是把这段样式分离成一个一个单独的样式。当然,这只是表象,要想让样式再分离发挥其最大的功效,对其精髓思想有着较为深入的理解是很必须的,否则,您可能会用的很痛苦,或是滥用而产生其他一些问题。 |