ThinkUp项目CSS代码风格指南详解

ThinkUp项目CSS代码风格指南详解

ThinkUp ThinkUp gives you insights into your social networking activity on Twitter, Facebook, Instagram, and beyond. 项目地址: https://gitcode.com/gh_mirrors/th/ThinkUp

前言

在ThinkUp项目的开发过程中，保持一致的代码风格对于维护代码质量和团队协作至关重要。本文将详细介绍ThinkUp项目中的CSS代码规范，帮助开发者编写符合项目标准的样式代码。

基础规范

缩进规则

• 使用2个空格作为缩进
• 禁止使用Tab键进行缩进
• 保持缩进风格在整个项目中一致

命名规范

1. ID选择器命名：

   • 采用lowerCamelCase(小驼峰)命名法
   • 示例：#pageContainer

2. 类选择器命名：

   • 全部小写
   • 单词间用下划线连接
   • 示例：.my_class_name

3. HTML元素选择器：

   • 必须全部小写
   • 示例：body, div

样式表使用规范

外部样式表优先

• 禁止使用内联样式(style属性)
• 尽量避免使用嵌入式样式(<style>标签)
• 特殊情况需要使用时，需经过团队讨论确认

引入方式

• 使用<link>标签引入外部样式表
• 禁止使用@import语法引入样式表

  <!-- 推荐方式 -->
  <link rel="stylesheet" href="styles.css">
  
  <!-- 禁止方式 -->
  <style>@import url("styles.css");</style>
  

代码质量要求

标准合规性

• 必须符合CSS 2.1规范
• CSS 3.0特性可以使用，但需确保优雅降级
• 提交前必须通过W3C CSS验证器检查

注释规范

1. 块注释：

   • 放在选择器块之前
   • 使用/* */格式
   • 示例：

     /* 导航栏样式 */
     .nav_bar {
     

2. 行内注释：

   • 放在属性值后
   • 前面加空格
   • 示例：

     .selector {
       color: #FFF; /* 白色文字 */
     }
     

选择器编写规范

基本格式

• 选择器独占一行
• 选择器与左花括号间保留一个空格
• 右花括号独占一行，不缩进
• 选择器块之间用空行分隔

  selector {
  }
  
  another_selector {
  }
  

多选择器处理

• 每个选择器独占一行
• 逗号后不加空格

  selector1,
  selector2,
  selector3 {
  }
  

属性编写规范

基本规则

• 每个属性独占一行
• 缩进一个层级(2个空格)
• 属性名与值间保留一个空格
• 必须以分号结尾

  selector {
    property: value;
    another: value;
  }
  

排序规则

• 按属性名字母顺序排列

  /* 正确示例 */
  .example {
    background: #000;
    color: #FFF;
    font-size: 16px;
  }
  

多值处理

• 多个值用逗号分隔
• 逗号后保留一个空格
• 含空格的字符串值用双引号包裹

  .example {
    font-family: "Lucida Grande", Helvetica, sans-serif;
  }
  

颜色与尺寸规范

颜色表示

• 使用十六进制表示法
• 字母必须大写
• 优先使用3位简写

  /* 正确示例 */
  color: #FFF;
  color: #FE9848;
  
  /* 错误示例 */
  color: #fff;
  

尺寸单位

• 允许使用px、em、%
• 值为0时不写单位

  /* 正确示例 */
  width: 12px;
  margin: 0;
  
  /* 错误示例 */
  width: 0px;
  

总结

遵循ThinkUp项目的CSS代码规范，可以确保项目样式代码的一致性和可维护性。这些规范涵盖了从基础格式到高级特性的各个方面，开发者应严格遵守并在团队协作中互相监督执行。

ThinkUp ThinkUp gives you insights into your social networking activity on Twitter, Facebook, Instagram, and beyond. 项目地址: https://gitcode.com/gh_mirrors/th/ThinkUp