首页 >> 公司动态 >>品牌网站建设 >> 网站CSS进行架构策略
详细内容

网站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;}

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


友情链接:

版权所有2016-2018 深圳市诚信共赢科技有限公司 粤ICP备14102192号-2号 
公司主营:深圳网站建设   深圳网站推广  深圳网络推广

联系我们

全国服务热线:150-1341-6546

在线客服

用户留言

联系我们

全国服务热线:150-1341-6546

在线客服

版权所有  深圳市诚信共赢科技有限公司 粤ICP备14102192号
公司主营:深圳网站建设   深圳网站推广  深圳网络推广

友情链接:

客服中心
联系方式
15013416546
- 网站建设咨询
- SEO推广咨询
- 抖音短视频推广
- 百度竞价包年
扫一扫,关注微信
seo seo