大型网站CSS编写与维护

开发一个相对大型的网站,比如豆瓣、去哪儿网,CSS在完全按照某种方法论(比如BEM)编写的情况下,还有必要设计一套相对完整的CSS框架么?

阅读 9.8k
评论
    10 个回答
    • 5.4k

    应该有一套比较规范的css组织方法,比如曹刘阳先生(曾就职于雅虎和淘宝的资深工程师)推荐的base.css+common.css+page.css组织方式:

    1.base提供最底层的、功能和粒度最小的的通用类样式,可以被所有页面引用,力求精简和通用;
    2.common则是楼上提到的模块化组件,即将功能相对独立的划分为模块,重复次数多的模块划分为组件,提取到common层,这一层需要尽可能实现封装,对可能经常变化的部分提供灵活的接口;
    3.page是页面级别的样式表,提供各页面独有的样式,可以再根据需求细分如page-index.css,page-connect.css

    这样组织的好处是:

    1.比较利于维护
    2.组件复用率高,修改起来比较轻松
    3.代码精简,减少冗余。

    /---------分割线---感谢大家的赞,整理一下内容和排版,再提供一份base.css作为参考-------/

    /*css reset*/
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin: 0;padding: 0;}
    table{border-collapse:collapse;border-spacing:0;}
    fieldset,img{border:0;}
    address,caption,cite,code,dfn,em,strong,th,var{font-style: normal;font-weight: normal;}
    ol,ul{list-style: none;}
    caption,th{text-align:left;}
    h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight: normal;}
    q:before,q:after{content:'';}
    abbr,acronym{ border:0;}
    
    /*文字排版*/
    .f12{font-size: 12px;}
    .f13{font-size: 13px;}
    .f14{font-size: 14px;}
    .f16{font-size: 16px;}
    .fb{font-weight: bold;}
    .fn{font-weight: normal;}
    .t2{text-indent: 2em;}
    .lh150{line-height:150%;}
    .lh180{line-height:180%;}
    .lh200{line-height:200%;}
    .unl{text-decoration: underline;}
    .no_unl{text-decoration: none;}
    
    /*定位*/
    .tl{text-align: left;}
    .tc{text-align: center;}
    .tr{text-align: right;}
    .bc{margin-left: auto;margin-right: auto;}
    .fl{float: left;display:inline;}
    .fr{float: right;display:inline;}
    .cb{clear:both;}
    .cl{clear: left;}
    .cr{clear: right;}
    .clearfix:after{content: '.';display:block;height: 0;clear: both;visibility: hidden;}
    .clearfix{display:inline-block}*html
    .clearfix{height: 1%}.Clearfix{display: block;}
    .vm{vertical-align: middle;}
    .pr{position: relative;}
    .pa{position: absolute;}
    abs-right{position: absolute;right: 0;}
    .zoom{zoom:1;}
    .hidden{visibility: hidden;}
    .none{display: none}
    /*长度高度*/
    .w10{width: 10px;}
    .w20{width: 20px;}
    .w30{width: 30px;}
    .w40{width: 40px;}
    .w50{width: 50px;}
    .w70{width: 70px;}
    .w90{width: 90px;}
    .w100{width: 100px;}
    .w300{width: 300px;}
    .w500{width: 500px;}
    .w600{width: 600px;}
    .w700{width: 700px;}
    .w800{width: 800px;}
    .w{width: 100%;}
    .h50{height: 50px;}
    .h100{height: 100px;}
    .h200{height: 200px;}
    .h{height: 100%;}
    
    /*编剧*/
    .m10{margin:10px;}
    .m15{margin:15px;}
    .m30{margin:30px;}
    .mt5{margin-top:5px;}
    .mt10{margin-top:10px;}
    .mt15{margin-top:15px;}
    .mt20{margin-top:20px;}
    .mt30{margin-top:30px;}
    .mt50{margin-top:50px;}
    .mt100{margin-top:100px;}
    .mb5{margin-bottom: 5px;}
    .mb10{margin-bottom: 10px;}
    .mb15{margin-bottom: 15px;}
    .mb20{margin-bottom: 20px;}
    .mb30{margin-bottom: 30px;}
    .mb50{margin-bottom: 50px;}
    .mb100{margin-bottom: 100px;}
    .ml5{margin-left: 5px;}
    .ml10{margin-left: 10px;}
    .ml15{margin-left: 15px;}
    .ml20{margin-left: 20px;}
    .ml30{margin-left: 30px;}
    .ml50{margin-left: 50px;}
    .ml100{margin-left: 100px;}
    .mr5{margin-right: 5px;}
    .mr10{margin-right:10px;}
    .mr15{margin-right: 15px;}
    .mr20{margin-right: 20px;}
    .mr30{margin-right: 30px;}
    .mr50{margin-right: 50px;}
    .mr100{margin-right: 100px;}
    .p5{padding: 5px;}
    .p10{padding:10px;}
    .p15{padding: 15px;}
    .p20{padding: 20px;}
    .p30{padding: 30px;}
    .p50{padding: 50px;}
    .p100{padding: 100px;}
    .pt5{padding-top: 5px;}
    .pt10{padding-top:10px;}
    .pt15{padding-top: 15px;}
    .pt20{padding-top: 20px;}
    .pt30{padding-top: 30px;}
    .pt50{padding-top: 50px;}
    .pt100{padding-top: 100px;}
    .pb5{padding-bottom: 5px;}
    .pb10{padding-bottom:10px;}
    .pb15{padding-bottom: 15px;}
    .pb20{padding-bottom: 20px;}
    .pb30{padding-bottom: 30px;}
    .pb50{padding-bottom: 50px;}
    .pb100{padding-bottom: 100px;}
    .pl5{padding-left: 5px;}
    .pl10{padding-left:10px;}
    .pl15{padding-left: 15px;}
    .pl20{padding-left: 20px;}
    .pl30{padding-left: 30px;}
    .pl50{padding-left: 50px;}
    .pl100{padding-left: 100px;}
    .pr5{padding-right: 5px;}
    .pr10{padding-right:10px;}
    .pr15{padding-right: 15px;}
    .pr20{padding-right: 20px;}
    .pr30{padding-right: 30px;}
    .pr50{padding-right: 50px;}
    .pr100{padding-right: 100px;}
    

      《高流量网站CSS开发技术》这本书可以参考!
      不过组织方式我觉得还是一致的约定比较重要

        主要是CSS规范和样式的写法。
        大概会讲到CSS组件化这些。

          • 819

          很赞同@night_lin的答案。写到结构的设计
          我试着来写写里面如何写具体的CSS。

          图片描述

          图片描述

          这个是wordpress的style.css 设计。

          不解释,自己看着写。

            • 1.2k

              为什么不用sass?

                • 895

                会用sass或less去编写,会有自己的组件库,然后业务页面有独立的sass文件,最后构建工具生成打包压缩成一个css文件上传到资源版本库,由版本库管理上线代码版本。

                  • 0
                  • 新人请关照
                    • 2.4k

                    scss / @import

                    ./framework/base.scss
                    ./css/app.scss
                    ./css/pages/

                    @import ./pages/..
                    @import ./pages/..
                    @import ./pages/..
                    

                    该答案已被忽略,原因:

                      撰写回答

                      登录后参与交流、获取后续更新提醒