＃笔记＃ CSS工作流

时间：2022-02-21 00:09:23

目录

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

明确代码规范

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

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

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

    • 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 // 删除行尾多余空格

    }

}
    • 编辑器插件实现方式，推荐 EditorConfig2

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

［参考］：

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

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

2 “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

关于前缀

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

［参考］：

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

浮动闭合4

［参考］：

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

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

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

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

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

相关文章