1. 缩进和空格：
- 使用两个空格进行缩进。
- 在属性名和属性值之间使用一个空格。
.selector {
property: value;
}
2. 命名规范：
- 使用有意义的类名，遵循 BEM（块、元素、修饰符）命名规范有助于代码的可读性。
<div class="block">
<div class="block__element">
<p class="block__element--modifier">Content</p>
</div>
</div>
3. 注释：
- 使用注释解释代码块的作用，以及特殊情况和工作原理。
/* 这是一个示例注释 */
.selector {
property: value; /* 注释关于这个属性的信息 */
}
4. 模块化：
- 将样式表分割为模块，每个模块处理特定的功能或组件。
/* Header 模块 */
.header {
/* 样式属性 */
}
/* Button 模块 */
.btn {
/* 样式属性 */
}
5. 避免使用 !important：
- 尽量避免使用 !important，除非确实有必要覆盖其他样式。
.selector {
property: value !important;
}
6. 响应式设计：
- 使用 Bootstrap 的响应式工具类，确保你的网站在不同屏幕尺寸上都能良好显示。
<div class="col-md-6 col-sm-12">
<!-- 响应式布局 -->
</div>
7. 自定义样式：
- 如果需要自定义 Bootstrap 样式，最好创建一个单独的样式表，而不是直接修改 Bootstrap 的源文件。
<link rel="stylesheet" href="custom.css">
8. 浏览器兼容性：
- 检查你的样式在主流浏览器中的兼容性，确保网站在各种环境中都能正常工作。
这些规范可以作为起点，具体的项目可能需要根据实际情况进行调整。最重要的是保持一致性，以便团队成员可以更容易地理解和维护代码。
转载请注明出处：http://www.zyzy.cn/article/detail/12643/Bootstrap