Bootstrap CSS编码规范

2020-06-18 05:59:01易采站长站整理

.avatar { ... }

/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

代码组织

以组件为单位组织代码段。
制定一致的注释规范。
使用一致的空白符将代码分隔成块,这样利于扫描较大的文档。
如果使用了多个 CSS 文件,将其按照组件而非页面的形式分拆,因为页面会被重组,而组件只会被移动。


/*
* Component section heading
*/

.element { ... }

/*
* Component section heading
*
* Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
*/

.element { ... }

/* Contextual sub-component or modifer */
.element-heading { ... }


编辑器配置

将你的编辑器按照下面的配置进行设置,以避免常见的代码不一致和差异:

用两个空格代替制表符(soft-tab 即用空格代表 tab 符)。
保存文件时,删除尾部的空白符。
设置文件编码为 UTF-8。
在文件结尾添加一个空白行。

参照文档并将这些配置信息添加到项目的

.editorconfig
文件中。例如:Bootstrap 中的 .editorconfig 实例。更多信息请参考 about EditorConfig。

相关文章 大家在看