早上习惯性的打开 W3CPLUS ,看到有篇讲解BEM的文章,现总结如下:
文章中提到编写可维护的CSS有(BEM、OOCSS、SMASS/Atomic Design)许多解决办法。

好奇这些解决办法是怎样的 ,就百度了一下 ,这才发现,原来我之前一直在用的的是OOCSS(Object Oriented CSS)如:

1
<div class="main">这是一块主内容</div>

通常css都按下面这么写

1
2
3
4
5
6
7
.main {
width: 50%;
background-color: #ddd;
color: #fff;
font-size: 12px;
text-align: center;
}

而用OOCSS就是下面这样

1
<div class="bfb50 bgcolor-gray cfff font12 tc">这是一块主内容</div>

css:

1
2
3
4
5
.bfb50 { width: 50%;}
.bgcolor-gray { background-color: #ddd;}
.cfff { color: #fff;}
.font12 { font-size: 12px;}
.tc { text-align: center;}

OOCSS的思想是容器与内容分离;表现层和结构的分离,即影响块或其元素的位置的属性应该被抽象为一个单独的类用于重复利用。
OOCSS的优点:

  • 减少了css代码
  • 语义标记,有助于SEO(比如错误信息块是红色背景,那类名不应定义为redtext,定义为warning更有语义化,更具有重用性)
  • 更好的页面优化和加载时间(因为组件可重用)
  • 可扩展的标记和css样式,有更多的组件可放在库中,而不影响其他的组件
  • 能轻松构建新的页面布局,或新的页面风格

缺点:

  • 适合真正的大型网站开发(大项目用到的可重用组件很多)
  • 每个组件写一份说明文档,有助于调用和维护

BEM

BEM分别是block、element、modified;
命名空间列表:

  • .l- : 布局(layouts)
  • .o- : 对象(objects)
  • .c- : 组件(compinents)
  • .js : js的钩子(Javascript hooks)
  • .is- | .has- 状态类(stateclasses)
  • tl | .sl : 排版大小(typography sizes)
  • u- : 实用类(utility classes)

“.l-“ ————布局(layouts)

布局分为:

  1. 全局布局–应用于所有页面的布
  2. 块级布局–独立的组件或者对象

“.o-“ ————对象(objects)

是Website的最小构建块,

  1. 对象不能包含其他对象或组件
  2. 它之于上下文是独立的
    这也意味着对象不应该更改外部结构。因此对象不能包含下面任何属性:
    • absolutefixed 定位
    • margin
    • padding (除非用了background-color
    • float
    • 等等
  3. 某些对象在有意义的情况下也可忽略.0-前缀

    1
    <input type="text">

    或者字体也可不使用 .o- 前缀

“.c-“ ————组件(Components)

它可以包含其他对象或者组件;还是上下文感知的–可放在不同位置

“.js” ————javascript的钩子

1
2
3
<div class="o-countdown jsCountdown">
<!-- ... -->
</div>

其好处是可将js功能与样式分开,使其更易于维护

“.is/.has” ————状态类

表示对象/组件的当前状态。当应用状态类时,可知道对象/组件是否具有下拉(.has-dropdown)或当前处于打开状态(.is-open

“.t” 或 “.s” ————排版类(Typography)

排版类是对象的自己。应像排列对象那样将相同的规则应用于排版类,这意味着不应在排版中添加padding或者margin,这些应直接添加到组件

“.u-“ ————实用类(Utility)

用来表现样式的一个非常好的辅助类,通常只包含一个属性,并包含!important声明
eg:

1
2
3
4
.u-text-left { text-align: left !important;}
.u-text-center { text-align: center !important;}
.u-text-right { text-align: right !important;}
.u-hide { display: none !important;}

项目目录结构

1
2
3
4
5
- project/
- dist/ # 用于生产环境
- src/ # 所有的开发源代码
- js/
- scss/
1
2
3
4
5
6
7
8
9
10
- scss/
- lib/
- helpers/
- variables/
- base/
- layouts/
- objects/
- components/
- style.scss
- _utilities.scss

lib/文件夹

只包含 _lib.scss(声明了所有在项目中使用的库文件),eg:

  • Normalize.css
  • helpers/文件夹

    放置项目中使用的封装方便使用的minxins(如清楚浮动、元素的显隐、三角) 和 functions

variables/文件夹

存储项目中使用的变量的地方,eg:

  • colors
  • typography
  • themes
  • breakpoints

base/文件夹

存放除Nornalize.css之外的所有resets,以及开发所使用的全局样式

layouts/文件夹

存放全局使用的布局样式

object/ 和 components/ 文件夹

分别存放对象(如input、button、typofraphy)和组件的地方

utilities/文件夹

存放各种公用命名空间类,eg: .u-text-left