OOCSS学习(二)

OOCSS —— 面向对象CSS

5.CSS团队精神: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):一群元素相结合在一起形成的一个模块,比如说headersidebar
    • 状态(State):元素的不同状态。如隐藏、按住,扩大等规则定义给对象
    • 主题(Them):更多的样式

  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/

7.OOCSS + Sass

  先上一个PPT:http://takazudo.github.io/presentation-oocss-sass/

  用@extend + %占位符来实现OOCSS,多写写什么都明白了。

  而且OOCSS可以用于页面布局,但要注释明白,逻辑明确。

8.崇拜CSS

  其实就是让你用sass来写OOCSS,而不是用css直接写(这样会造成标签过长,失去语义化)。

9.使用Sass来写OOCSS

  和7一样。

  

最后,加一篇SMACSS的:

10.如何使用Sass和SMACSS维护CSS

  写的很好,结合实际项目,可以用来参考。

.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,这样并不会增加原始文件大小。

上一篇:【LG3245】[HNOI2016]大数


下一篇:PLSQL Developer 客户端没有TNS监听,无法连接数据库