OOCSS 与 Sass 结合使用

OOCSS+Sass

Krasimir Tsonev 在《Starting to Write CSS》让你领略了CSS其实也是有思想的,也很有意思的。虽然介绍的各种思想都很强大,但始终没有离开CSS的层面,而CSS却又是非常的脆弱。那么有没有办法,能否结合文中多个思想在一起。你思考过吗?如果你还没有思考并不要紧,今天我们一起跟随 Takeshi Takatsudo 写的 PPT 来领略一下OOCSS与Sass的结合。

在这篇文章,主要以两个按钮的制作,来探讨OOCSS的思想以及如何结合Sass更完美的实现。或者说,通过按钮的制作,一起探讨在Sass中如何使用OOCSS的思想。希望大家喜欢。

OOCSS

面向对像对于一位程序员来说并不会陌生,因为他成任何现代编程语言的一种基本形式,数据的抽象化、模块化和继承等特点在编写代码中得到了大规模的应用。而面向对象的CSS简称为OOCSS熟悉的人并不太多。面向对象的CSS是一种容易重用的一种CSS规则,也是OOP概念,从而降低了页面加载时间,提高网站性能。

OOCSS 不是一个框架,也不是一种技术,更不是一种新的语言,他只不过是一种方法,一种书写方法。换句话说OOCSS其核心就是用最简单的方式编写最整洁,最干净的CSS代码,从而使用代码更具重用性,可维护性和可扩展性。

OOCSS 咱们可以理解成为一种书写CSS的思想,而这种思想最关键的一点是如何在页面中识别,创建和模块化可重用的对像,并在页面中任何需要的地方重用,并扩展其附加功能。简单一句话概括:

OOCSS 就是的确定对象,并给这个对象创建CSS样式规则

引用 OOCSS 之父 Nicole Sullivan 的话来说,OOCSS 有两个原则:

  • 独立的结构和样式
  • 独立的容器和内容

OOCSS与Sass的结合

前面说过,CSS总是脆弱的。我们应该寻找更强大的东西来代替CSS。接下来也就是我们今天最主要的一部分内容——OOCSS与Sass的结合。

接下来我们用一个简单的按钮示例来做为整篇文章的路线。首先我们有两个这样的按钮,如下图所示:

OOCSS+Sass

根据上图的效果,很多CSSer不经意定义出一个没有任何语意化的类名:

<a rel="nofollow" href="http://www.wenjiangs.com/preprocessor/#" class="blackborder redbg">Twitter</a>

<a rel="nofollow" href="http://www.wenjiangs.com/preprocessor/#" class="blackborder bluebg">Facebook</a>

两个具有黑色边框的按钮都定义了一个blackborder的类名,用来控制按钮的边框,同时在红色按钮上添加了类名redbg,在蓝色按钮添加了类名bluebg。但定义这样的类名是否有考虑过,如果哪一天,页面的按钮边框不在是黑色,背景不在是红色和蓝色时候,你将又是如何考虑。所以说这样定义类名是你样式中的一大败笔。对于我个人而言,我是无法忍受的。

或许你也发现,这样命名类名也自己无法接受,想来想去,是要换点有语义化的类名,这样一来看到类名,就知道了按钮指的是什么按钮,于是就将前面的类名修改成了twitterbtnfacebookbtn

<a rel="nofollow" href="http://www.wenjiangs.com/preprocessor/#" class="twitterbtn">Twitter</a>

<a rel="nofollow" href="http://www.wenjiangs.com/preprocessor/#" class="facebookbtn">Facebook</a>

类名已经有语义化了,接着我看这两个按钮的样式:

/*twitter button*/

.twitterbtn {

border:3px solid #000;

padding:10px 20px;

color:#fff;

border-radius:10px;

background:red;

}

/*facebook button*/

.facebookbtn {

border:3px solid #000;

padding:10px 20px;

color:#fff;

border-radius:10px;

background:blue;

}

从样式中,我们不难发现,两个按钮有很多样式都是一样的:

border:3px solid #000;

padding:10px 20px;

color:#fff;

border-radius:10px;

在CSS中,可以将这个样式称之为公用样式,或许你首先想到的是,将两个按钮公用样式提取出来,通过组合选择器来处理:

.twitterbtn,

.facebookbtn{

border:3px solid #000;

padding:10px 20px;

color:#fff;

border-radius:10px;

}

.twitterbtn{

background:red;

}

.facebookbtn{

background:blue;

}

根据OOCSS的原则,可以将按钮共同样式部分定义为一个对象btnbase,并且将这部分相同的样式赋予给他。这样一来,将这个对像类名加到按钮标签中:

<a rel="nofollow" href="http://www.wenjiangs.com/preprocessor/#" class="btnbase twitter">Twitter</a>

<a rel="nofollow" href="http://www.wenjiangs.com/preprocessor/#" class="btnbase facebook">Facebook</a>

使用OOCSS之后,相同样式(此处称之为皮肤)赋予给对像btnbase,在两个按钮中都可以调用这个对象btnbase,并且重用他的样式:

.btnbase {

border:3px solid #000;

padding:10px 20px;

color:#fff;

border-radius:10px;

}

.twitter {

background:red;

}

.facebook {

background:blue;

}

按上面的方法,你已成功的将OOCSS运用到你的CSS中,或许你又会开始纠结:

<a rel="nofollow" href="http://www.wenjiangs.com/preprocessor/#" class="btnbase twitter">Twitter</a>

<a rel="nofollow" href="http://www.wenjiangs.com/preprocessor/#" class="btnbase facebook">Facebook</a>

添加对象类名btnbase之后,他具有语义化吗?开始纠结中,也开始思考中…

相比之下,没有对象类名btnbase

<a rel="nofollow" href="http://www.wenjiangs.com/preprocessor/#" class="twitterbtn">Twitter</a>

<a rel="nofollow" href="http://www.wenjiangs.com/preprocessor/#" class="facebookbtn">Facebook</a>

上面的更具语义化,但是又脱离了OOCSS,真心的又纠结起来了…

纠结来纠结去,还是因为CSS离完美化太遥远,仅靠CSS自身几乎不可能做好每件事。既然CSS无法完美的解决,为何不考虑CSS预处理器Sass呢?可以使用@extend来扩展CSS的类。

如果你对Sass有过了解,扩展CSS的类,在Sass中有两种方法都可以轻意实现:

首先使用Sass中的mixin将按钮的公用样式定义一个@mixin btnbase,然后通过@include在各个按钮中调用这个mixin:

//HTML

<a rel="nofollow" href="http://www.wenjiangs.com/preprocessor/#" class="twitterbtn">Twitter</a>

<a rel="nofollow" href="http://www.wenjiangs.com/preprocessor/#" class="facebookbtn">Facebook</a>

//SCSS

@mixin btnbase {

border:3px solid #000;

padding:10px 20px;

color:#fff;

border-radius:10px;

}

.twitterbtn {

@include btnbase;

background:red;

}

.facebookbtn {

@include btnbase;

background:blue;

}

编译出来的CSS:

.twitterbtn{

border:3px solid #000;

padding:10px 20px;

color:#fff;

border-radius:10px;

background:red;

}

.facebookbtn{

border:3px solid #000;

padding:10px 20px;

color:#fff;

border-radius:10px;

background:blue;

}

通过mixin扩展出来的CSS类,编译出来的CSS并不完美,重复生成了一些相同的代码,对于有代码洁癖的同学是无法接受的。

熟悉Sass的同学都知道,实现类似上面扩展CSS类名功能,除了mixin之外,还有一个@extend。使用@extendmixin基本类似,不同的是,直接在Sass中定义一个类名,然后通过@extend来调用:

//SCSS

.btnbase{

border:3px solid #000;

padding:10px 20px;

color:#fff;

border-radius:10px;

}

.twitterbtn{

@extend .btnbase;

background:red;

}

.facebookbtn{

@extend .btnbase;

background:blue;

}

//编译出来的CSS

.btnbase,

.twitterbtn,

.facebookbtn{

border:3px solid #000;

padding:10px 20px;

color:#fff;

border-radius:10px;

}

.twitterbtn{

background:red;

}

.facebookbtn{

background:blue;

}

使用@extend扩展类名较mixin扩展类名,编译出来的CSS代码更干净,从而让你的样式文件体积也变得更小,性能更优。不过其有一个缺点就是,HTML结构中并没有使用btnbase类名,在样式中会生成这个类名。不过在Sass3.2中,可以使用%placeholder修改这个问题,稍后会介绍这个东东。

上面分别介绍了CSS和Sass使用对象的方法,从中也看出他们略有不同,结合前面的内容,通过一张图更能向大家说明CSS和Sass中使用对象解析机制:

OOCSS+Sass

上图可以清晰的看出,在CSS中,对象都收集在样式中,并以一个类名定义,比如此例中使用了btnbase,然后通过HTML中添加类名来扩展。也就是说需要HTML和CSS同时维护这个公用对象。而在Sass中,将公用对象收集在Scss文件中,并且直接在Scss文件中扩展对象,通过编译出新的CSS。也就是说只需要在Scss文件中维护和扩展公用对象。明显在Sass中使用面向对象要比在CSS中使用面向对象来得简单与方便。概括起来主要有以下几点:

  • CSS太脆弱,很难维护
  • CSS可以使用多类名来辅助
  • Sass易于维护
  • Sass需要编译

那么我们在回过头来,在Sass中通过定义一个类名.btnbase,并使用@include调用.btnbase,编译出来的CSS会有.btnbase存在,无论这个.btnbase是否在结构中调用都将存在。那么在Sass3.2中,我们可以使用%placeholder来代替.btnbase。这样一来,编译的CSS中.btnbase将不会存在。

//SCSS

%btnbase {

border:3px solid #000;

padding:10px 20px;

color:#fff;

border-radius:10px;

}

.twitterbtn {

@extend %btnbase;

background:red;

}

.facebookbtn {

@extend %btnbase;

background:blue;

}

//编译出来的CSS

.twitterbtn, .facebookbtn {

border: 3px solid #000;

padding: 10px 20px;

color: #fff;

border-radius: 10px;

}

.twitterbtn {

background: red;

}

.facebookbtn {

background: blue;

}

总结

将面向对象运向到Sass中,让你让明显的体会到CSS是多么的脆弱,就算是使用了面向对象,也会让你的代码增加一些额外的代码,而这些代码让你难易维护。而在Sass中却不一样,可以将面向对象(公用代码)提取出来,通过%placeholder来定义(当然有很多时候也可以使用mixin,比如要传参的时候),将在Sass中直接调用。这样避免在了HTML中通过扩展类名来调用公用部分(对象)。本文通过两个按钮的简单实例为路线,简单的介绍了OOCSS与Sass结合的强大力量与优势。

以上是 OOCSS 与 Sass 结合使用 的全部内容, 来源链接: utcz.com/p/234007.html

回到顶部