CSS模块化设计
作者:greengnn 来源:greengnn博客 发布时间:2009-01-05 12:10:00
自己有一套模块化的思路,想搜索一下有没有共鸣结果排名靠前的是通过class拼凑页面的想法。模块化是twinsen提出来的,从我接收第一个portal类网站开始就认可他这种思路,不过到现在也没太推广开去,其实就是CSS写法的东东。
什么是模块化CSS,举个例子就是人,都有脑袋,眼睛,鼻子手脚等器官,但是别人的器官坏了,并不影响你的正常使用,因为人和人是彼此独立的,彼此独立就不会相互影响,在版本迭代,多人协同开发上优势就更为明显。
具体应用就是
<模块1>
<子元素1></子元素1>
<子元素2></子元素2>
</模块1>
<模块2>
<子元素1></子元素1>
<子元素2></子元素2>
</模块2>
CSS方面用后台选择符的形式组织
模块1 {}
模块1 子元素1 {}
模块1 子元素2 {}
模块2 {}
模块2 子元素1 {}
模块2 子元素2 {}
这样就保证了模块1 的作用域只限于模块1而影响不到模块2,模块1不管变更多少次,不管被谁修改,模块2依然完好无损。体现在研发流程上就是模块1的需求不断变化,CSS不断重写,写模块1的人不在了,别人要可以放心的处理模块1,而不用担心影响这个网站的视觉表现。当然浮动布局和上下布局是做不到不影响的,但是耦合性还是小了很多,仔细看csszengarden的代码也能发现是这个思想。
相互独立的模块组成的网页,CSS拓展性方面也增强了很多,因为模块间嵌套少了,可以更加随意的摆放。
模块化拓展思路就是CSS作用域控制,一般CSS可以划分全局样式和局部页面样式,全局样式又分为全局模块,和全局样式初始化(reset,基本的类等)。css文件上可以分为全局css和局部页面css,全局css里再分全局模块样式和全局初始化样式。如:
g.css
-reset
-link
-form
-全局模块
--header
--footer
--提示框
--分页
index.css
首页的css
detail.css
新闻详细页面css
-模块1
-模块2
......
这样整个网站的样式作用域区分就很明晰了,样式定位修改迭代也方面很多,管理起来也省事许多,首页改版就新建一个index_v2,模块修改就修改为模块1_v2,需要别人协助,就注释写清楚谁谁修改该模块的什么什么特性。要多人同时维护就划分清楚你负责哪些模块,他负责哪些模块。初始化样式最好压缩成一行,一次搞定尽量避免修改。
对比class多重拼凑的页面容易接手和维护的多,不至于样式优先级乱到不停的抢优先级,和复杂到一丁点的class修改都心惊胆战。
大体上就说明模块化CSS设计的思路和好处了。但是这样有个缺陷就是表现上看似复用的不敢复用,因为会增加耦合性,后台选择符很冗长,太浪费字节。
当然这些都是随环境不同权衡选择,如果你的网站多年来就你自己一个人折腾,没有资源会帮助你,或者你的设计稿很规范,确定了一个网站基本控件表现不会变动,那就大胆的复用,甚至建立一个个组件去拼凑网站页面。
猜你喜欢
- 成果库修改: 要求主题列表随成果类型改变而改变  
- 一、定义函数在Python中可以使用def关键字来定义函数,命名规则跟变量的命名规则是一致的。在函数名后面的圆括号中可以放置传递给函数的参数
- 什么是粘包问题最近在使用Golang编写Socket层,发现有时候接收端会一次读到多个数据包的问题。于是通过查阅资料,发现这个就是传说中的T
- 问题:“深入认识Python内建类型”这部分的内容会从源码角度为大家介绍Python中各种常用的内建
- Pycharm工具前言好的学习是离不开一个好的工具,今天分享一下一款用于python脚本编写以及调试的工具——PyCharm Communi
- 这里发现可以采用三种的变通方法将置为disabled的元素状态改为enabled。 第一种:改变disabled的boolean状态,具体代
- 安装python中文分词库jieba法1:Anaconda Prompt下输入conda install jieba法2:Terminal下
- 本文实例讲述了微信小程序实现获取自己所处位置的经纬度坐标功能。分享给大家供大家参考,具体如下:1、效果展示2、关键代码index.wxml布
- 源代码:# dict1 是 字典 , 用来对应相应元素的下标,我们将文件转成列表,对应的也就是文件的下标,通过下标来找文件元素dict1 =
- Why use Sockets?套接字是网络的基础。它们使在两个不同程序或设备之间的信息传输成为可能。例如,当您打开浏览器时,您作为客户端正
- 本文实例讲述了Python使用xlrd读取Excel格式文件的方法。分享给大家供大家参考。具体如下:使用xlrd能够很方便的读取excel文
- 如果我们希望把一个网站的更新实时发布到另一个网站上,最好的方法是通过 RSS 进行转载。如果只是需要简单的对更新的条目做个提示的话,使用 J
- 昨天晚上才发现已经出了jQuery的1.3版本,于是下载下来,把原来一个兄弟翻译的1.2.6的文档移植到了1.3中,点击这里可
- 引言本文以Python3.9.1读取data.xlsx中包含的西瓜数据集3.0数据为例,数据集如下:编号色泽根蒂敲声纹理脐部触感密度含糖率好
- 一、介绍事务是数据库中的一个非常重要的概念,它是指由一系列操作所组成的逻辑单位,在这个单位内,要么所有操作都成功完成,要么所有操作都不会执行
- 比如有文章表 Article(Id,Category,InsertDate),现在要用SQL找出每种类型中时间最新的前N个数据组成的集合,一
- 网络爬虫由于一个ip频繁访问同一网站,容易返回456或者被长时间封禁。特别的本机有socks5客户端的设置如下,前提是已经安装了socks5
- 交待:使用的软硬件环境为Win XP SP2、SQL Server 2000 SP2个人版、普通双核台式机、1000M局域网,A机为已使用的
- 实例代码:import tkinter as tk import tkinter.filedialogimport cv2def choos
- python清空命令行 !有时我们在命令行上运行一些代码时,觉得有些冗余了,可以通过以下代码进行清除命令行上的代码。import osdef