当前位置:主页 > 文章技巧
Css技巧:模块化编码
日期:2017-05-30 浏览量:

原生Js因jQuery的”write less,do more”变得极简, Html因语义化编码变得简明, 那么, 有没有一种方式让Css也更加的高效精致呢? 当然有, 那便是模块化编码。

Css的模块化,我们可以理解成(抑或本身就是)OOP思想, 重用性、灵活性、可扩展性便是它终极的目标, “类”便是它的核心, OOP的多用组合少用继承一样是它的基本原则。 Css模块化是一个新颖高效的Css编码方式, 若有接触过YUI Css的朋友肯定对这种方式有所了解。

如何Css模块化, 我想这才是大家真正关心的。 我所理解的Css模块化, 应该从两大块去区分。

第一大块, 从整站全局模块化。 这一点大家并不陌生, 时常用到的reset css便是模块化的一部分, 全局通用的字体样式, 链接样式, 以及通用头部底部及主体容器等等这些我们已经熟知, 另外诸如定义文字排版(如.f12{font-size:12px})、定位(如.tl{text-align:left})、长度高度(如.w10{width:10px})、边距(如.m10{margin:10px})等页面中会常用到的样式,这一类,我们称之为Css通用原子类(哈,与类扯上关系了,那就权当成类吧)。通用原子类有两个特点: 通用性和原子性, 任何页面都可以随意使用它们, 且他们只表现最基础的样式, 一个通用原子类只设置一个样式,不可再分。 关于整站全局模块化不再详述, 本文后面我会贴出阿当的《Web前端开发修炼之道》 一书中常用通用原子类样式。

第二大块, 是从视觉效果上模块化, 在视觉上样式和功能相对独立稳定的部分即可视为模块。 拆分这些模块, 应该尽量遵循一个原则: 模块与模块之间尽量不要包含相同的部分, 若有相同部分就再拆出来独立成一个模块。

下图是我画的一个简易的页面视觉图:

Css技巧:模块化编码

看到上图, 菜鸟的Css编码一般是为1~4定义四个类名,为他们写各自的样式; 明智一点的写法是为1~4定义四个类名, 用.a .b .c .d{…}方式定义共同样式, 然后再为各自定义不同部分的样式; 但是, 还有一种完美的方式, 那便是模块化。 下面我就以上图为例做个简单的模块化分析。

第一步, 分析整个视觉共用部分。 可以看出,1~4中,标题背景,标题文字,内容文字这三个部分的样式都是相同的, 所以, 我们可以为这个四个区块定义一个类名, 将共同的样式写给这个类名:

...
<div class="box">
 <h2>倒霉松鼠再出山</h2>
 <p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
<div class="box">
 <h2>倒霉松鼠再出山</h2>
 <p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
<DIV class=box>
 <h2>倒霉松鼠再出山</h2>
 <p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
<div class="box">
 <h2>倒霉松鼠再出山</h2>
 <p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
...
</DIV>

 

第二步, 分析出不同部分, 并权衡高效使用。 可以看出, 不同部分, 主要是内容背景色和区块宽度两部分。 先说背景色, 背景色有三种, 淡黄(1个), 白色(2个), 灰色(1个), 遵从”模块与模块之间尽量不要包含相同的部分, 若有相同部分就再拆出来独立成一个模块”的原则, 我们要把2个白底的样式提出来, 另两个单独定义, 而根据Css优先原则, 我们可以把白底默认定义到第一步中的box样式中, 另两种背景色可做重定义处理。 再来看看宽度与定位, 2,4宽度等同且都右浮动, 所以, 我们可以把这部分提出来模块化, 而浮动一般可以直接调用通用原子类, 所以, 我们仅仅需要定义一个宽度样式中(若这个宽度在通用原子类中也有就更好了)。 如此以来, Html可以这样写:

...
<div class="box bg_y">
 <h2>倒霉松鼠再出山</h2>
 <p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
<div class="box fr right_w">
 <h2>倒霉松鼠再出山</h2>
 <p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
<div class="box">
 <h2>倒霉松鼠再出山</h2>
 <p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
<div class="box fr right_w bg_g">
 <h2>倒霉松鼠再出山</h2>
 <p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...</p>
</div>
...

 

或许, 这样的结构对Html页面来说, 会显的有些臃肿, 但Css文件因为重用性的提高而大大的减小了。

相关文章:
·水果别买PLU编码8开头的 买进口食品这些技巧要掌
·怎样导出高清视频 Xvid编码设置教程
·Win10卸载软件Skype错误代码2503的解决技巧
·调查显示美国半数高薪工作需要拥有的一种技能
·对建设项目投资项(或者成本项)信息进行编码
→ 特别推荐
水果别买PLU编码8开头
怎样导出高清视频
Win10卸载软件Skype错误
调查显示美国半数高
对建设项目投资项(
Docker社区核心成员D
《智能电视娱乐操控
栅格结构数据获取的
Css技巧:模块化编码
探秘最强大脑速成法
逆回购操作方法与技
矢量数据结构的编码
ffmpeg与H264编码 使用技
MYSQL数据库设计的一些
详解VB.NET动态编码技
→ 热点TOP10
[技巧]神秘代码
黑客技巧--深入
拉菲最新防伪
《纽约时报》
免费QQ空间五级
孙杨200米自由
观点有关硕士
总结ERP之供应
[技巧] 如何在
基于TMS320DM37

友情链接/网站合作咨询: