• 重构：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;  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{750px;}   
      8. .gs960{960px;}   
      9. .liquid{extends:.page;  auto;margin:0;}   
      10. /* ====== Columns ====== */   
      11. .main{overflow: hidden;_overflow:visible;_zoom:1;}   
      12. .leftCol{float:left; 250px;_margin-right:-3px;}   
      13. .rightCol{float:right;  300px;_margin-left:-3px;}   
      14. /* extend columns to allow for common column widths */   
      15. .gMail{160px;}   
      16. .gCal{180px;}   
      17. .yahoo{240px;}   
      18. .myYahoo{300px;}  
      19.   
      20. /* **************** CONTENT OBJECTS ***************** */   
      21. /* ====== Default spacing ====== */   
      22. h1, h2, h3, h4, h5, h6, ul, ol,dl, p,blockquote {padding:10px;}   
      23. h1, h2, h3, h4, h5, h6,img{padding-bottom:0px;}   
      24. pre{margin: 10px;}   
      25. table h1,table h2,table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl{padding:0;}   
      26. /* ====== Elements ====== */   
      27. img{display:block;}   
      28. em{font-style: italic;}   
      29. strong{font-weight:bold;}   
      30. hr{border: 5px solid #e2e2e2; border- 0 0 5px 0; margin: 20px 10px 10px 10px;}   
      31. code{color:#0B8C8F;}   
      32. /* ====== Headings ====== */   
      33. /* .h1-.h6 classes should be used to maintain the semantically appropriate heading levels - NOT for use on non-headings */   
      34. h1, .h1{font-size:196%; font-weight:normal; font-style: normal; color:#AE0345;}   
      35. h2, .h2{font-size:167%; font-weight:normal; font-style: normal; color:#AE0345;}   
      36. h3, .h3{font-size:146.5%; font-weight:normal; font-style: normal; color:#DF2B72;}   
      37. h4, .h4{font-size:123.1%; font-weight:normal; font-style: normal; color: #333;}   
      38. h5, .h5{font-size:108%; font-weight:bold; font-style: normal; color:#AE0345;}   
      39. h6, .h6{font-size:108%; font-weight:normal; font-style: italic; color:#333;}   
      40. /* if additional headings are needed they should be created via additional classes, never via location dependant styling */   
      41. .category{font-size:108%; font-weight:normal; font-style: normal; text-transform:uppercase; color: #333;}   
      42. .category a{color: #333;}   
      43. .important a{font-weight:bold;}   
      44. /* links */   
      45. a { color: #036; font-weight:bold;text-decoration: none }   
      46. a:focus, a:hover { text-decoration: underline }   
      47. a:visited { color:#005a9c; }   
      48. /* ====== Lists ======*/   
      49. /* numbered list */   
      50. ol.simpleList li{list-style-type: decimal; margin-left:40px;}   
      51. /* standard list */   
      52. ul.simpleList li{list-style-type:disc; margin-left:40px;}   
      53. /* ====== Tables ====== */   
      54. .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*/}   
      55. .data table {100%;border:1px solid #AE0345;}   
      56. th, td{vertical-align:top;border:1px solid #AE0345;}   
      57. .txtC, .data .txtC td, .data .txtC th{text-align:center;}   
      58. .txtL, .data .txtL td, .data .txtL th{text-align:left;}   
      59. .txtR, .data .txtR td, .data .txtR th{text-align:right;}   
      60. .txtT, .data .txtT td, .data .txtT th{vertical-align:top;}   
      61. .txtB, .data .txtB td, .data .txtB th{vertical-align:bottom;}   
      62. .txtM, .data .txtM td, .data .txtM th{vertical-align:middle;}   
      63. .data th,.data td{padding:3px 20px}   
      64. .data thead tr{#fff0f8;}   
      65. .data th{color: #000; font-weight:bold}  
  • 相关阅读:
    .NET Core 3.0之创建基于Consul的Configuration扩展组件
    .NET Core 3.0之深入源码理解Configuration(三)
    .NET Core 3.0之深入源码理解Configuration(二)
    .NET Core 3.0之深入源码理解Configuration(一)
    python __getattr__ & __getattribute__ 学习
    nginx+uwsgi+flask+supervisor 项目部署
    Read a large file with python
    MySQL 基础回顾(2020/06/14修改)
    Linux运维: Rsync同步数据(ubuntu16.04+windows10)
    斐波那契数列的5种python实现写法
  • 原文地址：https://www.cnblogs.com/ranran/p/3858096.html
Copyright © 2020-2023  润新知