[笔记] Sass 实战全攻略 – 8 – 关于命名的那些事儿

章节连结

撰写程式的人们的日常头痛问题之一,就是如何命名变量。变量命名的好,可以省下日后维护时的大量时间在研究先前的逻辑上。这边笔记下这个段落部分有提及的一些设计巧点。
sass logo


课程对应章节

Course 48 ~ Course 54 (全部一共有 72 Courses)

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

内容

命名

  1. 驼峰式大小写是程式编写的命名规则之一,你可以使用小驼峰(lowerCase)或是大驼峰(UpperCase)来写你的CSS,只要你前后一致或是符合公司规范。
  2. 使用 “-” 或是 “_” ?这点完全是看你开发者喜好,或是大家谈好一套规则来遵守即可。
  3. 改以工具名称命名,像是 .list .button 。
  4. 采用主色方式来设计色彩,像是 .text-primary{color:red;}
  5. 外部可以保留 .header, .footer 之类的命名,不过其他部分可以利用格线系统来撰写排版。

BEM

Block, Element 和 Modifier 所组成的一个方法学 (Methodology),以下有个简单范例:

BEM 搭配 SCSS,写起来并不会太过于困难,如同以下范例:


Sass 实战全攻略系列文章

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

  • 按赞加入粉丝团

    延伸阅读