OOCSS——核心篇

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

上一节在《OOCSS——概念篇》中主要介绍了一些有关于OOCSS的概念性的东西,并以博客的“meta data”为例介绍了如何创建一个基础对象。赞同和反对使用OOCSS的声音都有,对这个感兴趣的朋友可以不用理会这些反对的声音,因为那些声音是无法阻挡我们对新知识的渴望。今天主要想借助OOCSS官网提供的相关资料,一起来学习Nicole Sullivan写的OOCSS核心东西。

在介绍OOCSS核心之前,大家可以到下面这两个地址下载相关代码下来(官网上有一个地址是错误的): oocss(git hub),如果使用git 的朋友可以直接从这个地址git下来:https://github.com/stubbornella/oocss.git(或者:git://github.com/stubbornella/oocss.git)另外一个下载地址是:Alternate download。然后把压缩包解压缩出来,其结构如下所示:

模板(Template)

如果大家下载了OOCSS,那么你就能在上图的位置找到这个Template文件目录,在这里我要说的就是其中的 themplate.css和template.html两个文件,因为其中一个是HTML结构,另一个是样式规则,他们的结合组成了我们前面所说的一个基础对象,在这里我把他叫作——布局对像。作为一个前端人员,页面的布局是每一个项目都需要去做,而且是不断的重复去做。这样一来大家为何不把这一块提出来,然后专门为此写一个布局对像呢?下在我们先来看看Nicole Sullivan是如何写的布局。

HTML Markup

				<div class="page">
					<div class="head">Header section</div>
					<div class="body">
						<div class="leftCol">Left column</div>
						<div class="rightCol">Right column</div>
						<div class="main">Main section</div>
					</div>
					<div class="foot">Footer section</div>
				</div>
			

CSS规则

				body{_text-align:center;}/* IE5.5 */
				.main{display:table-cell;*display:block;width:auto;}
				.body,.main{*zoom:1;}
				.body:after,.main:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:".";}
				.page{margin:0 auto;width:950px;_text-align:left;} /* wraps other template elems to set width */ /* text-align IE5.5 */
				/* "old school" and "liquid" extend page to allow for different page widths */
				.oldSchool{width:750px;}
				.gs960{width:960px;}
				.liquid{width:auto;margin:0;}
				/* ====== Columns ====== */
				.leftCol{float:left;width:250px;_margin-right:-3px;}
				.rightCol{float:right;width:300px;_margin-left:-3px;}
				/* extend columns to allow for common column widths */
				.gMail{width:160px;}
				.gCal{width:180px;}
				.yahoo{width:240px;}
				.myYahoo{width:300px;}
			

上面的代码主要是用来实现布局的效果,大家可以点击这里查看效果。上面的样式代码个人觉得有几个地方改进一下更好一些:

1、没有必要在body中设置text-align: center。因为这个主要是针对IE的怪异模式下让内容水平居中,就算是需要加也没有必要使用hack来解决,你可以这样来写

				body {text-align: center;}
				.page {text-align: left;}
			

2、清除浮动。至于清除浮动,我们只需要在需要清除浮动的地方增加一个clearfix类名(更详细的清除浮动可以点这里),并在这个类名上写相应的样式就OK了,换句话说创建一个清除浮动的对象,并可以重复使用,

				.body,.main{*zoom:1;}
				.body:after,.main:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:".";}
				/*可以换成*/
				.clearfix:before,
				   .clearfix:after {
				      content:"";
				      display:table;
				   }
				   .clearfix:after {
				     clear:both;
				   }
				  .clearfix {
				     zoom:1; /* IE < 8 */
				  }
			

当然在html上也需要做相应的调整。

				<div class="page">
					<div class="head">Header section</div>
					<div class="body clearfix">
						<div class="leftCol">Left column</div>
						<div class="rightCol">Right column</div>
						<div class="main clearfix">Main section</div>
					</div>
					<div class="foot">Footer section</div>
				</div>
			

但此处展示了一种很好的三列布局的代码:

				.page{margin:0 auto;width:950px;_text-align:left;}
				.main{display:table-cell;*display:block;width:auto;}
				/* ====== Columns ====== */
				.leftCol{float:left;width:250px;_margin-right:-3px;}
				.rightCol{float:right;width:300px;_margin-left:-3px;}
			

这里我需要提出的一点是main的样式:.main{display:table-cell;*display:block;width:auto;}.

这里作者只是展示了一种她自己定义的布局模式,当然大家肯定也有一些自己独特的见解,我个人更趋向于grids布局,如:960sYUI GridsBlueprint CSSYAML1140GridsColumnal。感兴趣的朋友可以了解一下这方在的知识。

媒体对象(Media Objects)

媒体对象常见的就是“左边是图像,右边是描述性的内容排列;或者左边是描述性内容排列,右边是图片”,如下图所示:

oocss用在媒体对象上,意味着图像可以是任意大小,并且描述性文本内容不会围绕着图片周围,只是保持在一条直线上左对齐,如上图那样的效果,很多网站都应用过,我们可以通过对像的使用css和html,我们不必要设置每列的宽度值,而且还可以使用任意大小的图像。像这种媒体对象,我们常使用,我们只需要为这样的效果创建一个对象,这样我们就可以在不同的项目中重复使用。首先创建html

				<div class="media clearfix">
				  <a href="aboutme.html" class="fixedMedia icon">
				     <img src="myimage.png" alt="img" />
				  </a>
				  <div class="mediaDes clearfix">
				     Something about me
				  </div>
				 </div>
			

给他写上样式

				.media {margin: 10px;}
				.mediaDes {display: table-cell;zoom:1;}
				.mediaDes > :first-child{margin-top:0;}/*你也可以在这个标签中加上一个类名.nmT {margin-top:0;}*/
				.mediaDes > :last-child{margin-bottom:0;}/*在这个标签上加上一个类名.nmB {margin-bottom:0}*/
				.fixedMedia {float:left;margin-right:10px;}/*这两个属性完全可以用类名来代替:.fl{float:left} .mrm {margin-right: 10px}*/
				.fixedMedia img {display: block;}
				.fixedMediaR {float:right;margin-left: 10px;}/*这两个属性完全可以用类名来代替:.fr{float:right} .mlm {margin-left: 10px}*/
			

上面是图像在左边,描述生内容在右边,如果你想图像在右边,描述性内容在左边。其实只要把fixedMedia换成fixedMdiaR就实能实现了。

网格系统(Grid System)

网格系统对于大家最熟悉应该是960s吧以及后面的1140s,那么今天这个oocss网格系统也是一样的原理,oocss网格系统使用基于宽度的百分比来设定的,其类名相当的好记,就是其宽度所占宽度的几分之几,如:

				.size1of1{float:none;}/*100%宽度*/
				.size1of2{width:50%;}/*占总宽度的一半:1/2*/
				.size1of3{width:33.33333%;}/*占总宽度的三分之一:1/3*/
				.size2of3{width:66.66666%;}/*占总宽度的三分之二:2/3*/
				.size1of4{width:25%;}/*占总宽度的四分之一:1/4*/
				.size3of4{width:75%;}/*占总宽度的四分之 三:3/4*/
				.size1of5{width:20%;}/*占总宽度的五分之一:1/5*/
				.size2of5{width:40%;}/*占总宽度的五分之二:2/5*/
				.size3of5{width:60%;}/*占总宽度的五分之三:3/5*/
				.size4of5{width:80%;}/*占总宽度的五分之四:4/5*/
			

这些单元格可以相互嵌套,并保持良好的比例,这些单元格不仅可以应用在页面的栏目上,而且还可以利用他创建出漂亮的布局。类似下在的结构:

				<div class="unit size1of2">
				  <div class="unit size1of3">
				     <p>Lorem</p>
				  </div>
				  <div class="unit size1of3">
				     <p>Ipsum</p>
				  </div>
				</div>
				<div class="unit size1of2">
				  <div class="unit size1of4">
				     <p>Lorem</p>
				   </div>
				   <div class="unit size3of4">
				      <p>Ipsum</p>
				    </div>
				</div>
			

为了让网格趋运行更稳定,可以用一个line的div一包装每组单元格,如下所示:

				<div class="line">
					<div class="unit size3of5"></div>
					<div class="unit size1of5"></div>
					<div class="unit size1of5 lastUnit"></div>
				</div>
			

我们可以给这种结构写上一个统一的样式:

				.line:before,.line:after{content:"";display:table;}
				.line:after{clear:both;}
				.line{*zoom:1;}
				.unit{float:left;}
				.unitRight{float:right;}
				.size1of1{float:none;}
				.size1of2{width:50%;}
				.size1of3{width:33.33333%;}
				.size2of3{width:66.66666%;}
				.size1of4{width:25%;}
				.size3of4{width:75%;}
				.size1of5{width:20%;}
				.size2of5{width:40%;}
				.size3of5{width:60%;}
				.size4of5{width:80%;}
				.lastUnit{float:none;display:block;display:table-cell;width:9999em;*width:auto;*zoom:1;_position:relative;_left:-3px;_margin-right:-3px;}
			

大家可以点击下在这个DEMO。这里只是介绍的一种思路,大家也还可以根据自己的需要,增加1/6,1/7等等。

模块(Module)

模块这一块,个人觉得很多地方需要根据自己的项目需求来制作,大家要是感兴趣可以去下载Nicole Sullivan写的那个Module,或者点击这里用firebug查看。

间距(spacing)

Web页面上的间距平时制作中对我来说最烦人了,每一个地方都城要去测量,这样一来有时并不标准,或多或少产生不同的视觉效果,你们说我是很SB的呀,看了这个后我才觉得原来间距定起来并不复杂,下面把常用的代码贴出来与大家一直分享一下:

				 /* ====== Default spacing ====== */
				h1, h2, h3, h4, h5, h6, ul, ol,dl, p,blockquote, .media {margin:10px;}
				h1, h2, h3, h4, h5, h6,img{padding-bottom:0px;}
				pre{margin: 10px;}
				table h1,table h2,table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl{padding:0;}

				/* spacing helpers
				p,m = padding,margin
				a,t,r,b,l,h,v = all,top,right,bottom,left,horizontal,vertical
				s,m,l,n = small(5px),medium(10px),large(20px),none(0px)
				*/

				.ptn,.pvn,.pan{padding-top:0px !important}
				.pts,.pvs,.pas{padding-top:5px !important}
				.ptm,.pvm,.pam{padding-top:10px !important}
				.ptl,.pvl,.pal{padding-top:20px !important}
				.prn,.phn,.pan{padding-right:0px !important}
				.prs,.phs,.pas{padding-right:5px !important}
				.prm,.phm,.pam{padding-right:10px !important}
				.prl,.phl,.pal{padding-right:20px !important}
				.pbn,.pvn,.pan{padding-bottom:0px !important}  
				.pbs,.pvs,.pas{padding-bottom:5px !important}
				.pbm,.pvm,.pam{padding-bottom:10px !important}
				.pbl,.pvl,.pal{padding-bottom:20px !important}
				.pln,.phn,.pan{padding-left:0px !important}
				.pls,.phs,.pas{padding-left:5px !important}
				.plm,.phm,.pam{padding-left:10px !important}
				.pll,.phl,.pal{padding-left:20px !important}
				.mtn,.mvn,.man{margin-top:0px !important}
				.mts,.mvs,.mas{margin-top:5px !important}
				.mtm,.mvm,.mam{margin-top:10px !important}
				.mtl,.mvl,.mal{margin-top:20px !important}
				.mrn,.mhn,.man{margin-right:0px !important}
				.mrs,.mhs,.mas{margin-right:5px !important}
				.mrm,.mhm,.mam{margin-right:10px !important}
				.mrl,.mhl,.mal{margin-right:20px !important}
				.mbn,.mvn,.man{margin-bottom:0px !important}  
				.mbs,.mvs,.mas{margin-bottom:5px !important}
				.mbm,.mvm,.mam{margin-bottom:10px !important}
				.mbl,.mvl,.mal{margin-bottom:20px !important}
				.mln,.mhn,.man{margin-left:0px !important}
				.mls,.mhs,.mas{margin-left:5px !important}
				.mlm,.mhm,.mam{margin-left:10px !important}
				.mll,.mhl,.mal{margin-left:20px !important}				
			

那么有产于Nicole Sullivan写的OOCSS的相关核心东西,我就介绍完了,逻辑不够清晰,希望对大家理解OOCSS有所帮助。如果你OOCSS感兴趣的话,或者你相知道如何创建基础对象的详细方法,可以看看Nicole Sullivan写的另一篇文章《How to create CSS objects? Get the granularity right!》或者点击下成的视频:

如需转载烦请注明出处:W3CPLUS

Nike Magista Obra Low

如需转载,烦请注明出处:https://www.w3cplus.com/css/oocss-core

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部