写 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