码迷,mamicode.com
首页 > Web开发 > 详细

CSS规范(OOCSS SMACSS BEM)

时间:2018-04-18 19:08:15      阅读:276      评论:0      收藏:0      [点我收藏+]

标签:tps   container   https   header   tom   before   text   媒体查询   auto   

Css规范

  • OOCSS
  • SMACSS
  • BEM

OOCSS(Object Oriented CSS)面向对象的css

主要分成四个部分

  • Template :模板
  • Grids :栅格布局
  • Module :组件
  • Content :内容

Template模板

主要负责HTML的结构,让HTML更有层次感。

可以按功能模块来构建HTML的结构

常见的如:

人体架构

  • .header
  • .body
  • .footer

垂直方向

  • .top
  • .middle
  • .bottom

水平方向

  • .left
  • .main
  • .right

事物的结构构造(房子)由外向内

  • .building
    • .level
      • .room
        • .door
        • .window
        • .wall
        • .inner

结构整么搭,要根据业务来构建,以上只供参考

Grids栅格布局

主要是布局方面的类如何定义,可能采用的布局方式不同而不同。
参见的css布局:

  • 浮动布局
  • 弹性盒子布局
  • Grid布局

Grid布局由于兼容性问题,现在大多采用浮动布局弹性盒子(IE10+ , 移动端)

浮动布局

  • .line
    • .unit
    • .lastUnit
    • .size1of2
    • .size2of3
//结构 也叫容器
.line {
  position:relative;
}

.line:after {
  content: ‘ ‘;
  display: ‘block‘;
  height: 0;
  clear:both;
  visibility: hidden;
}

//浮动
.unit {
  float: left;
}

//添加到最后一个 unit后
.lastUnit {
  display: table-cell;
  float: none;
  width: auto;
}

//unit 的比例 1/2 
.size1of2 {
  width: 50%;
}

//unit 的比例2/3
.size2of3 {
  width: 66.6%;
}

浮动布局清浮动还可以参考bootstrap3 更优雅

.line:before,
.line:after {
  content: ‘‘;
  display: table;
}

.line:after {
  clear: both;
}

弹性盒子参考bootstrap4

  • .container
    • .row
      • .col

Module组件

各个组件特有的结构和样式。

以下类:

  • btn
  • btn btn-error
  • modal md-title

这里只要使用了继承的机制
btn-error继承了btn的基本样式,然后扩展了自己的样式error

md-title继承了modal的基本样式,然后添加自己专属样式
sass中,可以通过占位符%和搭配@extend实现

Content内容

定义html标签,适合自己应用的基本样式,不用类,直接定义标签的样式。

SMACSS可扩展模块化架构的CSS

smacss免费在线书籍(英)

SMACSS的5大核心分类

  • Base
  • Layout
  • Module
  • State
  • Theme

Base

负责定义页面的默认样式,由于不同的浏览器都有自己的默认样式,要做到在不同浏览器上效果一致,需要开发者重写这些样式。

常见的base配置有Reset.cssnormalize.css

由于中文和英文排版和显示有区别,推荐参考妹子ui的base。

base文件的规范:该文件只使用标签选择器标签选择器配伪类*!important不应该出现在该文件中

*{
    margin:0;
    padding:0;
    border:0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  min-height: 100%;
  background-color: #fff;
}

a:active,
a:hover {
  outline: 0;
}

Layout

主要负责页面的布局,在布局的时候,我们首先对页面进行结构布局,如圣杯布局

  • #header
  • #article
    • #sidebar
    • #main
  • #footer

对于整体的结构布局,由于只出现一次,且只能有一个,这里要使用id选择器

#header, #article, #footer {
    width: 960px;
    margin: auto;
}

#article {
    border: solid #CCC;
    border-width: 1px 0 0;
}

对于行列的布局,也即局部的布局,这些可以多次重复使用的,就不能使用id选择器了。

通过采用前缀的方式区分,l-,只要是和布局相关的都要加l-前缀,且只能是和布局相关的才能使用这个前缀。

常见的有栅格布局,按行和列布局等,可以参考上面OOCSS的Grids栅格布局,只需添加前缀.l-line.l-unit

还有,由于列表ul 或 ol是我们页面中最常用结构,很有必要给这个结构设计一个布局方式。

.l-list{ 
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.l-list-item{
    float: left;
    height: 100px;
    margin-left: 10px;
}

.l-list(ul/ol).l-list-item(li)比如上面这个浮动布局,这里没有清浮动,还可以用弹性盒子等布局方式。

为避免布局混乱,加强结构的层次,可以采用子选择器: >,来强耦合布局和HTML结构

.l-list{ 
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.l-list > .l-list-item{
    float: left;
    height: 100px;
    margin-left: 10px;
}

上面的结构强绑定对应的html结构才生效

<ul class=‘l-list‘>
  <li class=‘l-list-item‘></li>
  <li class=‘item‘>
    <ul class=‘list‘>
      <li class=‘l-list-item‘></li>
    </ul>
  </li>
</ul>

如上面这个,最外层<ul class=‘l-list‘><li>只有类为.l-list-item才生效

而内部的<ul class=‘list‘><li class=‘l-list-item‘>就不会生效,l-list-item的父类一定要为.l-list才生效

但是>也有其缺点

  • IE6不兼容
  • 会增加css文件的体积和复杂性

优点

  • 可以用在任何地方,只要html符合格式
  • 性能比使用后代选择器或元素选择器更好(计算CSS值的时候)

Module

避免使用id选择器标签选择器,应该只使用类选择器

module也即组件,组件应该独立,有自己的命名空间。这个和OOCSS的module一样。

如一个模态窗:

.modal{}

.mod-header{}

.mod-body{}

.mod-footer{}
<div class=‘modal‘>
  <div class=‘mod-header‘></div>
  <div class=‘mod-body‘></div>
  <div class=‘mod-footer‘></div>
</div>

State

个人觉得SMACSS最有意思的地方有,一是通过特殊的前缀指定命名空间和划分功能模块,再就是这个State。

表示某个指定状态下的样式,如

  • .is-collapsed
  • .is-clicked
  • .is-error
  • .is-success
  • .is-hidden

在模块中也可以定制特殊的状态。

.tab {
    background-color: purple;
    color: white;
}

.is-tab-active {
    background-color: white;
    color: black;
}

这样就可以参考事物运动的过程,以状态切换点分割运动过程,不但可以减少思维上的复杂性,还利于维护。

特别是用户频繁操作的界面。

涉及到状态改变有四种方式

  • 类名 class name
  • 属性选择器 加 data-
  • 伪类:hover :focus
  • 媒体查询@media

通过改变类名的方式改变状态

通过定义伪类:hover :focus等有状态含义的伪类

通过定义媒体查询,根据屏幕大小变化来改变状态



其中,可以通过改变类名,删除、添加、替换的方式切换状态。

类中可以包含动画,伪类:after :before,还可以通过添加data-来区分不同的状态。

Theme

重写各个组件的基本样式,以达到切换主题的目的

// in module-name.css
.mod {
    border: 1px solid;
}

// in theme.css
.mod {
    border-color: blue;
}

不过本人更喜欢bootstrapvariables.scss的方式

BEM

Block 、 Element 、 Modifier

块 >> 元素 >> 修饰符

.form { }

.form--theme-xmas { }
.form--simple { }

.form__input { }
.form__submit { }

.form__submit--disabled { }
<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled"
    type="submit" />
</form>

Block: .form

Element: .form__input .form__submit

Modifier: .form--theme-xmas .form--simple

一个Block由多个Element组成

Element由Block名充当前缀,且用__分隔符来区分Element

Modifier类似SMACSS的State,由Block名充电前缀,且用--分隔符来区分Modifier



上面中有个.form__submit--disabled

代表form块(Block)的submit元素(Element)的disabled修饰符(Modifier)

总结

  • 不管是SMACSS 还是 BEM 都采纳了OOCSS
  • OOCSS是所有的基础
  • SMACSS的分类方式,且提出的State很赞
  • BEM 用于写组件是个很不错的方式,不过类名太长了
  • 结合三者,OOCSS为基础,按SMACSS划分项目结构,BEM写组件
.modal{}

.modal > .mod_header{}
.modal > .mod_body{}
.modal > .mod_footer{}

.modal > .mod_header-active{}

.mod_header > .header-hidden{}

.mod_body > .body_title{}
.mod_body > .body_title > .title-big{}

通过子选择器保存之前的命名空间,然后再开一个前缀,这样就可以避免类名过长

但是使用>会增加css文件的体积。

CSS规范(OOCSS SMACSS BEM)

标签:tps   container   https   header   tom   before   text   媒体查询   auto   

原文地址:https://www.cnblogs.com/lantuoxie/p/8876160.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!