[笔记] Sass 实战全攻略 – 7 – Sass/CSS 设计模式 (OOCSS)

章节连结

Sass/CSS 的设计模式,对于使用者来说,你可以把它想做是一种归纳管理 CSS 的思维。除了前一篇文章提到的 Smacss 外,OOCSS 提出另外一种收纳 CSS 的方法:将容器、样式、内容和结构都予以分离。
sass logo


课程对应章节

Course 44 ~ Course 47 (全部一共有 72 Courses)

请注意:本系列文章为个人对应课程的消化吸收后,所整理出来的内容。换言之,并不一定会包含全部的课程内容,也有可能会添加其他资源来说明。课程连结网址:http://tinyurl.com/ueo7bm2

内容

OOCSS

  • 样式互相组合,彼此之间不会冲突
  • 容器(排版布局) 和内容样式分离,这样可以方便搬动
  • 内容、样式、常用工具(如清除浮动、隐藏文字……等),彼此之间不要绑死,而是分门别类组合的话,运用起来会更灵活

范例


Sass 实战全攻略系列文章

  • [笔记] Sass 实战全攻略 – 11 – 自制格线系统
  • [笔记] Sass 实战全攻略 – 10 – 设计模式和规范
  • [笔记] Sass 实战全攻略 – 9 – 错误的 CSS 设计方式
  • [笔记] Sass 实战全攻略 – 8 – 关于命名的那些事儿
  • [笔记] Sass 实战全攻略 – 6 – Sass/CSS 设计模式 (Smacss)
  • [笔记] Sass 实战全攻略 – 5 – mixin 解决响应式网页的断点问题
  • [笔记] Sass 实战全攻略 – 4 – mixin 统整你常用的 CSS 方法
  • [笔记] Sass 实战全攻略 – 3 – import 切分档案和维护
  • [笔记] Sass 实战全攻略 – 2 – 变量的运用
  • [笔记] Sass 实战全攻略 – 1 – 简介

  • 按赞加入粉丝团

    延伸阅读