编码标准手册 - Joomla! 开发者

关于

编码标准

客户端语法样式指南

附录

这些指南是在审查新兴实践、理念和现有样式指南后编写的，具体如下

代码指南 (由 @mdo)

注释

主要部分

主要代码部分应以大写命名，并包含在完整的注释块中，例如

// Major comment
//
// Major comment description goes here
// and continues here

子部分

子部分应使用普通大小写，并包含在打开的注释块中。

//
// Sub section comment
//

基本注释

// Basic comment

类命名

使用连字符创建复合类名

// Good - use dashes
.compound-class-name {…}

// Good - uses camelCase
.compoundClassName {…}

// Bad - uses underscores
.compound_class_name {…}

// Bad - does not use seperators
.compoundclassname {…}

缩进

规则应缩进 2 个空格

// Good
.example {
  color: #000;
  visibility: hidden;
}

// Bad - using tabs or 4 spaces
.example {
    color: #000;
    visibility: hidden;
}

SCSS 也应嵌套，子选择器和规则再次缩进。嵌套规则也应以一行空格分隔

// Good
.example {

  > li {
    float: none;

    + li {
      margin-top: 2px;
      margin-left: 0;
    }

  }

}

// Bad - nested rules indented with tab or 4 spaces
.example {

    > li {
        float: none;

        + li {
            margin-top: 2px;
            margin-left: 0;
        }

    }

}

对齐

左花括号必须与最后一个选择器在同一行，并在其前面加一个空格。右花括号必须在最后一个属性之后位于其自己的行上，并缩进到与左花括号相同的级别。

// Good
.example {
  color: #fff;
}

// Bad - closing brace is in the wrong place
.example {
  color: #fff;
  }

// Bad - opening brace missing space
.example{
  color: #fff;
}

声明顺序

相关的属性声明应按以下顺序分组

定位
盒子模型
排版
视觉

// Good
.example {
  // Positioning
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  // Box-model
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  // Typography
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.2;
  color: #333;
  text-align: center;

  // Visual
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  // Misc
  opacity: 1;
}

在每个组中，您还需要对属性进行排序。如果出现任何错误，编译器会通知您并提供正确的顺序

属性格式

每个属性必须位于其自己的行上，并缩进一个级别。冒号前不应有空格，冒号后应有一个空格。所有属性都必须以分号结尾。

// Good
.example {
  background: black;
  color: #fff;
}

// Bad - missing spaces after colons
.example {
  background:black;
  color:#fff;
}

// Bad - missing last semicolon
.example {
  background: black;
  color: #fff
}

十六进制值

十六进制值必须以小写和简写形式声明

// Good
.example {
  color: #eee;
}

// Bad
.example {
  color: #EEEEEE;
}

属性选择器

始终在属性选择器周围使用双引号。

// Good
input[type="button"] {
  ...
}

// Bad - missing quotes
input[type=button] {
  ...
}

// Bad - using single quote
input[type='button'] {
  ...
}

零值单位

零值不应带单位。

// Good
.example {
  padding: 0;
}

// Bad - uses units
.example {
  padding: 0px;
}

属性前缀

无需对属性进行前缀，因为这将在编译代码时自动处理

// Good
.example {
  transform: rotate(30px);
}

// Bad - uses prefix
.example {
  -webkit-transform: rotate(30px);
  transform: rotate(30px);
}

文件结尾

SCSS 文件的结尾始终应有一行空白行

.example {
  padding: 0;
}
<<< Leave empty line here

Joomla! 开发者网络™

Joomla! 编码标准

SCSS

关于