前言
不要再叫我切图崽,我很生气,这样很不礼貌,请叫我前!端!工!程!师!
从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前端开发修炼之道
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。