要提高 sublime text 中 css 编写效率，1. 设置合适的缩进与格式风格，将 tab 宽度设为 2 并启用空格缩进；2. 使用 emmet 快速生成常用样式结构，如 .btn>padding:10px+margin:5px；3. 合理组织样式结构，按 reset、layout、components 等分段注释提升维护效率；4. 配合 csscomb、colorpicker 等插件进一步优化体验。
写 CSS 样式表时，效率和整洁程度往往直接影响开发节奏。很多人用 Sublime Text 写前端代码，但未必真正发挥出它的潜力。其实只要稍加设置，再掌握一些小技巧，就能在 Sublime 中高效地编写结构清晰、格式统一的 CSS 文件。
设置合适的缩进与格式风格
CSS 是靠缩进来提升可读性的语言之一，尤其是在嵌套结构中（比如 SCSS），缩进显得尤为重要。Sublime 默认的缩进是 4 个空格，但在 CSS 中，2 个空格更常见，也更节省空间。
你可以这样调整：
立即学习“前端免费学习笔记（深入）”；
- 打开任意 CSS 文件后，点击右下角的 “Plain Text” → 选择 “CSS”
- 然后点击菜单栏的
View
→Indentation
→ 选择 “Tab Width: 2” - 勾选 “Indent Using Spaces”
你也可以通过用户设置文件（Preferences > Settings）添加如下配置：
{
"tab_size": 2,
"translate_tabs_to_spaces": true,
"trim_automatic_whitepace": true
}这样一来，每次按下 Tab 键都会自动转换为两个空格，而且保存前会自动清理多余的空白，保持代码干净。
使用 Emmet 快速生成常用样式结构
Emmet 是 Sublime 自带的一个神器，尤其适合快速写出 CSS 结构。例如你想写一个按钮的样式块，只需要输入：
.btn>padding:10px+margin:5px+bg:#333+color:#fff
然后按下
Tab，就会自动生成：
.btn {
padding: 10px;
margin: 5px;
background-color: #333;
color: #fff;
}这个功能特别适合写重复性强的样式片段，省去了一个个敲属性的时间。你还可以结合 HTML 的类名快速生成对应的 CSS 样式。
如果你不熟悉 Emmet 缩写语法，可以先从最常用的开始练习，比如：
m0
→margin: 0;
p10
→padding: 10px;
dib
→display: inline-block;
posa
→position: absolute;
这些缩写虽然看起来像“魔法”，但熟练之后能大幅提高写 CSS 的速度。
合理组织样式结构，提升维护效率
很多人写 CSS 只是按需添加，结果越写越乱。其实在项目初期就做好结构规划，后期维护会轻松很多。
推荐一种常见的结构方式：
/* =Reset & Base */
* { ... }
/* =Layout */
.header { ... }
.footer { ... }
/* =Components */
.button { ... }
.card { ... }
/* =Pages */
.homepage { ... }
.contact-page { ... }
/* =Utilities */
.u-margin-top { ... }这种分段方式让每个部分职责明确，查找修改都更容易。Sublime 支持代码折叠，你可以把每个大块包裹在注释里，方便收起或展开。
另外，建议使用一致的命名规范，比如 BEM 或 SMACSS，避免出现
.red-button,
.btn-style-2这种模糊不清的类名。
配合插件进一步提升体验
Sublime 本身已经很轻快，但配合几个实用插件，可以让写 CSS 更顺手：
- CSSComb：一键整理 CSS 属性顺序，统一格式风格。
- ColorPicker：点击颜色值可以直接弹出色板选择。
- DocBlockr：自动生成注释块，方便说明组件用途。
- Alignment：对齐等号，提升代码可读性。
安装方式很简单，打开 Package Control（如果没有装，建议现在装上），然后搜索插件名称安装即可。这些插件不会拖慢编辑器速度，却能带来实实在在的便利。
基本上就这些。写 CSS 不只是“写样式”，更是“写结构、写习惯”。用好 Sublime 的基础设置和插件，搭配合理的组织方式，你会发现写样式也能变得又快又清爽。
