切图崽的自我修养－合理组织CSS结构

cangck_X 发布于2019-08-29 10:57 / 2627人阅读

摘要：前言不要再叫我切图崽，我很生气，这样很不礼貌，请叫我前端工程师从方面来说，前端工程师和切图崽的区别，并不是指写单条技巧的高低，甚至很多工程师在一些的奇技淫巧都比不上切图崽那切图崽到底和工程师之间的差别是什么呢差别是年工作经验视野，是格局，是

前言

不要再叫我切图崽，我很生气，这样很不礼貌，请叫我前！端！工！程！师！

从css方面来说，前端工程师和切图崽的区别，并不是指写单条css技巧的高低，甚至很多工程师在一些css的奇技淫巧都比不上切图崽. 那切图崽到底和工程师之间的差别是什么呢？差别是 ~~N年工作经验~~ 视野，是格局，是从大方向上得出解决问题的能力

工程师们很少说哪一条css具体用到什么技巧，但肯定知道如何将项目按照科学的组织架构好，以及如此架构的原理，优劣性与局限性. 剩下具体的工作只要交给切图崽们去做就好

切图崽在于他的眼界只限那一行一行特定的css. 而对整个项目的文件组织和代码架构缺乏清晰的认识. 一个网站，几十个页面，它的css文件时按照什么逻辑组织起来才不至于陷入混乱？样式出bug如何尽快定位问题？

唉，这些问题好难，远不如无脑切图来的轻松. 是的，世界上从来不缺无脑做事的人，但为什么你要成为他们其中之一呢? 一旦认识到这一点，我们切图崽就离高大上的工程师又进一步了！

那么话说回来，一个中等复杂的web应用，到底它的css是如何组织的？

如何组织css架构

一般来说，css推荐采用

page.css ［页面级］

common.css [网站级]

base.css ［通用级]

这种自下而上的组织形式.各自的功能和定义如下:

page.css ［某个特定的页面的特定样式］

common.css［抽象出网站通用的组件样式］

base.css ［提供样式的reset以及原子类功能］

Base.css

如果把写css看作建造房屋，那么base.css相当于地基＋砖瓦

base.css和具体UI没有关系，它具有高度移植性，从而能够被任何风格的网站所引用. 一般来说base.css会采取 reset + atom 这种形式

[ 地基 ] Reset.css用来重置与兼容浏览器自带的一些 ~~通常不是我们想要的~~ 属性，比如浏览器自带的 padding与margin 以及 list-style

[ 砖瓦 ] Atom.css就是将 网站经常用到 并且 不可再拆分的样式 进行复用. 试想一下,一个中等规模的网站 ~~肯定不止~~ 有20多个界面，假如每个页面用到1次左浮动，我们要写20次 float:left ，这显然违背了DRY——Don"t Repeat Yourself的编码原则

Base.css的设置就是为了解决以上的两个问题,从而满足重置+复用

/*reset*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h3,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
    margin:0;
    padding: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
}




/*atom*/

/*文字*/
.f12{font-size:12px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f20{font-size:20px;}

/*定位*/
.tl{text-align:left}
.tc{text-aligh:center}
.tr{text-aligh:right}
.fl{float:left;}
.fr{float:left;}

/*宽高*/
.w10{width:10px}
.w20{width:20px}
.w40{width:40px}
.w60{width:60px}
.w80{width:80px}
.h50{height:50px}
.h80{height:80px}
.h100{height:100px}
.h200{height:200px}

/*边距*/
.m10{margin:10px;}
.mt10{margin-top:10px;}
.ml10{margin-right:10px;}
.p10{padding:10px;}
.pt10{padding-top:10px;}
.pl10{padding-left:10px;}

Common.css

接下来我们来制作窗户吧 !

地基打好了，砖瓦也有了，现在我们可以开始来制作窗户吧. 窗户与整个房屋的关系，相当于一个UI组件与整个网站的关系

举个栗子，不同的房屋之间可能用到的窗的样式是不同的，但针对特定一栋房屋的内部，窗的样式却基本是相同的. 所以在同一栋房屋内，我们是可以将窗户进行复用。即，只要刻一个模子做出第一扇窗，那么其他的门窗只要照着这个模子来复刻就好了，而用不着每次都从刻模子做起

这也为什么common.css是网站级的原因，不同的网站UI组件可能会差别很大，但同一个网站内部，一定遵循设计一致性原则. 所以common.css的职责就是把网站经常用到的整体样式 [弹窗、表单、按钮等] 抽象成UI组件进行复用

UI组件推荐根据功能划分成更小的子块以便能够更好地进行管理，譬如划分成 common-form.css, common-btn.css, common-pop.css等

 /* common-btn.css */

.lgBtn{...}
.mdBtn{...}
.smBtn{...}
.downloadBtn{...}

  /* common-form.css */

input[type="text"]{...}
input[type="radio"]{...}
input[type="checkbox"]{...}

 /* common-pop.css */

.msgPop{...}
.errPop{...}
.loadingPop{...}

Page.css

来点定制化的东西 !

门窗都弄好了，应该往房间里挂上一两副装饰画来彰显自己的品味修养. 我个人比较喜欢二次元大胸萌妹子，所以当然在卧室挂满了AKB48的海报. 但是如果把她们挂在客厅，就不太合适了. 客厅肯定只能挂［财源广进］［家和万事兴］［八骏图］之类的阿摔！

如果说common.css的职责就是将网站内的 高度重用的整体样式 抽象成UI组件实现复用，那么对于网页内的 非高度重用的样式 我就把它们放在page.css里

/* page.css */

/* index */
container .banner1{...}

/* contact us */
container .banner2{...}

/* about us */
container .banner3{...}

结语

在这个sass大行其道，各种组件框架层出不穷的时代，可能本文略显过时.更希望借鉴前人的开发经验以及基础，从而更好的运用到现有的框架中去.

有关模块化css, 命名，继承和组合的优劣性问题，就放在下一篇文章来说

文章参考自：编写高质量代码－Web前端开发修炼之道

云服务器 GPU云服务器切图崽组织结构组织结构图 php 公司组织结构

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111323.html

切图崽的自我修养－规范CSS元素命名

摘要：目前为止，这个命名已经可以打分，离满分存在的差距在哪里如果一律采取驼峰命名，在从属关系的可读性上，稍微差了一点，来比较一下这两个命名的可读性和明显采取驼峰匈牙利命名的方式可读性更强。前言为什么我刚才写的样式乱了？！如何给变量，文件命名是程序员的老大难问题。命名为什么会这么难，因为它太重要了。可以这么说，准确的命名可以提高代码的可读性，让人容易理解，方便调试，也给以后修改和维护你的...

mozillazg 2019-08-29 10:57 评论0 收藏0
切图崽的自我修养－提高项目加载速度

摘要：前言我的项目没问题，是用户的网络环境不够好前端作为一个最贴近用户的技术工种，毫无疑问应该把户体验放在第一位而用户体验，基本正比于页面的打开速度，特别是做移动端的同学，所以如何优化自己的项目，提高页面的加载速度成为重中之重资源的下载及解析对前前言我的项目没问题，是用户的网络环境不够好前端作为一个最贴近用户的技术工种，毫无疑问应该把户体验放在第一位. 而用户体验，基本正比于页面的打开...

yanwei 2019-08-01 15:25 评论0 收藏0
切图崽的自我修养－梳理Jquery API

摘要：前言梳理一下中还不太熟悉的事件绑定统一用摒弃掉之前的解绑事件统一用语法糖，支持多个事件绑定同一个函数语法糖，支持多个事件绑定不同的函数语法糖，支持多个事件绑定不同的函数可以往里传参可以给未创建的上绑定事件只能采取事件委托的形式所以写成这样是前言梳理一下Jquery中还不太熟悉的API Jquery事件绑定统一用on(摒弃掉之前的click,bind),解绑事件统一用off 语法...

warnerwu 2019-08-29 11:00 评论0 收藏0
切图崽的自我修养－梳理Jquery API

摘要：前言梳理一下中还不太熟悉的事件绑定统一用摒弃掉之前的解绑事件统一用语法糖，支持多个事件绑定同一个函数语法糖，支持多个事件绑定不同的函数语法糖，支持多个事件绑定不同的函数可以往里传参可以给未创建的上绑定事件只能采取事件委托的形式所以写成这样是前言梳理一下Jquery中还不太熟悉的API Jquery事件绑定统一用on(摒弃掉之前的click,bind),解绑事件统一用off 语法...

JerryZou 2019-08-19 18:44 评论0 收藏0
切图崽的自我修养－梳理Jquery API

摘要：前言梳理一下中还不太熟悉的事件绑定统一用摒弃掉之前的解绑事件统一用语法糖，支持多个事件绑定同一个函数语法糖，支持多个事件绑定不同的函数语法糖，支持多个事件绑定不同的函数可以往里传参可以给未创建的上绑定事件只能采取事件委托的形式所以写成这样是前言梳理一下Jquery中还不太熟悉的API Jquery事件绑定统一用on(摒弃掉之前的click,bind),解绑事件统一用off 语法...

loonggg 2019-08-01 15:26 评论0 收藏0