From 609bdeb264753eacee88d2f981e2e1809482d6ef Mon Sep 17 00:00:00 2001 From: MillyLee Date: Tue, 11 Mar 2014 10:22:44 +0800 Subject: [PATCH 1/8] =?UTF-8?q?=E7=BF=BB=E8=AF=91=E6=88=90=E4=B8=AD?= =?UTF-8?q?=E6=96=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index d5b6f3f2..518b0bbe 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,21 @@ # Code Guide -Code Guide is a project for documenting standards for developing flexible, durable, and sustainable HTML and CSS. It comes from years of experience writing code on projects of all sizes. It's not the end-all be-all, but it's a start. +Code Guide 是一个为书写灵活、耐用和可扩展的 HTML 与 CSS 的项目。总结自数年不同大小项目的代码经验。这不是一切，它仅仅只是个开始。 -**[Start reading ☞](http://mdo.github.io/code-guide)** -### License +**[开始阅读](http://mdo.github.io/code-guide)** -Released under MIT by, and copyright 2014, @mdo. +### 版权 -### Thanks +Released under MIT by, and copyright 2014, @mdo. -Heavily inspired by [Idiomatic CSS](https://github.com/necolas/idiomatic-css) and the [GitHub Styleguide](http://github.com/styleguide). +### 鸣谢 -### Translations +灵感来自于 [Idiomatic CSS](https://github.com/necolas/idiomatic-css) 与 [GitHub Styleguide](http://github.com/styleguide)。 -[Portuguese](http://diegoeis.github.io/code-guide/) - Translated by [Diego Eis](http://tableless.com.br/) -[Spanish](http://adrianayala.mx/code-guide/es/) - Translated by [Adrian Ayala](http://adrianayala.mx/) -[Indonesian](http://diagramatics.github.io/code-guide-id) - Translated by [Steven Sinatra](http://diagramatics.me) +### 其它语言版本 -<3 +[英语](http://mdo.github.io/code-guide/) - [Mark Otto](http://markdotto.com/) 原版作者 +[葡萄牙语](http://diegoeis.github.io/code-guide/) - 由 [Diego Eis](http://tableless.com.br/) 翻译 +[西班牙语](http://adrianayala.mx/code-guide/es/) - 由 [Adrian Ayala](http://adrianayala.mx/) 翻译 +[印度尼西亚语](http://diagramatics.github.io/code-guide-id) - 由 [Steven Sinatra](http://diagramatics.me) 翻译 From 0da98a564b7309cf26b307738d6baffeda278b37 Mon Sep 17 00:00:00 2001 From: MillyLee Date: Tue, 11 Mar 2014 10:23:33 +0800 Subject: [PATCH 2/8] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 518b0bbe..5557019f 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ Code Guide 是一个为书写灵活、耐用和可扩展的 HTML 与 CSS 的项目。总结自数年不同大小项目的代码经验。这不是一切，它仅仅只是个开始。 -**[开始阅读](http://mdo.github.io/code-guide)** +**[马上阅读☞](http://mdo.github.io/code-guide)** ### 版权 From 5e91526ad1be4a8651148054ae03d0ca7c9815f5 Mon Sep 17 00:00:00 2001 From: MillyLee Date: Tue, 11 Mar 2014 10:25:42 +0800 Subject: [PATCH 3/8] =?UTF-8?q?=E7=BF=BB=E8=AF=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 5557019f..724757bc 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ Code Guide 是一个为书写灵活、耐用和可扩展的 HTML 与 CSS 的项目。总结自数年不同大小项目的代码经验。这不是一切，它仅仅只是个开始。 -**[马上阅读☞](http://mdo.github.io/code-guide)** +**[马上阅读](http://mdo.github.io/code-guide)** ### 版权 @@ -16,6 +16,9 @@ Released under MIT by, and copyright 2014, @mdo. ### 其它语言版本 [英语](http://mdo.github.io/code-guide/) - [Mark Otto](http://markdotto.com/) 原版作者 + [葡萄牙语](http://diegoeis.github.io/code-guide/) - 由 [Diego Eis](http://tableless.com.br/) 翻译 + [西班牙语](http://adrianayala.mx/code-guide/es/) - 由 [Adrian Ayala](http://adrianayala.mx/) 翻译 -[印度尼西亚语](http://diagramatics.github.io/code-guide-id) - 由 [Steven Sinatra](http://diagramatics.me) 翻译 + +[印度尼西亚语](http://diagramatics.github.io/code-guide-id) - 由 [Steven Sinatra](http://diagramatics.me) 翻译 From c32c522078e55300f9b605e06260490dc8379cf9 Mon Sep 17 00:00:00 2001 From: MillyLee Date: Tue, 11 Mar 2014 10:31:58 +0800 Subject: [PATCH 4/8] =?UTF-8?q?=E7=BF=BB=E8=AF=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_config.yml b/_config.yml index f0dd4450..592cd6d7 100644 --- a/_config.yml +++ b/_config.yml @@ -1,6 +1,6 @@ -name: Code Guide by @mdo -description: Standards for developing flexible, durable, and sustainable HTML and CSS. -url: http://mdo.github.com/code-guide +name: Code Guide zh-CN +description: 创建灵活、耐用和可扩展的 HTML 与 CSS 的标准。 +url: http://millylee.github.com/code-guide markdown: rdiscount permalink: pretty From 7fbfabd43f021d3eaebc7213fcf1bbf4a0176c8a Mon Sep 17 00:00:00 2001 From: MillyLee Date: Tue, 11 Mar 2014 10:35:12 +0800 Subject: [PATCH 5/8] =?UTF-8?q?=E7=BF=BB=E8=AF=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_config.yml b/_config.yml index 592cd6d7..bbf2d728 100644 --- a/_config.yml +++ b/_config.yml @@ -1,5 +1,5 @@ name: Code Guide zh-CN -description: 创建灵活、耐用和可扩展的 HTML 与 CSS 的标准。 +description: 创建灵活、耐用和可扩展的 HTML 与 CSS 的规范。 url: http://millylee.github.com/code-guide markdown: rdiscount From 6290f482338731c8fb2b87932d86d0b4ab66f30b Mon Sep 17 00:00:00 2001 From: MillyLee Date: Tue, 11 Mar 2014 10:36:11 +0800 Subject: [PATCH 6/8] =?UTF-8?q?=E7=BF=BB=E8=AF=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 724757bc..d1068f29 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ Code Guide 是一个为书写灵活、耐用和可扩展的 HTML 与 CSS 的项目。总结自数年不同大小项目的代码经验。这不是一切，它仅仅只是个开始。 -**[马上阅读](http://mdo.github.io/code-guide)** +**[马 上阅读](http://millylee.github.io/code-guide)** ### 版权 From 0769b51dab94d6460743c8d5da7b3916603d68c6 Mon Sep 17 00:00:00 2001 From: MillyLee Date: Tue, 11 Mar 2014 14:59:38 +0800 Subject: [PATCH 7/8] =?UTF-8?q?=E5=85=88=E7=BF=BB=E8=AF=91=E4=B8=80?= =?UTF-8?q?=E9=83=A8=E5=88=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 56 +++++++++++++++++++++++++++--------------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index 88aae548..dc1bd175 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@
-

Table of contents

+

目录

@@ -42,12 +42,12 @@

CSS

-

Golden rule

-

Enforce these, or your own, agreed upon guidelines at all times. Small or large, call out what's incorrect. For additions or contributions to this Code Guide, please open an issue on GitHub.

+

黄金法则

+

随时都遵守代码规范，不管是这里的，还是你自己的。无论大小，如果有误还请不吝指出。为 Code Guide 添加或贡献，请在 GitHub 新开问题。

-

Every line of code should appear to be written by a single person, no matter the number of contributors.

+

无论参与者有多少，每行代码都应当看起来像一个人所写的一样。

@@ -62,10 +62,10 @@

HTML

Syntax

    -
  • Use soft tabs with two spaces—they're the only way to guarantee code renders the same in any environment.
    • -
  • Nested elements should be indented once (two spaces).
    • -
  • Always use double quotes, never single quotes, on attributes.
    • -
  • Don't include a trailing slash in self-closing elements—the HTML5 spec says they're optional.
    • +
  • 使用两个空格的 Tab 键 - 保证代码在任何环境下呈现相同效果
    • +
  • 嵌套标签应缩进一次（两空格）
    • +
  • 属性应当使用双引号，避免使用单引号
    • +
  • 自闭合标签不应当包含斜线 — HTML5 spec 规定它们是可选的
@@ -76,7 +76,7 @@

Syntax

HTML5 doctype

-

Enforce standards mode and more consistent rendering in every browser possible with this simple doctype at the beginning of every HTML page.

+

在每一个 HTML 页面中使用这个简洁的 doctype 以保证在任何浏览器下获得一致的渲染效果与执行标准模式。

{% highlight html %}{% include html/doctype.html %}{% endhighlight %} @@ -86,7 +86,7 @@

HTML5 doctype

Character encoding

-

Quickly and easily ensure proper rendering of your content by declaring an explicit character encoding.

+

声明一个明确的字符编码可以迅速与简单的确宝正确渲染你的内容。

{% highlight html %}{% include html/encoding.html %}{% endhighlight %} @@ -96,8 +96,8 @@

Character encoding

CSS and JavaScript includes

-

Per HTML5 spec, typically there is no need to specify a type when including CSS and JavaScript files as text/css and text/javascript are their respective defaults.

-

HTML5 spec links

+

HTML5 规定无需为 CSS 和 JavaScript 的 type 属性指定 text/css 和 text/javascript的 MIME 类型。

+

HTML5 规范链接

  • Using link
  • Using style
    • @@ -111,15 +111,15 @@

    HTML5 spec links

    -

    Practicality over purity

    -

    Strive to maintain HTML standards and semantics, but not at the expense of practicality. Use the least amount of markup with the fewest intricacies whenever possible.

    +

    简洁实用

    +

    在实用的前提下，尽量保持 HTML 的标准与语义化。在减少复杂性的前提下尽可能少用标签

    -

    Attribute order

    -

    HTML attributes should come in this particular order for easier reading of code.

    +

    属性书写顺序

    +

    HTML 属性应当使用如下特定顺序使其更具可读性。

    • class
    • id, name
      • @@ -128,7 +128,7 @@

      Attribute order

    • title, alt
    • aria-*, role
    -

    Classes make for great reusable components, so they come first. Ids are more specific and should be used sparingly (e.g., for in-page bookmarks), so they come second.

    +

    Class 重用性高，所以将它放第一位。Id 更形象具体，应该谨慎使用，(e.g., for in-page bookmarks), 所以将其排在第二。

    {% highlight html %}{% include html/attribute-order.html %}{% endhighlight %} @@ -156,8 +156,8 @@

    Boolean attributes

    -

    Reducing markup

    -

    Whenever possible, avoid superfluous parent elements when writing HTML. Many times this requires iteration and refactoring, but produces less HTML. Take the following example:

    +

    减少标签

    +

    书写 HTML 要随时避免产生过多的父元素，因为很多时候都需要迭代与重构，所以请按示例中那样来减少 HTML 标签：

    {% highlight html %}{% include html/reducing-markup.html %}{% endhighlight %} @@ -166,8 +166,8 @@

    Reducing markup

    -

    JavaScript generated markup

    -

    Writing markup in a JavaScript file makes the content harder to find, harder to edit, and less performant. Avoid it whenever possible.

    +

    JavaScript 生成标签

    +

    将标签写在 JavaScript 里面会使得内容变得难以查找、编辑和降低性能，请尽可能避免。

    @@ -348,14 +348,14 @@

    Organization

    -

    Editor preferences

    -

    Set your editor to the following settings to avoid common code inconsistencies and dirty diffs:

    +

    编辑器首选项

    +

    将编辑器调整为以下设置以避免共同协作时产生的不一致与差别：

      -
    • Use soft-tabs set to two spaces.
      • -
    • Trim trailing white space on save.
      • -
    • Set encoding to UTF-8.
      • -
    • Add new line at end of files.
      • +
    • 将软件上的 Tab 设置为两个空格
      • +
    • 保存时去掉结尾的空格
      • +
    • 文件编码统一为 UTF-8
      • +
    • 在文件结尾添加一行
    -

    Consider documenting and applying these preferences to your project's .editorconfig file. For an example, see the one in Bootstrap. Learn more about EditorConfig.

    +

    你可以考虑为你的项目创建一个 .editorconfig 的文件来书写和应用这些首选项。例如：可以查看 Bootstrap 的使用，或者学习更多关于 EditorConfig 的知识。

    From 5204681dbec5fb01a0d8ef3e934ca44d2fcafa49 Mon Sep 17 00:00:00 2001 From: millylee Date: Tue, 11 Mar 2014 23:29:55 +0800 Subject: [PATCH 8/8] =?UTF-8?q?=E7=BF=BB=E8=AF=91=20at=202014-03-11?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 翻译 at 2014-03-11 --- index.html | 84 +++++++++++++++++++++++++++--------------------------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/index.html b/index.html index dc1bd175..614c85c8 100644 --- a/index.html +++ b/index.html @@ -10,22 +10,22 @@

    目录

    HTML

    CSS

      -
    • CSS syntax
      • -
    • Declaration order
      • +
    • CSS 语法
      • +
    • 声明的顺序
    • Media query placement
    • Prefixed properties
    • Rules with single declarations
      • @@ -43,7 +43,7 @@

      CSS

      黄金法则

      -

      随时都遵守代码规范，不管是这里的，还是你自己的。无论大小，如果有误还请不吝指出。为 Code Guide 添加或贡献，请在 GitHub 新开问题。

      +

      随时都遵守代码规范，不管是这里的，还是你自己的。无论大小，如果有误还请不吝指出。为 Code Guide 添加或贡献，请在 GitHub 新开讨论。

      @@ -60,7 +60,7 @@

      HTML

      -

      Syntax

      +

      语法

      • 使用两个空格的 Tab 键 - 保证代码在任何环境下呈现相同效果
      • 嵌套标签应缩进一次（两空格）
        • @@ -85,7 +85,7 @@

        HTML5 doctype

        -

        Character encoding

        +

        字符编码

        声明一个明确的字符编码可以迅速与简单的确宝正确渲染你的内容。

        @@ -95,13 +95,13 @@

        Character encoding

        -

        CSS and JavaScript includes

        -

        HTML5 规定无需为 CSS 和 JavaScript 的 type 属性指定 text/css 和 text/javascript的 MIME 类型。

        +

        CSS 和 JavaScript 的引入

        +

        HTML5 规定无须为 CSS 和 JavaScript 的 type 属性指定 text/css 和 text/javascript的 MIME 类型。

        HTML5 规范链接

        @@ -137,17 +137,17 @@

        属性书写顺序

        -

        Boolean attributes

        -

        A boolean attribute is one that needs no declared value. XHTML required you to declare a value, but HTML5 has no such requirement.

        -

        For further reading, consult the WhatWG section on boolean attributes:

        +

        布尔值属性

        +

        布尔值属性无须声明值，XHTML要求声明一个值，但 HTML5 无此规定。

        +

        详细阅读请移步 WhatWG 以下是关于布尔值属性的部分节选:

        -

        The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

        +

        当一个元素中出现布尔值属性时则值为 true，如果缺失该属性则为 false。

        -

        If you must include the attribute's value, and you don't need to, follow this WhatWG guideline:

        +

        如果你一定要 包含属性的值, 你不用遵守以下 WhatWG 的规范：

        -

        If the attribute is present, its value must either be the empty string or [...] the attribute's canonical name, with no leading or trailing whitespace.

        +

        如果属性存在，它的值必须为空字符串或[...]该属性名，前后不能有空格。

        -

        In short, don't add a value.

        +

        总之，不要设置值。

        {% highlight html %}{% include html/boolean-attributes.html %}{% endhighlight %} @@ -179,21 +179,21 @@

        CSS

        -

        Syntax

        +

        语法

          -
        • Use soft tabs with two spaces—they're the only way to guarantee code renders the same in any environment.
          • -
        • When grouping selectors, keep individual selectors to a single line.
          • -
        • Include one space before the opening brace of declaration blocks for legibility.
          • -
        • Place closing braces of declaration blocks on a new line.
          • -
        • Include one space after : for each declaration.
          • -
        • Each declaration should appear on its own line for more accurate error reporting.
          • -
        • End all declarations with a semi-colon. The last declaration's is optional, but your code is more error prone without it.
          • -
        • Comma-separated property values should include a space after each comma (e.g., box-shadow).
          • +
        • 使用两个空格的 Tab 键 - 它是保证代码在任何环境下都能呈现相同效果的唯一方式
          • +
        • 当出现选择器分组时，将单独的选择器放一行
          • +
        • 左大括号与代码块之中空一格以保证可读性
          • +
        • 右大括号应当出现在代码块的下一行
          • +
        • :与任何声明之中都要空一格
          • +
        • 任何声明都应该独自占一行便于精准定位错误
          • +
        • 所有声明后面都应该跟有分号，虽然最后一个可有可无，但如果忽略容易出错。
          • +
        • 以逗号分隔属性值时，任何逗号后面都应该空一格 (例如：, box-shadow)
        • Don't include spaces after commas within rgb(), rgba(), hsl(), hsla(), or rect() values. This helps differentiate multiple color values (comma, no space) from multiple property values (comma with space). Also, don't prefix values with a leading zero (e.g., .5 instead of 0.5).
          • -
        • Lowercase all hex values, e.g., #fff. Lowercase letters are much easier to discern when scanning a document as they tend to have more unique shapes.
          • -
        • Use shorthand hex values where available, e.g., #fff instead of #ffffff.
          • +
        • 使用小写的十六进制值, 例如：#fff。由于上写字母独特的形状，它们往往更容易扫描。
          • +
        • 十六进制尽可能使用缩写, 例如使用 #fff 代替 #ffffff。
        • Quote attribute values in selectors, e.g., input[type="text"]. They’re only optional in some cases, and it’s a good practice for consistency.
          • -
        • Avoid specifying units for zero values, e.g., margin: 0; instead of margin: 0px;.
          • +
        • 属性值为 0 时不要指定单位, 例如使用 margin: 0; 代替 margin: 0px;.

        Questions on the terms used here? See the syntax section of the Cascading Style Sheets article on Wikipedia.

        @@ -204,13 +204,13 @@

        Syntax

        -

        Declaration order

        +

        声明的顺序

        Related property declarations should be grouped together following the order:

          -
        1. Positioning
          2. -
        2. Box model
          3. -
        3. Typographic
          4. -
        4. Visual
          5. +
        5. 位置属性
          6. +
        6. 自身属性（盒模型）
          7. +
        7. 文本属性
          8. +
        8. 显示属性

        Positioning comes first because it can remove an element from the normal flow of the document and override box model related styles. The box model comes next as it dictates a component's dimensions and placement.

        Everything else takes place inside the component or without impacting the previous two sections, and thus they come last.