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

章节连结

Sass/CSS 的设计模式,对于使用者来说,你可以把它想做是一种归纳管理 CSS 的思维。随着专案的开发架构越发庞大,修改一个小小样式变成一个大工程,因为你必须要在茫茫程式海中找到对应或是关联的 CSS 位置。容易扩展和模组化的 CSS 架构是大型专案管理的必备思维之一。sass logo


课程对应章节

Course 32 ~ Course 43 (全部一共有 72 Courses)

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

内容

Smacss

  • 用 base rule 打好根基样式(全站设定),然后再行特别修改。
  • 由 Layout 制作表头,放置全站会用到的布局(像是导览列、页脚……等等),剩余的就是中间的内容抽换。有点像是 Handlebars 中的 views/layout 中的主要样板(main.handlebars)。
  • 若你在网站内会有预期的版型配置样式,那么你可以加上前缀词的方式(如:.l-list,代表 List 的共用 Layout)来提醒自己。
  • 常用的样式,减少语意的用法,改用抽象 + 字词。
  • 模组化你的 CSS:设定基底样式 → 针对特定情况下一个部分修改的 CSS 叠加到旧有的样式上 (例如:class=”btn btn-primary”)
  • 增加子模组是一种扩充包的概念
  • 撰写CSS时不要去指定 HTML Tag,这样方便做调整

范例


Sass 实战全攻略系列文章

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

  • 按赞加入粉丝团

    延伸阅读