＃笔记＃ CSS工作流

 

目录

1. 1. 明确代码规范
   2. CSS Reset
   3. 关于前缀
   4. 浮动闭合
   5. CSS的前处理器（Preprocessor）和后处理器（Postprocessor）

 

明确代码规范

　　目的是确保跨平台协作多人开发的代码显示界面相同。

• • 约定代码缩进方式，如： Tab ＝ 2（4）个空格
  • 统一换行符，如：统一成 Unix 风格换行符¹
  • 删除行尾多余空格
  • 保持文档尾部空一行（对于合并压缩多个文件时有区分作用）

　　利用工具实现规范的自动化。

• • sublime Text 下的简单实现方式：

{ // 新建工程－xxxx.sublime-project－针对当前工程的约定
    "folders":[{
        "path":".",
        "folder_exclude_patterns":["node_modules","_site"] // 排除目录
    }],
    "settings":{
        "tab_size":2,  // 2个空格
        "translate_tabs_to_spaces":true, // tab 转换为空格
        "ensure_newline_at_eof_on_save":true, // 保存时末尾自动增加一个空行
        "trim_trailing_white_space_on_save":true // 删除行尾多余空格
    }
}

• • 编辑器插件实现方式，推荐 EditorConfig²

—— 在根目录新建文件使用EditorConfig－INI格式，命名为.editorconfig保存

［参考］：

¹ “解决Unix-like、Windows系统之间文本换行符不同的问题” http://blog.chinaunix.net/uid-25908383-id-3031018.html

² “【译】EditorConfig介绍”  http://ju.outofmemory.cn/entry/104488

² “SublimeText插件推荐：代码格式管家-EditorConfig” http://ju.outofmemory.cn/entry/152891

 

CSS Reset（重置）

• •  * 性能影响很小（目前各软硬件情况下），做demo时可用于提升书写效率
  • 字体排版

—— 中文字体请使用英文名，如：宋体（SimSun）

—— 永远不要只写中文字体（在中文字体下部分西文字体显示很糟糕），顺序是西文字体在中文字体前

—— 字体跨平台加载顺序，Mac－Linux－Window

—— PSD字体和实际开发中字体使用问题，需要与设计师提前规范确定

—— 实例：1 font-family:sans-serif; （不规定任何字体，让每个系统平台自适应合适的字体）

　　　　　  2 font-family:'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;（？？？？当前大环境适合me个人的跨平台通用字体方案）

• • 重置 Box-sizing

——？？？？为什么重置（原因？）

• • ？？？？一些推荐，Normalize.css／Neat.css 

 

关于前缀

• •  标准属性放最后
  •  考虑各浏览器对前缀支持与取消问题（与时俱进），建议放弃农耕手写方式，采用工具提升效率；推荐：Autoprefixer³

［参考］：

³ “如何处理CSS3属性前缀” http://www.w3cplus.com/css3/autoprefixer-css-vender-prefixes.html

 

浮动闭合⁴

［参考］：

⁴ “为何要闭合浮动？” http://blog.163.com/hongshaoguoguo@126/blog/static/180469812013102101424365/

⁴ “清除浮动和闭合浮动的区别？”https://segmentfault.com/q/1010000000732608

⁴ “那些年我们一起清除过的浮动” http://www.iyunlu.com/view/css-xhtml/55.html

 

CSS的前处理器（Preprocessor）和后处理器（Postprocessor）

• •  ？？？？glup
  •  ？？？？插件：clean-css（css压缩）, CSScomb, Rework（css属性排序）, PostCSS