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

关于

编码标准

客户端语法样式指南

附录

这些准则是在研究新兴实践、想法和现有样式指南后制定的，包括

注释

主要部分

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

/* ==========================================================================
   PRIMARY NAVIGATION
   ========================================================================== */

子部分

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

/* Mobile navigation
   ========================================================================== */

详细注释

/**
 * Short description using Doxygen-style comment format
 *
 * The first sentence of the long description starts here and continues on this
 * line for a while finally concluding here at the end of this paragraph.
 *
 * The long description is ideal for more detailed explanations and
 * documentation. It can include example HTML, URLs, or any other information
 * that is deemed necessary or useful.
 *
 * @tag This is a tag named 'tag'
 *
 * TODO: This is a todo statement that describes an atomic task to be completed
 *   at a later date. It wraps after 80 characters and following lines are
 *   indented by 2 spaces.
 */

基本注释

/* Basic comment */

未编译的 LESS/Scss 注释

// These are stripped on compile.

CSS 选择器

仅使用类作为 CSS 选择器，绝不使用 ID，因为它们会对级联引入不必要的特异性。使用 ID 作为 CSS 选择器就像发射第一颗核弹；你开始了特异性战争，只能升级，后果不堪设想。

换句话说；不要使用西斯尊主，只需要两个风暴兵就足够了：CSS 特异性战争

类命名约定

使用连字符创建复合类名

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

/* Good - uses camelCase */
.compoundClassName {…}

/* Bad - uses underscores */
.compound_class_name {…}

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

缩进

规则应缩进一个制表符（等于 4 个空格）

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

/* Bad - all on one line */
.example {color: #000; visibility: hidden;}

对齐

左大括号必须与最后一个选择器位于同一行，并用空格隔开。右大括号必须位于其自身行，在最后一个属性之后，并缩进到与左大括号相同的级别。

/* 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 {
    background: black;
    color: #fff;
}

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

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

HEX 值

HEX 值必须以小写形式声明，并使用简写形式

/* 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;
}

Joomla! 开发者网络™

Joomla! 编码标准

CSS

关于