使用 Sass 来写 OOCSS 帮助您组织 / 管理您的 CSS 代码 / 模块

发布于 2020-10-26 15:38:55 字数 4227 浏览 1162 评论 0

自从 2008 年 Nicole Sullivan 提出 Object-Oriented CSS (OOCSS)以来。它就成为一个领先的模块系统,用来组织你的CSS代码方式之一。

OOCSS不同于其他组织CSS代码方法,比如 SMACSS 或者 BEM 。通过将CSS代码和结构分离让你的模块可重用。事实上,我也通常将SMACSS与OOCSS混为一谈。其实 John W. LongThe Sass Way 上面写了很多篇有关于 CSS模块化的教程

OOCSS 、 SMACC 和 BEM 在CSS中是很有内涵的东东,可以说理解了这些内容将能更好的帮助您组织、管理您的 CSS 代码或者说 CSS 模块。

今天,我要和大家一起探讨的是 OOCSS 的一些基本原则。主要跟大家一起探讨的是如何将Sass和OOCSS更好结合在一起的一些建议。

什么是对象?

在视觉是这是一个重复的模块,可以将 HTMLCSSJavaSctrip 独立抽取出来,成为一个独立的片段——Nicole Sullivan

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

  • 结构与样式分离:你应该在对象中定义结构和位置,而对于样式特性应该使用类名分离出来,比如说 backgroundborder 。这样一来你就不需要去覆盖一些特征性样式。
  • 容器与内容分离:不要在你的HTML结构中插入样式。换句话说,你的样式中尽量不要使用 html 标签或者 id 标识符。相反,应该定义一些类名来定义样式,而且选择器的嵌套的层级应该尽量的少。

我们快速做一个示例

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

/* 不好的方式 */
.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-radiusborder 属性值时,不得不在两个地方修改。

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

/* 好的方式 */
.box-1 {
  width: 200px;
  height: 200px;
}
.box-2 {
  width: 120px;
  height: 120px;
}
.box-border{
  border: 1px solid #CCC;
  border-radius: 10px;
}

在HTML结构中,我们可以这样使用:

<div class="box-1 box-border">Lorem ipsum</div>
<div class="box-2 box-border">Lorem ipsum</div>

语义化和维护

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

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

  • 每次改为样式风格时,都需要修改HTML
  • 没有一种安全的方式来访问DOM元素

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

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

Sass 的到来

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

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

/* 不好的方式 */
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。

/* 好的方式 */
%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;
  }
}

具有语义化了,完美?Sass解决了我们的总是。记住: @extend 让你的HTML保持最干净,而且又具有语义化,这在Sass中是件十分容易的事情。

我喜欢把其称为OOSass,因为他是OOCSS和Sass的混合物。当然,你不必使用它。如果你不在刻意在HTML中追求语义化,你仍然可以使用OOCSS。每个人都有自己的方式,那么你又是如何构建你自己的CSS呢?请与我们一起分享。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

虐人心

有一天你能到我的心里去,你会看到那里全是你给的伤悲。

0 文章
0 评论
24490 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。