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)：一群元素相结合在一起形成的一个模块，比如说header和sidebar
  • 状态（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: 0;

    top: 0;

}

　　分文件：

　　　　modules/_my_module.scss

　　　　modules/_child_component.scss

　　　　modules/_grandchild-component.scss

　　Configuration（配置）

　　Mixins（混合）

　　Grid（网格）

　　我们不打算从我们编译的CSS中删除每一个重复点。我们想要开发尽可能的容易，而又不影响性能。到目前为止用mixins模块代替@extend，这样并不会增加原始文件大小。