写 CSS 最好方法 OOCSS + Sass

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会让你的样式代码变得臃肿,但相比之下要完美的多。

幸运的是在 Sass 3.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等。

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

%media{

overflow: hidden;

&:first-child{

float: left;

}

&:last-child {

overflow: hidden;

}

}

.status.profile组件中使用的结构和.media模块的结构一样。

现在不需要在所有元素上重复使用.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.jpg") no-repeat;

background-size: 100% 100%;

}

%reversed-lip {

@extend %lip;

background-image: url(/public/images/patterns/lip/reversed-lip.jpg);

}

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 最好方法 OOCSS + Sass 的全部内容, 来源链接: utcz.com/z/264218.html

回到顶部