Css技巧：模块化编码
原生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编码一般是为1~4定义四个类名，为他们写各自的样式; 明智一点的写法是为1~4定义四个类名， 用.a .b .c .d{…}方式定义共同样式， 然后再为各自定义不同部分的样式; 但是， 还有一种完美的方式， 那便是模块化。 下面我就以上图为例做个简单的模块化分析。
第一步， 分析整个视觉共用部分。 可以看出，1~4中，标题背景，标题文字，内容文字这三个部分的样式都是相同的， 所以， 我们可以为这个四个区块定义一个类名， 将共同的样式写给这个类名：
|
... |
第二步， 分析出不同部分， 并权衡高效使用。 可以看出， 不同部分， 主要是内容背景色和区块宽度两部分。 先说背景色， 背景色有三种， 淡黄（1个）， 白色（2个）， 灰色（1个）， 遵从”模块与模块之间尽量不要包含相同的部分， 若有相同部分就再拆出来独立成一个模块”的原则， 我们要把2个白底的样式提出来， 另两个单独定义， 而根据Css优先原则， 我们可以把白底默认定义到第一步中的box样式中， 另两种背景色可做重定义处理。 再来看看宽度与定位， 2，4宽度等同且都右浮动， 所以， 我们可以把这部分提出来模块化， 而浮动一般可以直接调用通用原子类， 所以， 我们仅仅需要定义一个宽度样式中（若这个宽度在通用原子类中也有就更好了）。 如此以来， Html可以这样写：
|
... |
或许， 这样的结构对Html页面来说， 会显的有些臃肿， 但Css文件因为重用性的提高而大大的减小了。
Css模块化是一个比较实用但也需要去领悟的思想， 实际使用中也需要全面的分析， 过多的模块也会导致维护性的降低， 如同OOP编程一样， 我们也要考虑”公有属性”与”私有属性”。
本文通过一个简单的例子解析了Css模块化的基本思想， 更多关于Css模块化的知识， 可以看YUI Css或者其他网络上的资源。
do write， less more…Css也可以做到。
附： 阿当《Web前端开发修炼之道》一书中分享的通用原子类：
|
/*文字排版*/ |
转载于:https://www.cnblogs.com/baogg/articles/1951207.html
Css技巧：模块化编码相关推荐
- 你应该知道的25个非常有用的CSS技巧
在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼容性的问题, CSS网页布局,说难,其实很简单.说它容易,往往有很多问题困扰着新手,在中介绍了非常多的技巧,这些小技巧与知 ...
- 学无止境的CSS(xHTML+CSS技巧教程资源大全)
本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要 ...
- 【经典】CSS技巧教程资源大全
一,Web 标准 要玩游戏,就得先了解规则.要学CSS,就应该先了解一下Web标准.尽管看上去不是必须的(我在学CSS之前,根本不知道也不想知道Web标准是 个啥玩意儿).应该说,你是否学Web标准, ...
- 60+CSS技巧教程资源大全
一,Web 标准 要玩游戏,就得先了解规则.要学CSS,就应该先了解一下Web标准.尽管看上去不是必须的(我在学CSS之前,根本不知道也不想知道Web标准是个啥玩意儿).应该说,你是否学Web标准,跟 ...
- 面试技巧篇 -- 编码风格 (Coding Style)
面试技巧篇 – 编码风格 (Coding Style) Coding Style 在面试中有什么影响? 算法面试已经是绝大多数high-tech公司的敲门砖,这也导致了求职者花费大量时间准备算法刷题, ...
- 常用的一些 CSS 技巧二 — 选择器（伪类与伪元素）
你可以看看其他常用的 CSS 技巧: 常用的一些 CSS 技巧一 常用的一些 CSS 技巧三 CSS 重置盒模型 *, *::before, *::after {box-sizing: border- ...
- VUE学习(二十一)、Vuex（getters、mapState与mapGetters、mapMutations与mapActions、多组件共享数据、模块化编码）
VUE学习(二十一).Vuex(getters.mapState与mapGetters.mapMutations与mapActions.多组件共享数据.模块化编码) 一.Vuex普通实现求和案例 演示 ...
- [css] 举例说明你知道的css技巧有哪些？
[css] 举例说明你知道的css技巧有哪些? /* 等比例容器 */ .ratio { position: relative; display: block; } .ratio:before { c ...
- JS~~~ 前端开发一些常用技巧 模块化结构 命名空间处理 奇技淫巧！！！！！！...
前端开发一些常用技巧 模块化结构 &&&&& 命名空间处理 奇技淫巧!!!!!!2016-09-29 17 ...
- css label 居中布局_用好这20个css技巧快速提升你的CSS技能
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 随着前端开发越来越关注效率:通过选择器的使用和简化代码来快速加载渲染.像Less.SCSS这样的预处理器在工作的时候,需要 ...
最新文章
- 2018.90.20列表
- 流水线经典讲解！！！！！
- ARM处理器的工作状态
- 数据结构火车订票系统C语言课程设计,求助一个数据结构C语言课程设计源代码订票系统^:^!...
- LINUX下直接使用ISO文件
- 有一个包含主函数的java类_重新认识Java中的程序入口即主函数各组成部分
- 《Hadoop大明白》【1】Hadoop的核心组件
- 可持久化汇总(讲解+题目)
- mysql 在线日期_mysql，由 时间点求时间段的问题，在线时间率
- cdr自动排版插件_CDR ymxkDoc插件 支持X72020到以后版本
- React 入门与实战-课时7 虚拟DOM的本质和目的
- exchange2003系列总结：-5邮件加密与签名的工作流程
- windows10安装ninja过程记录
- 奥运期间证券期货业网络与信息安全突发事件应急预案（一）
- C语言：快速排序（详解）
- ECCV 2022最佳论文奖公布！两位华人学者摘得桂冠！本科来自清华、浙大
- 7-45 航空公司 VIP 客户查询（25 分）
- 2021年危险化学品生产单位安全生产管理人员考试内容及危险化学品生产单位安全生产管理人员试题及解析
- 《Java并发编程的艺术》——Java并发的前置知识（笔记）
- 论文推荐-计算机视觉