OOCSS —— 面向对象CSS
在本文中,你将学习书写CSS的最佳实践来帮助你避免不一致和冗余;实际上,这样制定标准,简化了团队开发的工作。
1)结构化
(根据不同内容分区块,加注释)
2)越多的CSS就需要越多的组织
(加二级注释)
3)*格式化
另一些人使用特殊字符如‘=’,作为搜索字符的标记:
4)交流注释用法
5)什么时间,谁做了什么
(文件头部增加文件创建和更新的摘要注释)
6)颜色值
COLORS: Green #b3d88c | Blue #0075b2 | Light Gray #eee | Dark Gray #9b9e9e | Orange #f26522 | Teal #00a99d | Yellow #fbc112
(提前定好,方便维护)
7)开发和调试
(将有问题或疑惑的地方注释出来,有时间时找同事一起解决)
8)样式重置
Eric Meyer的重置文档,去掉用不到的标签。
不过,我应该澄清一下,css重置并不适用于所有人。你有很多不使用他的理由,这由你决定。如果你要重置样式,要保持你的重置样式表尽量干净和特殊。
9)命名约定
不仅仅是上下文,有语意的命名还可以节约时间。考虑到一个公司品牌的频繁更换,如果你开发的css使用表现的类名而不是语义化的类名和id名,那么在寻找、维护css时,你将比预期花费更多的时间。
10)类名滥用
由此产生的css本身和他造成的冗余并不可怕,可怕的是他造成的困惑。作为一个设计师看到了这个form类,可能猜想是不是其他样式表里也定义了叫form的类名,然后去查找根本不存在的样式,这就是我时间浪费的原因。
11)类名不等于特异性
如果你的元素定义样式不需要类名,那就不要用。用的太多类名,不仅使你的结构和css很臃肿,也失去了他们在css 中的意义。
12)多类
虽然我不提倡使用不必要,多余的类名,但是对于通过多类保持元素表现的共用
13)分组选择器
14)一行还是多行书写?
一行
15)需要按照字母排序吗?
(结构排序或字母顺序排序,你想用哪个用哪个)
16)使用简写
17)0值
没必要给他指定单位
18)颜色模式
19)(。。。以下省略)
6.开始编写CSS
(这篇写的比较NB,直接看原文好)
1)CSS预处理器
SASS
2)BEM
块(Block)、元素(Element)和修改器(Modifier)
.site-header { ... } /* block */
.site-header__logo { ... } /* element */
.site-header__logo--xmas { ... } /* modifier */
.site-header__navigation { ... } /* element */
3)OOCSS
面向对象CSS
4)SMACSS
SMACSS代表可伸缩的和是模块化的CSS结构体系
-
基本(base):用于一个简单的选择器的基本样式,如
clearfix
- d布局(Layout):定义网格
-
模块(Module):一群元素相结合在一起形成的一个模块,比如说
header
和sidebar
- 状态(State):元素的不同状态。如隐藏、按住,扩大等规则定义给对象
- 主题(Them):更多的样式
-
基本(base):用于一个简单的选择器的基本样式,如
5)Atomic Design
6)OrganicCSS
虽说没看明白啥意思,但发现一个比较吊的mixin
@mixin login-box {
@include atoms((
block,
font-size-20,
margin-top-23,
bold
));
}
可以写一写。有个库,地址:http://krasimir.github.io/organic-css/
先上一个PPT:http://takazudo.github.io/presentation-oocss-sass/。
用@extend + %占位符来实现OOCSS,多写写什么都明白了。
而且OOCSS可以用于页面布局,但要注释明白,逻辑明确。
8.崇拜CSS
其实就是让你用sass来写OOCSS,而不是用css直接写(这样会造成标签过长,失去语义化)。
和7一样。
最后,加一篇SMACSS的:
写的很好,结合实际项目,可以用来参考。
.my-module {
background-color: maroon;
position: relative; > a {
color: aqua;
}
}
.my-module--important {
@extend .my-module;
border: 3px solid fuchsia;
}
.my-module--is-active {
background-color:red;
}
.my-module__close-button {
position: absolute;
right:;
top:;
}
分文件:
modules/_my_module.scss
modules/_child_component.scss
modules/_grandchild-component.scss
Configuration(配置)
Mixins(混合)
Grid(网格)
我们不打算从我们编译的CSS中删除每一个重复点。我们想要开发尽可能的容易,而又不影响性能。到目前为止用mixins模块代替@extend
,这样并不会增加原始文件大小。