重构: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/的例子结尾:

Css代码  

    1. /* **************** TEMPLATE ***************** */
    2. /* ====== Page Head, Body, and Foot ====== */
    3. body{/*_text-align:center;*/}/* IE5.5 */
    4. .body{overflow:hidden; _overflow:visible; _zoom:1;}
    5. .page{margin: 0 auto; width: 950px;/*_text-align:left;*/} /* wraps other template elems to set width */ /* text-align IE5.5 */
    6. /* "old school" and "liquid" extend page to allow for different page widths */
    7. .oldSchool{width:750px;}
    8. .gs960{width:960px;}
    9. .liquid{extends:.page; width: auto;margin:0;}
    10. /* ====== Columns ====== */
    11. .main{overflow: hidden;_overflow:visible;_zoom:1;}
    12. .leftCol{float:left; width:250px;_margin-right:-3px;}
    13. .rightCol{float:right; width: 300px;_margin-left:-3px;}
    14. /* extend columns to allow for common column widths */
    15. .gMail{width:160px;}
    16. .gCal{width:180px;}
    17. .yahoo{width:240px;}
    18. .myYahoo{width:300px;}
    19. /* **************** CONTENT OBJECTS ***************** */
    20. /* ====== Default spacing ====== */
    21. h1, h2, h3, h4, h5, h6, ul, ol,dl, p,blockquote {padding:10px;}
    22. h1, h2, h3, h4, h5, h6,img{padding-bottom:0px;}
    23. pre{margin: 10px;}
    24. table h1,table h2,table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl{padding:0;}
    25. /* ====== Elements ====== */
    26. img{display:block;}
    27. em{font-style: italic;}
    28. strong{font-weight:bold;}
    29. hr{border: 5px solid #e2e2e2; border-width: 0 0 5px 0; margin: 20px 10px 10px 10px;}
    30. code{color:#0B8C8F;}
    31. /* ====== Headings ====== */
    32. /* .h1-.h6 classes should be used to maintain the semantically appropriate heading levels - NOT for use on non-headings */
    33. h1, .h1{font-size:196%; font-weight:normal; font-style: normal; color:#AE0345;}
    34. h2, .h2{font-size:167%; font-weight:normal; font-style: normal; color:#AE0345;}
    35. h3, .h3{font-size:146.5%; font-weight:normal; font-style: normal; color:#DF2B72;}
    36. h4, .h4{font-size:123.1%; font-weight:normal; font-style: normal; color: #333;}
    37. h5, .h5{font-size:108%; font-weight:bold; font-style: normal; color:#AE0345;}
    38. h6, .h6{font-size:108%; font-weight:normal; font-style: italic; color:#333;}
    39. /* if additional headings are needed they should be created via additional classes, never via location dependant styling */
    40. .category{font-size:108%; font-weight:normal; font-style: normal; text-transform:uppercase; color: #333;}
    41. .category a{color: #333;}
    42. .important a{font-weight:bold;}
    43. /* links */
    44. a { color: #036; font-weight:bold;text-decoration: none }
    45. a:focus, a:hover { text-decoration: underline }
    46. a:visited { color:#005a9c; }
    47. /* ====== Lists ======*/
    48. /* numbered list */
    49. ol.simpleList li{list-style-type: decimal; margin-left:40px;}
    50. /* standard list */
    51. ul.simpleList li{list-style-type:disc; margin-left:40px;}
    52. /* ====== Tables ====== */
    53. .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*/}
    54. .data table {width:100%;border:1px solid #AE0345;}
    55. th, td{vertical-align:top;border:1px solid #AE0345;}
    56. .txtC, .data .txtC td, .data .txtC th{text-align:center;}
    57. .txtL, .data .txtL td, .data .txtL th{text-align:left;}
    58. .txtR, .data .txtR td, .data .txtR th{text-align:right;}
    59. .txtT, .data .txtT td, .data .txtT th{vertical-align:top;}
    60. .txtB, .data .txtB td, .data .txtB th{vertical-align:bottom;}
    61. .txtM, .data .txtM td, .data .txtM th{vertical-align:middle;}
    62. .data th,.data td{padding:3px 20px}
    63. .data thead tr{#fff0f8;}
    64. .data th{color: #000; font-weight:bold}

重构:CSS也面向对象

时间: 2024-09-27 20:05:51

重构:CSS也面向对象的相关文章

页面重构css技巧总结篇(8.1-8.5)

1.如何让文字在容器内垂直居中? (1)方法:为容器添加line-height属性,使得line-height的值等于容器的height. (2)代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> .container{ width:

HTML和CSS是面向对象的

用户代理为我们提供了一个类库(标签库),每个类都有一些内置的属性,其中有一个叫style的属性专门负责这个类的实例的视觉表现.这个style本身也是一个类. 类库之间的类也是相互继承而来,当然也继承了其style属性. 我们在编写HTML的时候其实就是创建了这些类的一个个对象,这些对象的style属性默认是由类实例化出来的(继承来的),我们可以修改它(重写或叫做层叠) 与一般面向对象不同的是,style对象的属性是有数量限制的. 有些类是不可被实例化的,只能被继承. 待续............

测试文章,重构CSS后测试

导读:“我们部门一同事,家住天津,每天从天津坐动车或高铁来北京上班,晚上下班再坐列车回到天津家里,”近日,京津通勤日记话题在网络中引发关注 ,在中关村上班的吕先生每天都过着双城通勤的生活,他每天单程花费2个小时左右,每月通勤费约2600元.不少网民议论纷纷,有些人认为他这样耗费时间太长,并不值得,也有些人称,中关村附近房租昂贵,双城通勤花费并不贵,而且不会遭遇堵车拥挤等情况,回家休息也会更舒服. 样本 从北京到天津的通勤路 晚上7点25分,吕先生从中关村一栋高楼中走出,他选择通过中关村地铁站A口

CSS代码重构

CSS代码重构的目的 我们写CSS代码时,不仅仅只是完成页面设计的效果,还应该让CSS代码易于管理,维护.我们对CSS代码重构主要有两个目的:1.提高代码性能2.提高代码的可维护性 提高代码性能 提高CSS代码性能主要有两个点:1.提高页面的加载性能提高页面的加载性能,简单说就是减小CSS文件的大小,提高页面的加载速度,尽可以的利用http缓存2.提高CSS代码性能不同的CSS代码,浏览器对其解析的速度也是不一样的,如何提高浏览器解析CSS代码的速度也是我们要考虑的 提高代码的可维护性 提高CS

CSS代码重构与优化之路

写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多,如果没有及时对CSS代码进行维护,CSS代码不断会越来越多.CSS代码交错复杂,像一张庞大的蜘蛛网分布在网站的各个位置,你不知道修改这行代码会有什么影响,所以如果有修改或增加新功能时,开发人员往往不敢去删除旧的冗余的代码,而保险地增加新代码,最终的坏处就是项目中的CSS会越来越多,最终陷入无底洞. CSS代码重构的目的 我们写CSS代码时,不仅仅只是完成页面设计的效果,还应该让CSS代码易于管理,维护.我们对CSS

CSS的性能优化

---恢复内容开始--- 作者:徐尤熙链接:https://www.zhihu.com/question/19886806/answer/80432295 [CSS代码重构与优化之路] 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多,如果没有及时对CSS代码进行维护,CSS代码不断会越来越多.CSS代码交错复杂,像一张庞大的蜘蛛网分布在网站的各个位置,你不知道修改这行代码会有什么影响,所以如果有修改或增加新功能时,开发人员往往不敢去删除旧的冗余代码,而保险地增加

编写可维护的css

在参与规模庞大.历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要: 保持 CSS 便于维护 保持代码清晰易懂 保持代码的可拓展性 为了实现这一目标,我们要采用诸多方法. 本文档第一部分将探讨语法.格式以及分析 CSS 结构:第二部分将围绕方法论.思维框架以及编写与规划 CSS 的态度. CSS 文档分析 无论编写什么文档,我们都应当尽力维持统一的风格,包括统一的注释.统一的语法与统一的命名规范. 总则 尽量将行宽控制在 80 字节以下.渐变(gradient)相关的语法以及注释中的

CSS编写指导规范和建议

在参与规模庞大.历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要: 保持 CSS 易于维护 保持代码清晰易懂 保持 CSS 的可拓展性 为了实现这一目标,我们要采用诸多方法. 本文档第一部分将探讨语法.格式以及分析 CSS 结构:第二部分将围绕方法论.思维框架以及编写与规划 CSS 的看法. CSS 文档分析 无论编写什么文档,我们都应当维持统一的风格,包括统一的注释.统一的语法与统一的命名规范. 总则 将行宽控制在 80 字节以下.渐变(gradient)相关的语法以及注释中的

通用 CSS 笔记、建议与指导

在参与规模庞大.历时漫长且人手众多的项目时,所有开发者遵守如下规则极为重要: + **保持 CSS 的可维护性** + **保持代码清晰易懂** + **保持代码的可拓展性** 为了实现这一目标,我们要采用诸多方法. 本文档第一部分将探讨语法.格式以及 CSS 分析:第二部分将从方法论.思维框架以及编写与规划 CSS 的态度入手. ## 目录 * CSS 文档分析 * 总览 * 单一文件与多文件 * 目录 * 章节标题 * 代码顺序 * 规则解析 * 命名规范 * JavaScript 钩子 *