CSSMM4E 笔记 - 4.00 - CSS进阶

培养良好的CSS习惯

写注释

/* 这是注释的格式 */

• 只注释哪些意义不明显的代码
• 在生产环境中使用工具删除注释: http://cssminifier.com/

组织CSS样式

为类起一个清晰的名字

• 以目的而不是以表现(appearance)命名类
  好名字: .error, button-primary, .sidebar
  坏名字: .font20px, .red, .redSidebar
• 别用基于位置(position)的名字
  好名字: .gallery, .figure, .banner, .wrapper
  好名字: .leftSidebar
.branding 就比 .header 好.
• 避免神秘代码(cryptic names)
  坏名字: .s1, .s ..

不用自我重复

使用多个classes模拟 类继承, 用decedent选择器模拟 模块 .

使用多个类

理由同上.

使用短属性(shorthand properties)

节省代码, 时间, 带宽.

根据样式相关性分组

两种通用方法:

• 按样式应用范围分组
• 按样式相近目的分组

使用注释分隔样式组

/* *** Layout *** */
or
/* -------------------- 
         Layout
-------------------- */

使用多个样式表文件

1. 为不同各类的elements创建style sheets

   • color.css
   • forms.css
   • layout.css
   • main.css - covers everything else

2. 创建一个总的style sheet文件, 收集step 1中创建的文件

   /* base.css or global.css or site.css */
   @import url(main.css);
   @import url(layout.css);
   @import url(color.css);
   @import url(forms.css);

3. 在html中引用 base.css

   <link rel="stylesheet" href="base.css">

删除浏览器预设样式干扰

• 删除 padding & margins
• 使用 一致的 font sizes
• 设置一个 一致的 line height
• 改善表格边框, 创建风格统一的表格单元格
• 去掉带连接的图片边框
• 设置 一致的列表缩进和列表项目符号
• 为引用内容删去引号

见 reset.css
有些designers使用 normalize css: http://necolas.github.io/normalize.css/

使用后代选择器

HTML 在使用 descendant selectors 时, 可以形成天然的内容分割. 类似于模块.

参考资料

• Object Oriented CSS
• and this
• Scalable and Modular Architecture for CSS [book]
• and this

牛叉的Sass

运行Sass: 在命令行中cd 到站点文件夹中，假设sass文件位于sass文件夹中

sass --watch sass:css

参见 https://sass-lang.com