CSS模式教程:OOCSS和Sass结合

2013-09-12 21:47:55  来源:网页教学网 

网页制作Webjx文章简介:如果你把OOCSS和Sass结合在一起,你会得到两个优势:CSS模块不臃肿和HTML维持不变。

OOCSS非常棒。但在HTML标签中有很多不具语义化的类名也并不可怕。而在HTML标签上的类名会改变就是一件很有趣的事情。如果你把OOCSS和Sass结合在一起,你会得到两个优势:CSS模块不臃肿和HTML维持不变。

OOCSS指引HTML的维护

首先,简单的声明,你可能第二次看到非语义(non-semantic)这个词。事实上是这样的,我并不太关心他介是不是“非语义”,我更在意的是维护。非语义类不能很好的描述一个组件,这意味着他们将会改变。

到目前为止,纯CSS控制模块的唯一方式就是定义语义化类名。然后将这些类名运用在HTML元素上。这是使用OOCSS创建模块的方式,但其中存在很多问题:

  • 我不想每次去修改HTML标签,而只想通过CSS来触发。因为我在一家创业公司上班,我没有太多时间来处理这些。
  • 甚至很多时候我没办法访问DOM元素,也不能在DOM元素上添加我需要的类。如果在你的页面中使用JavaScript组件添加元素,你是没有办法在这个组件内部添加类名。

除了HTML不可维护之外,有关于OOCSS的其他方面都是完全正确的。在大项目中将模块抽象出来重复使用,唯一方法是CSS进行维护。那么这样我们从中得到什么好处,又有什么坏处呢?

OOSass来拯救你

OOCSS和Sass结合会让你变得更强大。@extend在Sass中可以直接让你从另一个选择器中继承样式,而不用像@mixin一样,复制里面的一切样式。如果你使用嵌套或者选择器嵌套,@extend会让你的样式代码变得臃肿,但相比之下要完美的多。

幸运的是在Sass3.2中添加了一个placeholder,除非你扩展了placeholder选择器,不然他是不会生成任何代码。这里有一个placeholders的简单示例:

%separator{   border-top: 1px solid black; } hr{   @extend %separator; } .separator{   @extend %separator; }     

编译出来的CSS

hr, .separator {     border-top: 1px solid black } 

placeholders不会像@mixin或者@extend扩展类选择器一样产生臃肿的代码。这让placeholders适合CSS创建非语义化的模块。我把这种模块叫做patterns。他们是一小段一小段的样式代码,你可以混合和匹配在你的样式表中。

秀一个真正有用的实例

带来一个OOCSS的黄金案例:.media模块。你可能想把.media模块运用到你的一些组件中:.status.profile等:

 

.media是一个经典的模块,详细介绍可以参阅《CSS制作Facebook的媒体对象》。

 

事情是这样的,如果你不想在你的HTML中重复使用.media模块结构。特别是因为你已经重复使用了.status.profile组件结构。这个时候%placeholder就起了很大的作用,这里我们定义一个%media

%media{   overflow: hidden;   &:first-child{     float: left;   }         &:last-child {     overflow: hidden;   }   } 
 

.status.profile组件中使用的结构和.media模块的结构一样。详细结构可以参阅Bootstrap中的Media object结构。

 

现在不需要在所有元素上重复使用.media,你只需要在你想要使用的地方扩展%media

.status{   @extend %media;   //Status-sepecific styles here... } .profile{   @extend %media;   //Profile-sepecific styles here... } 

这意味着在你的HTML标签中你只需要定义一个具有语义化的类名:.status.profile,而不需要考虑是添加.media这样的类名,只要你有对应的<article>这样的元素标签,而不需要考虑他们是否存在。

这样变得有灵活性。如果你决定.status不在适合使用.media模块,就直接在Sass中不使用@extend开启%media。你不需要到HTML标签中删除.media类名。

你可能已经注意到了,我使用了一个微调后的.media模块。就算是你使用JavaSctrip向DOM中插入组件,这个模块同样可以适用。

OOSass使用JavaScript组件样式更简单

最大的问题是假设你能完全操控你的DOM和可以为DOM元素添加你想要的类名。但这种情况并不是永远都存在的。当你使用JavaScript组件或者使用别人的代码来渲染,你只能碰的就是最高层的元素组件。

 

特别在一些使用JavaScript组件来渲染页面或者一些CMS系统,你没有一定的能力为相关的DOM元素添加类名。你会感觉CSS是多么的无耐。

 

如果你使用DropdownView给你的页面添加了一个.user-dropdown元素,你可以给.user-dropdown添加一个类名.media,但你没有办法这下接元素的.button或者他的.menu-item添加类名,因为你没法控制这个组件内部的DOM元素。

但使用Sass的%placeholders,这将不在是问题:

.dropdown{     //Normal styles for very dropdown ... } .user-dropdown{     //Extra styles for user-specific dropdowns …     .menu-item{         @extend %media;     } } 

你想要做的事情就是用什么方式让纯CSS的类名能工作:插入组件和摧毁组件的封闭,或者使用其他基于字符串的的类名某个API。但是你可以使用Sass轻松的控制,而不需要直接控制DOM元素。

展示实例

我喜欢阅读别人的CSS模式,所以我想分享一些我自己的。这里有一些我使用的的CSS模式,这些模式都应用在Segment.io中。

Lip

这是一个Apple-style分离器,在一个内容下面创建了一个lip(使用%reversed-lip创建了一个与lip反方向的样式):

%lip {     clear:both;     display:block;     height: 5px;     background: url("/public/images/patterns/lip/lip.png") no-repeat;     background-size: 100% 100%; }  %reversed-lip {     @extend %lip;     background-image: url(/public/images/patterns/lip/reversed-lip.png); } 

Valley

这个是在一个元素的顶部和底部添加了lip,让它看上去是嵌入到周围的区域:

%valley{     position: relative;     overflow: hidden;      &::before,     &::after{         content: '';         position: absolute;         left: 0;         right: 0;     }         &::before{         @extend %lip;         top: 0;     }         &::after{         @extend %reversed-lip;         bottom: 0;     }     }         

Plane

是一个非常简单的圆角框:

%plane{     box-shadow: 0 2px 5px rgba($black, .1);     border-radius: $border-radius-medium; } %white-plane{     @extend %plane;     background-color: $white; } %off-white-plane{     @extend %plane;     background-color: $off-white; } ... 

Seam

常看到一些人将一条黑色和一条白色放在一起,并让它们有一定的透明,我们常把这种效果称为seam:

%seam{     clear: both;     display: block;     height: 0px;     border-top: 1px solid rgba($black, .12);     border-bottom: 1px solid rgba($white, .15); }     

Well

效果类似于valley,这个效果让人看上去有点抑郁,一般都用在<code>块中:

%well{     box-shadow: inset 0 1px 5px rgba($black, .14);     border-radius: $border-radius-medium; } %off-white-well{     @extend %well;     background-color: $off-white; } %light-gray-well{     @extend %well;     background-color: $light-gray; } ... 

现在轮到你了

希望能给你一个好的模式主意和如何更好的使用你的CSS组件。

他们应该只做一件事,他们应该做得很好。Harry Roberts提到你应该保持他们的名字模糊和非语义。是让你不得不让他们适合你的内容,这样你就可以使用它们在任何地方。但是你可以创建一个在他们之上的模式,就像我们前面看到的valley示例。

如果我有自己的CSS模式,我非常期待能看看。

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

英文原文:http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/

中文译文:http://www.w3cplus.com/preprocessor/oocss-plus-sass-is-the-best-way-to-css.html

更多