开发一个自己的 CSS 框架(三)

这一期不涉及框架更新,我们来简单介绍一个各种 CSS 写法。各种写法大致就是相互借鉴吧。

BEM


menu 是 block 区块,而 item 是 element 元素,selected 是 modify 状态。相比较普通的而言,它没有优先级问题。

由于我们的纯 css 面向的是前端页面,优先级问题出现的还是比较少。一些富交互的 UI 框架大多使用这种类型。

OOCSS

大概像这样,跟辅助类比较像。

或者这样,这里加了一个命名空间 s 。跟 BEM 结合起来画风像这样。

.btn
.btn--small
.btn--red
.btn--blue
.btn--large

SMACSS

  • Base Rules (全局重置样式等)

  • Layout Rules 用l-或layout-这样的前缀,例如:.l-header、.l-sidebar。见过京东的采用这种简写,不过他会加一个注释,注明 layout 的缩写是 l。

  • Module Rules 用模块本身的命名,例如图文排列的.media、.media-image。

  • State Rules 用 is- 前缀,例如:.is-active、.is-hidden。比如 bulma 里面的一些修饰符,其实都是 is 或者 has 开头的。

  • Theme Rules 如果作为单独 class,用 theme- 前缀,例如 .theme-a-background、.theme-a-shadow。

.layout-header {}
.layout-container {}
.layout-sidebar {}
.layout-content {}
.layout-footer {}

也可以自定义

.todolist{}
.todolist-title{}
.todolist-image{}
.todolist-article{}

在 Vue 中的单个文件,其实就是模块,加上了 scoped 之后,都会有自己的模块 ID,其实就相当于加上了这样的前缀,而 react 也有一种叫做 CSS-BLOCKS 的东西。

CSS-BLOCKS

好像只能用在 react 里面,在官网没看到单独使用的例子,它编译出来的 class 名称会自动缩短。笔者 react 经验不多,所以也就没有真正是实践与深究这个框架。

通过 scope 约束作用域,通过 state 创建状态,比如激活状态,不可用状态等等。

不过他也有一些缺点或者说强约定,一些伪类不支持嵌套,以及属性选择器,id 选择器等等。

:scope {}
:scope[state|enabled] { }

.sub-element { }
// 任意值时,包括无值
.sub-element[state|color] { }
// 特殊值
.sub-element[state|color="red"] { }
.sub-element[state|color="blue"] { }
.sub-element[state|color="yellow"] { }

当映射到 jsx 上面时候,要这样使用。

:scope {  }
:scope[state|enabled] {  }
.button {  }
.icon {  }
.icon[state|inverse] {  }

AtomicCSS

这个像函数调用,在 class 上面有些异类,邪教的感觉。不过在 js 里面倒是感觉正常些,被 Block-CSS 接纳。


.Fl\(start\) {
 float: left;
}
.M\(10px\) {
 margin: 10px;
}

ITCSS

用这个规则写 sass 嵌套会少一些。

设置

可被覆盖的配置项

  • 基本 (重置样式)
  • 颜色 (基本色调)
  • 排版 (行高,字体,字号)
  • 动画 (animation 帧)

工具

utils 函数

  • 函数 (@function 定义的)
  • 占位符 (sass 中 % 开头的,选择器的复用)
  • 混合宏 (mixin,sass 中 = 开头的)
  • 媒体查询

sass 混合宏

=from($device)
  @media screen and (min-width: $device)
    @content

sass 函数

@function powerNumber($number, $exp)
  $value: 1
  @if $exp > 0
    @for $i from 1 through $exp
      $value: $value * $number
  @else if $exp < 0
    @for $i from 1 through -$exp
      $value: $value / $number
  @return $value

供应商

vendor ,会 php 的应该对这个文件很熟悉,noder 可以理解为 node_modules。即通过 npm 安装的第三方工具包,reset.css 等。

对象

通产有一个命名空间(o-), Object 的缩写,所有页面都是用的对象类,比如容器,布局等。

  • o-page 包裹一下,避免想要操作整个页面需要选取 html
  • o-gird 网格布局
  • o-container 某个组件外部容器类,固定最大宽度,可伸缩
  • o-main 主体内容区域,跟 main 标签类似
  • o-content 文本内容区域,或内部容器。

元素

element, 以 e- 开头

组件

component,以 c- 开头

作用域

scope 以 s- 开头

模式

pattern 以 p- 开头,组件的组合体,不可复用的结构。

其他命名空间

is- 和 js-,is- 表状态,js 表示 javascript 绑定的事件。

说了那么多,你喜欢哪一个呢?本 css 框架,不涉及任何 css 书写规范,这些更多应用于实际页面开发,而不是框架开发,为所有组件都添加一个 c- 命名空间,感觉也很奇怪.

你可能感兴趣的:(开发一个自己的 CSS 框架(三))