CSS规范(OOCSS SMACSS BEM)

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文件的体积。

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

时间: 2024-10-17 16:07:32

CSS规范(OOCSS SMACSS BEM)的相关文章

Atitit.css 规范 bem &#160;项目中 CSS 的组织和管理

Atitit.css 规范 bem  项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 1.4. 修饰符(modifier)的3 2. 块的独立性4 3. 独立的CSS4 3.1. 为独立的CSS类命名5 4. BEM争议最大的就是它的命名风格 6 5. OOCSS6 6. ACSS6 7. CSS 组织和管理 结论attilax总结7 8. Atibem7 8.1. Modifier

Atitit &#160;OOCSS&#160;vs bem

Atitit  OOCSS vs bem     1. 今天最流行的CSS开发框架技术当属OOCSS,尽管还有其他类似的技术存在,如BEM.1 2. CSS设计模式:OOCSS 和 SMACSS1 2.1. OOCSS2 2.2. 减少对 HTML 结构的依赖2 2.3. 增加 CSS class 重复性的使用2 2.3.1. 减少对 HTML 结构的依赖2 2.3.2. 增加 CSS class 的重复使用3 3. OOCSS4 3.1. 减少对 HTML 结构的依赖4 3.2. 增强 CSS

CSS规范

CSS规范 文档声明: doctype 前不允许非空字符 编码 小写 所有的HTML标签必须小写: 所有的HTML属性必须小写: 所有的样式名及规则必须小写. 缩进:使用tab(4个空格宽度)来进行缩进 注释 省略嵌入式资源的协议头 *省略图像.媒体文件.样式表和脚本等URL协议头部声明 ( http: , https: ) *应用场景:web页面的协议,跟资源的协议相同 省略属性值 <input type="text" readonly /> 嵌套 标签闭合 多媒体替代

CSS规范 - 优化方案

值缩写 缩写值可以减少CSS文件大小,并增加可读性和可维护性. 但并非所有的值都必须缩写,因为当一个属性的值缩写时,总是会将所有项都设置一遍,而有时候我们不希望设置值里的某些项. /* 比如我们用下面这个样式来让某个定宽的容器水平居中,我们要的只是left和right, * 而top和bottom不是这个样式要关心的(如果设置了反倒会影响其他样式在这个容器上的使用), * 所以这时我们就不需要缩写 */ .f-mgha{margin-left:auto;margin-right:auto;} /

前端 CSS 规范大全

一.文件规范 1.文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解): 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用UI元素样式库 /css/lib JS组件相关样式库 /css/ui 业务类的CSS是指和具体产品相关的文件,放在如下目录中: 读书 /css/book/ 电影 /css/movie/ 音乐 /css/music/ 社区 /css/sns/ 小站 /css/site/ 同城 /css/locatio

前端CSS规范大全(转)

一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用UI元素样式库 /css/lib JS组件相关样式库 /css/ui 业务类的CSS是指和具体产品相关的文件,放在如下目录中: 读书 /css/book/ 电影 /css/movie/ 音乐 /css/music/ 社区 /css/sns/ 小站 /css/site/ 同城 /css/location

css框架---网易NEC之css规范,使用和学习心得

说在前头 关于网易NEC,(想瞧一瞧请点击这里)我最早听说是在三个月前:是一位三年多工作经验的前端大牛,推荐的:然后自己看了一下觉得非常不错.也就在公司项目中使用了,并逐渐喜欢了这种风格.现在,差不多用了三个多月:今天呢,再次拜读了新浪前端大牛--曹刘阳的<编写高质量代码--Web前端开发修炼之道>(想下载请点击这里),这本书是10年出来的,里面关于css样式文件如何分类,整理:样式如何命名,如何写出简洁,高效,可复用的css的见解,很多都能在NEC中找到影子:很多地方都不谋而合.所以呢,我就

前端CSS规范整理

一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用UI元素样式库 /css/lib JS组件相关样式库 /css/ui 业务类的CSS是指和具体产品相关的文件,放在如下目录中: 读书 /css/book/ 电影 /css/movie/ 音乐 /css/music/ 社区 /css/sns/ 小站 /css/site/ 同城 /css/location

前端CSS规范大全(转自http://www.w3cfuns.com/article-5596764-1-1.html)

文章整理了Web前端开发中的各种CSS规范,包括文件规范.注释规范.命名规范.书写规范.测试规范等. 一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用UI元素样式库 /css/lib JS组件相关样式库 /css/ui 业务类的CSS是指和具体产品相关的文件,放在如下目录中: 读书 /css/book/ 电影 /css/movie/ 音乐 /css