`
icybamboo
  • 浏览: 39903 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

淘宝栅栏布局模块化命名浅析(转)

阅读更多

折腾,之前的数据几乎全部丢失掉了,学习、记笔记需要动力和时间的,在此恢复2009-05-07一篇文章记录,勉励一下自己,以下是全文,当然我会对之前的一些链接及文字做出调整。现在看来还好我当时加上了浅析二字..

这是总宽950像素的24栏栅格应用,先来看下淘宝网的一处3栏布局(当然现在的淘宝网已经改版了,尽管我还是不太习惯):

这里是对应的代码:

我们可以看到 class=”grid-c3-s5e7″ 这个命名似乎有些特别,
再看看其包含的class=”col-main” 和 class=”col-sub” 以及 class=”col-extra skin-orange”

再多一些样本代码:

.grid-c, .grid-c2-s4, .grid-c2-s4f, .grid-c2, .grid-c2f, .grid-c2-s6, .grid-c2-s6f, .grid-c2-s7, .grid-c2-s7f, .grid-c2-s8, .grid-c2-s8f, .grid-c2-s9, .grid-c2-s9f, .grid-c2-s10, .grid-c2-s10f, .grid-c2-s11, .grid-c2-s11f, .grid-c2-s12, .grid-c2-s12f, .grid-c3, .grid-c3f, .grid-c3e, .grid-c3d, .grid-c3c, .grid-c3b, .grid-c3-s5e7, .grid-c3-s5e7f, .grid-c3-s5e7e, .grid-c3-s5e7d, .grid-c3-s5e7c, .grid-c3-s5e7b, .grid-c3-s9e6, .grid-c3-s9e6f, .grid-c3-s9e6e, .grid-c3-s9e6d, .grid-c3-s9e6c, .grid-c3-s9e6b, .grid-c3-s8e8, .main-wrap, .col-sub, .col-extra {
}

我们选择其中一个来仔细看下可以尝试着作出这样的解释:

上图中 s5e7 里的 5 和 7 代表的是在 24栏 中所占的栏数。

如下这样更方便我们进行模块化操作:

.grid-c3 {}
.grid-c3-s5e7 {}
.grid-c3-s5e7 col-main {}
.grid-c3-s5e7 col-sub {}
.grid-c3-s5e7 col-extra {}

.grid-c2 {}
.grid-c2-s7f {}
.grid-c2-s7f col-main {}
.grid-c2-s7f col-sub {}

稍微注意下你会发现 上例中我只提到了 s, e 的解释,并没有对 f, b, d 做出解释,因为我觉得原理我们已经掌握,f b d 只是淘宝因内容区域不同而采取的命名方法(应该可以这样理解)。
可以看出 -s5e7 , -s7f , -s5e7d , -s5e7b , -s9e6c 之类的就显得不太符合语义化命名,只是为了让我们更方便的使用,我这个人喜欢简洁些的风格,因此在这里我对它进行了升级。

下面看下整合出属于自己的栅栏布局命名,我把这些用在公司的项目上,来看下我的命名方法:
Grid-c3-c6e5
(三栏页面栅格布局-例:部分列表页) Grid-c3-c6e5

class=”grid-c3-w13c6e5″ 完整版
class=”grid-c3-c6e5″ 简洁版

注意这里的数字和上图中的数字进行对比,你会发现我省掉了w13即最宽的那一栏main(通常最宽的为main),
我将c 和 e这样除了main之外的窄栏通常固定宽度, main的宽度则为width:100%; 具体实现如下:

假设最外层的div 为 <div class=”content”>
.content {
 position:relative;
 width:总宽减窄栏的宽度;
 padding-left&right:窄栏的宽度;
}

窄栏浮动,main 绝对定位
.main {
 position:absolute;
 top:xx;
 left&right:窄栏的宽度;
}

先作下简单的说明,这里与淘宝网命名不同的是我没有采取 s(sub)和 e (extra) 这样的习惯,
而是用到了 w(west), c(center), e(east)
我将网页上的方位分为上北下南左西右东
不使用 l (left) 等上下左右表示是因为在如宋体等字体下 left 里的 l 与数字1 很容易造成混乱。

下面是一系列方位栅栏模块化命名例如:
Grid-c2-e5
(两栏页面栅格布局-例:首页) Grid-c2-e5

Grid-c2-w6
(两栏页面栅格布局-例:商品详细页) Grid-c2-w6

Grid-c2-e7
(两栏页面栅格布局-例:注册流程页) Grid-c2-e7

Grid-c3-c6e5
方案一:(三栏页面栅格布局-例:部分列表页) Grid-c3-c6e5

Grid-c3-c7e5
方案二:(三栏页面栅格布局-例:部分列表页) Grid-c3-c7e5

Grid-c3-w6e5
(三栏页面栅格布局-例:商城主页、个人空间预览页) Grid-c3-w6e5


(三栏页面栅格布局-例:个人空间管理页) Grid-c3-w5e6

以上命名都是由class=”grid-c3-w5c13e6″ 这类的完整版去掉main栏目(即最宽的一栏)
简化到class=”grid-c3-w5e6″ 这类简洁版(很快可以猜出-w5e6所对应的宽栏位c13,即左边占24-5-6=13a的main),
不想用上面的方法为main定width:100%;

.grid-c3-c6e5 .main{ width:13a;}
.grid-c3-c6e5 .sidebar { width:5a;}
.grid-c3-c6e5 .service { width:6a;}

.grid-c3-c6e5的名字看起来蛮长的,考虑过去掉.grid-c3-c6e5中的 grid 这个单词,但似乎不太方便阅读,况且后面会出现 .mode-a , .mode-b 之类的模块命名,统一下会更好;
这里的命名习惯建议使用的表意命名《超越CSS》有提到过。

可以看到简洁版的只有3个字母出现 w (west), c (center), e (east)
不用记太多的字母含义,grid-c3-c6e5这样的命名方法让我们更好的对栅格化布局进行操作。

博客园观点:http://www.cnblogs.com/cnpass/archive/2009/05/07/cnpass.html
经典论坛观点:http://bbs.blueidea.com/thread-2926561-1-1.html

分享到:
评论

相关推荐

    模块化原理在生产系统布局设计中的运用归类.pdf

    在生产系统布局设计中,模块化原理的应用可以显著提高布局的有效性和灵活性,使得系统更加易于理解和管理。 【生产系统模块化布局的一般原则】包括以下几点: 1. **系统分解**:根据生产需求,将系统划分为不同的...

    栅栏密码加密解密工具

    2. **重组明文**:将这些段按照原来的顺序横向连接起来,还原成原始的明文布局。 3. **读取明文**:从左到右,按行读取每一段,组合起来就是原始的明文。 在实际应用中,栅栏密码的弱点在于其固定模式。如果栅栏数...

    栅栏桌面Fences1.0简体中文版.rar

    软件介绍: 可以自由选择顶部、底部、左右布局图,定制标签显示,双击桌面隐藏/显示桌面图标。...为了保存您的布局,如果您经常更换布局,您可以在"更多快照"栏里设置您需要恢复的个性化栅栏设计。

    栅栏密码题目及工具

    在实际应用中,栅栏密码可以通过多种方式进行变体,如使用多栏栅栏、改变栅栏的排列顺序或使用不规则的栅栏形状。这些变化增加了密码的复杂性,但也使得解密过程更加困难,需要知道正确的栅栏结构。 在提供的压缩包...

    栅栏密码加密解密

    开源设计工作室MV可能提供了该程序的源代码,使得用户能够查看、学习和修改这个程序,以满足他们的个性化需求或进一步的研究。 栅栏密码的核心在于栏数的选择。在描述中提到,该程序支持26栏以上的栅栏,这意味着它...

    栅栏解密和W型栅栏解密.py

    栅栏密码加密/解密算法传统型的栅栏密码加密/解密算法的变种,称为W型。网站有在线脚本,但在线下比赛时,会用到此脚本,自动分栏,比对结果

    基于elementui的form表单实现的一个高拓展性的表格布局组件

    7. **版本控制与模块化**:在项目中,可以使用Git进行版本控制,确保代码的稳定性和可追溯性。同时,利用ES6的模块导入导出,可以更好地组织代码,提高代码的可读性和可维护性。 总结来说,基于Element UI的Form...

    泰科电子宣布推出可榫接互锁的全新模块化栅栏式端子排

    近日,泰科电子宣布推出可榫接互锁的全新模块化栅栏式端子排,用户仅需备有2种型号的产品,即可构建出多种尺寸的栅栏式端子排。全新栅栏式端子排拥有2位与3位两种型号,可在确保0.235英寸线间距不偏差的情况下,最高...

    栅栏加密算法实现c++实现

    栅栏加密代码的c++实现写的简单比较容易看也很容易学习

    电子功用-可三维转动的电动栅栏门

    综上所述,“可三维转动的电动栅栏门”是现代电动门技术的一大进步,它通过独特的三维转动机制,提高了空间适应性和使用便利性,同时保持了高水平的安全性和自动化程度。随着科技的不断发展,我们可以期待更多创新的...

    Linux内存栅栏概述

    Linux内存栅栏概述 Linux内存栅栏概述 Linux内存栅栏概述

    桌面栅栏,整理桌面文件,特点小巧简单

    自动模式下,软件会根据桌面已有的图标数量和布局智能划分栅栏;手动模式则允许用户自由绘制栅栏,更符合个性化需求。 "Fences Pro"是桌面栅栏的增强版本,它可能包含更多的高级功能,如自定义栅栏背景、动态调整...

    汇编课程设计--画栅栏线

    在本汇编语言课程设计中,我们探讨的主题是“画栅栏线”,这是一项基本的图形编程任务,常用于教学目的以帮助学生理解和掌握汇编语言的基础知识和控制硬件的能力。汇编语言是一种低级编程语言,它直接对应于计算机的...

    栅栏样式PPT按钮下载.rar

    栅栏样式是一种布局设计,通常指将元素排列成类似栅栏的两排或多排,这种设计既有序又具有视觉冲击力。在PPT中应用这种风格的按钮,可以使页面看起来更规整,同时增强信息的层次感。双排按钮的设计则增加了信息的可...

    栅栏密码zhala.py

    栅栏密码解密脚本

    一种新型的分布式弱栅栏构建与移动算法.pdf

    弱栅栏覆盖的研究重点在于如何在保证栅栏闭合性的同时,最小化节点的移动和能量消耗。 在弱栅栏覆盖的研究领域,节点匹配是一项关键技术。节点匹配指的是在传感器节点的移动过程中,如何选择合适的节点以达到最佳的...

    不同间隙防爆栅栏阻火性能的试验研究

    【防爆栅栏的阻火性能研究】 在煤矿产业中,防爆柴油机无轨胶轮车是重要的运输工具,其防爆栅栏的作用至关重要。防爆栅栏的主要功能是防止火花、火焰通过,确保井下环境的安全。然而,实践中常常遇到防爆栅栏堵塞的...

    栅栏桌面(fences)

    栅栏桌面-中文版(fences)是著名的Stardock公司推出的一款软件,用来分类和组织桌面上的图标一款软件。它可以将不同的图标放到不同的“容器”当中,你还可以移动和拉伸这个“容器”。这样将图标分类以后,你的桌面...

    矿用防爆柴油机排气栅栏结构研究

    防爆柴油机排气栅栏是用来熄灭排气系统中易燃气体,降低排气温度的安全装置,但是排气栅栏的安装,却增加了排气系统的阻力,从而影响防爆柴油机的动力性和经济性。文章利用UG软件建立了防爆柴油机排气栅栏的三维几何模型...

Global site tag (gtag.js) - Google Analytics