`

重构:CSS也面向对象

阅读更多

最初接触到面向对象的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页面上,也可以比较容易地做到样式和扩展样式的使用,比如:《div class="player wmpPlayer"》。

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



 

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

/* **************** 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}

 

  • 大小: 41.4 KB
分享到:
评论

相关推荐

    W6D5-专案:CSS花絮,RSpec作业,TDD专案

    为了完成这个项目,你需要理解并应用上述的CSS技术和测试方法,同时也需要熟悉Ruby编程语言的基本语法和面向对象特性。通过这个项目,你不仅能提升你的技术能力,还能培养良好的编程习惯和思维方式,这对于任何IT...

    css命名规则

    - **定义**:OOCSS是一种面向对象的CSS设计思想,旨在通过抽象和封装的方式编写可复用的CSS代码。 - **特点**: - 分离内容与表现。 - 使用通用的类名,如`.box`、`.column`等,这些类可以被应用于任何元素上。 -...

    CSS网站布局实录 (第二版)PDF版

    本书是一本讲述基于Web标准的应用CSS进行网站布局设计与重构的典范之作。 本书以实例为主,一步步地告诉大家如何进行符合Web 2.0标准的CSS布局设计。具备了知识全面、完美应用(CSS选择器、样式继承、层叠、格式化、...

    重构HTML

    代码组织也是重构的一部分。将相似的样式或脚本聚合在一起,使用外部CSS和JavaScript文件,以保持HTML文件的整洁。同时,考虑引入模块化思想,利用HTML5的`<template>`标签或Web Components技术来封装重复的代码片段...

    学编程必看的好书列表!

    最后,"《设计模式:可复用面向对象软件的基础》"(GoF设计模式)是理解面向对象设计模式的经典之作,对于提升代码设计水平大有裨益。 这些书籍不仅涵盖了广泛的编程主题,而且每一本都是经过时间考验的精华,能够...

    Pro PHP Refactoring

    5. **面向对象编程在PHP重构中的应用** 6. **测试驱动开发(TDD)与重构的关系** 7. **性能优化技术** 8. **最佳实践案例分析** #### 详细知识点解析 **1. PHP重构的基本概念与重要性** 重构是指在不改变软件外部...

    2017年前端开发面试题(含答案)

    2. 面向对象:包括继承、闭包、插件等。 3. 事件机制:包括 IE 和标准 DOM 事件模型之间的差别。 4. XMLHttpRequest 的使用:可以使用 XMLHttpRequest 对象实现 AJAX 请求。 四、HTTP 1. HTTP 请求方法:包括 GET...

    2022前端企业高频问答题

    JavaScript: 数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。 其他: HTTP、安全、正则、优化、重构、...

    java设计

    1. **面向对象设计**:Java是面向对象的语言,因此理解封装、继承和多态是基础。在设计阶段,需考虑类的职责、接口定义、以及如何通过抽象和继承构建类层次结构。 2. **设计模式**:包括工厂模式、单例模式、观察者...

    javascript 面向对象,实现namespace,class,继承,重载

    但是我前些日子也改过些许客户端的小bug,确实那代码看得让人有些云里雾里,不知身在哪山,轻易不敢动代码,于是就自己动手鼓捣起我曾又爱又恨的javascript来,自己写一个简单的js实现namespace,继承,重载等面向...

    编写高质量代码-Web前端开发修炼之道.azw3

    4.4 模块化CSS——在CSS中引入面向对象编程思想 4.4.1 如何划分模块——单一职责 4.4.2 CSS的命名——命名空间的概念 4.4.3 挂多个class还是新建class——多用组合,少用继承 4.4.4 如何处理上下margin 4.5 低...

    2020年小白学习Web前端的最新学习路线指南.docx

    * 主要内容:原生JavaScript、面向对象进阶与ES5/ES6应用、JavaScript工具库自主研发、JQuery经典交互特效开发、HTTP协议、Ajax进阶与后端开发、前端工程化与模块化应用以及AngularJS等。 * 学习要点:原生...

    程序员必读index程序员必读indexv

    3. **软件工程与设计模式**:这部分可能涉及敏捷开发、软件架构、设计模式等内容,如《重构:改善既有代码的设计》和《设计模式:可复用面向对象软件的基础》。 4. **操作系统与计算机网络**:深入理解操作系统原理...

    我也种棵OO树JXTree[js+css+xml]

    ### 面向对象的树状结构展示:JXTree[js+css+xml] #### 一、简介 在软件开发领域,面向对象编程(Object-Oriented Programming,简称OOP)是一种广泛采用的设计方法,它强调将数据和操作数据的方法封装在一起,...

    网站设计分析:模块化–高效重构

    首先,应遵循“结构与皮肤分离”和“容器与内容分离”的面向对象CSS原则,确保模块设计独立于布局,并具备灵活性和复用性。其次,建立团队协作开发规范,包括文件目录结构、命名规则、图片处理和模块调用等方面的...

    ASP编程代码优化

    5. **利用继承和多态性**:通过创建自定义对象,利用面向对象编程的特性,如继承和多态,可以使代码更具可扩展性和复用性。 三、进一步的优化技巧 1. **错误处理**:使用On Error语句进行错误捕获和处理,避免程序...

Global site tag (gtag.js) - Google Analytics