欢迎大家在这里学习div使用Sass编写!下面是我们给大家整理出来的精彩内容。希望大家在这里学习!

OOCSS不同于其他组织CSS代码方法，比如SMACSS或者BEM。通过将CSS代码和结构分离让你的模块可重用。事实上，我也通常将SMACSS与OOCSS混为一谈。

OOCSS、SMACC和BEM在CSS中是很有内涵的东东，早就在W3cplus站点上有相关内容科普过。可以说理解了这些内容将能更好的帮助您组织、管理您的CSS代码或者说CSS模块。

什么是对象?

在视觉是这是一个重复的模块，可以将HTML、CSS和JavaSctrip独立抽取出来，成为一个独立的片段——Nicole Sullivan

将一个CSS对象抽取出来要考虑的第一件事情就是怎么将样式与结构分离出来，组织代码的最佳方式是什么?OOCSS的创始人Nicole Sllivan提了两个主要原则：

结构与样式分离：你应该在对象中定义结构和位置，而对于样式特性应该使用类名分离出来，比如说background或border。这样一来你就不需要去覆盖一些特征性样式。

容器与内容分离：不要在你的HTML结构中插入样式。换句话说，你的样式中尽量不要使用html标签或者id标识符。相反，应该定义一些类名来定义样式，而且选择器的嵌套的层级应该尽量的少。

我们快速做一个示例

运用这些原则可能比较困难(理解理论的东西总是蛋疼的)。让我们来看一个简单的实例，看看是如何组织这样的代码:

CSS Code复制内容到剪贴板

/* 不好的方式 */

.box-1 {

border: 1px solid #ccc;

width: 200px;

height: 200px;

border-radius: 10px;

}

.box-2 {

border: 1px solid #ccc;

width: 120px;

height: 120px

border-radius: 10px;

}

你不难发现，有一些重复的样式出现。在这个例子中，border样式在两个类中都定义了。如果你想改变border-radius或border属性值时，不得不在两个地方修改。

为了解决这个问题，把这个样式放在另一个新增加的类名中：

CSS Code复制内容到剪贴板

/* 好的方式 */

.box-1 {

width: 200px;

height: 200px;

}

.box-2 {

width: 120px;

height: 120px;

}

.box-border{

border: 1px solid #CCC;

border-radius: 10px;

}

在HTML结构中，我们可以这样使用：

XML/HTML Code复制内容到剪贴板

Lorem ipsum

Lorem ipsum

语义化和维护

你在意没有语义化，而我更关心的是代码的维护。比如说这个示例所示。

纯CSS来定义对象就没有语义化，但这样就存在一些问题:

每次改为样式风格时，都需要修改HTML

没有一种安全的方式来访问DOM元素

对于OOCSS来说，除了维护HTML比较困难之外，其他都是很完美的。我们的CSS很容易扩展，也非常方便用于新的内容中。

因此我们写了部分CSS代码用于在HTML结构中进行扩展。这样的方式真的会变得更好?

Sass的到来

我可以肯定你肯定听过Sass的@extend命令和了解他是如何工作的。因此，要非常感谢选择器的占位符%placeholder，在Sass中可以通过@extend来扩展，如此一来在CSS就是可以创建一些有语义化的类名，也解决了HTML中的存在的问题。

我们必须使用%placeholder来创建对象，通过@extend在类中调用，将其合在一起。这样就可以自己组织代码：

CSS Code复制内容到剪贴板

/* 不好的方式 */

a.twitter {

min-width: 100px;

padding: 1em;

border-radius: 1em;

background: #55acee

color: #fff;

}

span.facebook {

min-width: 100px;

padding: 1em;

border-radius: 1em;

background: #3b5998;

color: #fff;

}

所有的对象都使用@extend和基本对象混合在一起，这样就可以得到一个干净的CSS对象，在Sass中是十分容易的事情，我们也不必要再花时间来修改HTML。

CSS Code复制内容到剪贴板

/* 好的方式 */

%button {

min-width: 100px;

padding: 1em;

border-radius: 1em;

}

%twitter-background {

color: #fff;

background: #55acee;

}

%facebook-background {

color: #fff;

background: #3b5998;

}

.btn {

&--twitter {

@extend %button;

@extend %twitter-background;

}

&--facebook {

@extend %button;

@extend %facebook-background;

}

}

好了，div使用Sass编写内容就给大家介绍到这里了。希望大家继续关注我们的网站!

相关推荐：

使用css实现圆角图形绘制的方法