前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS 也面向对象

CSS 也面向对象

作者头像
四火
发布2022-07-15 19:55:02
1730
发布2022-07-15 19:55:02
举报
文章被收录于专栏:四火的唠叨四火的唠叨

最初接触到面向对象的 CSS 还是因为项目中的 CSS 已经超过八千行,缺乏约束和管理,在近期或者是不远的将来,有迫切的要求需要重构。在前端重构中,除了 JavaScript 重构,不妨再看一看 CSS 面向对象和模块化,这给我的工作提供了非常好的思路。

首先,我要说的是,在这个概念翻飞的年代里,固执地追求某些概念和涵义,并不能带来更优秀的设计和更高的生产力,面向对象是一种思路,或者说是一种方法论,给 CSS 重构带来一些启示,这就足够了,没有必要去纠结 OO CSS 的定义和严谨性。

我们的 CSS 代码遇到了什么问题?

重用性差,看着一个 CSS 的名称,很难说出哪些模块可能引用到了它,这个 CSS 是用作网页的哪些部分的; 结果谁也不敢修改和删除,后面的样式只能往上面堆积; 怕 CSS 重名,s1、s2、t1、t2 这样的命名开始出现了,这无异于饮鸩止渴,没有人知道这些样式是做什么的; 于是,CSS 越来越大了; 做高保真的美工和业务开发人员思路是完全不同的,我们看到各种风格的 CSS 定义和命名; 有时候,也会遇到 CSS 冲突的问题,这一切,还是归结为那一句话:复杂是一切软件问题的根源。

CSS 重构的原则:

纵向模块化:由大到小建立 CSS 模块文件,比如:公用 -> 门户 -> 频道 -> 栏目 -> 内容; 横向模块化:适用于一些独立性高的组件,比如播放器模块、弹出层模块; 提供指导性 CSS:例如,准备几套 list 类型展示的样式,把整个系统中的 list 展示全部收拢到这一处来,未来皮肤的更换、比较和修改,相当程度上便利了美工; CSS 的拇指原则:如果同一功能区域的两个样式很相近,只保留一个! 框架(栏目)用网格来控制宽度,而内容控制高度,当页面上由若干个栏目组成,每个栏目的宽度可以固定或者被频道按比例固定,但是高度需要取决于内容。

CSS 的规则定下来以后,需要开源和节流两个角度去控制与管理,一方面,新加入的 CSS 必须按照规则行事,这点需要给高保真设计人员和业务开发人员提要求;另一方面,原有 CSS 需要进行逐步的重构。

CSS 本身是支持继承和模块化的,另外在 HTML 页面上,也可以比较容易地做到样式和扩展样式的使用。

如果有一天,项目的前端复杂到了需要对 HTML 也做 UML 建模的时候,那么把 CSS 也放进去吧。DOM 和其附属、关联模型,本身就是很适合做建模的。

最后以 http://oocss.org/的例子结尾:

代码语言:javascript
复制
/* **************** TEMPLATE ***************** */   
/* ====== Page Head, Body, and Foot ====== */   
body{/*_text-align:center;*/}/* IE5.5 */   
.body{overflow:hidden; _overflow:visible; _zoom:1;}   
.page{margin: 0 auto; width: 950px;/*_text-align:left;*/} /* wraps other template elems to set width */ /* text-align IE5.5 */   
/* "old school" and "liquid" extend page to allow for different page widths */   
.oldSchool{width:750px;}   
.gs960{width:960px;}   
.liquid{extends:.page; width: auto;margin:0;}   
/* ====== Columns ====== */   
.main{overflow: hidden;_overflow:visible;_zoom:1;}   
.leftCol{float:left; width:250px;_margin-right:-3px;}   
.rightCol{float:right; width: 300px;_margin-left:-3px;}   
/* extend columns to allow for common column widths */   
.gMail{width:160px;}   
.gCal{width:180px;}   
.yahoo{width:240px;}   
.myYahoo{width:300px;}  

/* **************** CONTENT OBJECTS ***************** */   
/* ====== Default spacing ====== */   
h1, h2, h3, h4, h5, h6, ul, ol,dl, p,blockquote {padding:10px;}   
h1, h2, h3, h4, h5, h6,img{padding-bottom:0px;}   
pre{margin: 10px;}   
table h1,table h2,table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl{padding:0;}   
/* ====== Elements ====== */   
img{display:block;}   
em{font-style: italic;}   
strong{font-weight:bold;}   
hr{border: 5px solid #e2e2e2; border-width: 0 0 5px 0; margin: 20px 10px 10px 10px;}   
code{color:#0B8C8F;}   
/* ====== Headings ====== */   
/* .h1-.h6 classes should be used to maintain the semantically appropriate heading levels - NOT for use on non-headings */   
h1, .h1{font-size:196%; font-weight:normal; font-style: normal; color:#AE0345;}   
h2, .h2{font-size:167%; font-weight:normal; font-style: normal; color:#AE0345;}   
h3, .h3{font-size:146.5%; font-weight:normal; font-style: normal; color:#DF2B72;}   
h4, .h4{font-size:123.1%; font-weight:normal; font-style: normal; color: #333;}   
h5, .h5{font-size:108%; font-weight:bold; font-style: normal; color:#AE0345;}   
h6, .h6{font-size:108%; font-weight:normal; font-style: italic; color:#333;}   
/* if additional headings are needed they should be created via additional classes, never via location dependant styling */   
.category{font-size:108%; font-weight:normal; font-style: normal; text-transform:uppercase; color: #333;}   
.category a{color: #333;}   
.important a{font-weight:bold;}   
/* links */   
a { color: #036; font-weight:bold;text-decoration: none }   
a:focus, a:hover { text-decoration: underline }   
a:visited { color:#005a9c; }   
/* ====== Lists ======*/   
/* numbered list */   
ol.simpleList li{list-style-type: decimal; margin-left:40px;}   
/* standard list */   
ul.simpleList li{list-style-type:disc; margin-left:40px;}   
/* ====== Tables ====== */   
.data{padding: 20px; position:relative; zoom:1;vertical-align: top;border-right:solid 1px transparent;/* border fixes a FF2 bug which causes the data table to overlay its borders*/}   
.data table {width:100%;border:1px solid #AE0345;}   
th, td{vertical-align:top;border:1px solid #AE0345;}   
.txtC, .data .txtC td, .data .txtC th{text-align:center;}   
.txtL, .data .txtL td, .data .txtL th{text-align:left;}   
.txtR, .data .txtR td, .data .txtR th{text-align:right;}   
.txtT, .data .txtT td, .data .txtT th{vertical-align:top;}   
.txtB, .data .txtB td, .data .txtB th{vertical-align:bottom;}   
.txtM, .data .txtM td, .data .txtM th{vertical-align:middle;}   
.data th,.data td{padding:3px 20px}   
.data thead tr{background-color: #fff0f8;}   
.data th{color: #000; font-weight:bold} 

文章未经特殊标明皆为本人原创,未经许可不得用于任何商业用途,转载请保持完整性并注明来源链接 《四火的唠叨》

×Scan to share with WeChat

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档