[笔记] Sass 实战全攻略 – 9 – 错误的 CSS 设计方式

章节连结

Sass 在撰写时,要注意一些常见的 CSS 设计方式,会让你在撰写的时候显得冗长、日后也变得难以维护。
sass logo


课程对应章节

Course 58 ~ Course 61 (全部一共有 72 Courses)

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

内容

1. div 上头的 class 是具有范围性的,所有全部的网页通用格式,可以写在自定义的 container 中。如此一来,在 <dlv class=”container”></div> 的所有内容,就设定好了基本样式。
2. 不要写死高度,而是用 padding 和 margin 去给予上下撑开或是留有适当间距。这在设计 RWD 网页上,才能保有弹性。
3. 不要用 id=”” 绑定样式,因为 class 就可以取代其赋予样式的功能。另外要取得 id=”<idName>” 所用的 “#”,是网页显示上用来定位的功能,而且 id 的 CSS 权重比 class 高,这样日后样式要父改或是撰写 JavaScript 来控制网页 DOM 时,会遇到一些麻烦。
4. 样式要与内容分离,你若要设定某个 class 让你的 JavaScript 可以取得,建议另外设前缀+功能 的 class,方便日后维护。


Sass 实战全攻略系列文章

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

  • 按赞加入粉丝团

    延伸阅读