前端代码风格.md

前端代码风格

Google HTML/CSS Style Guide

http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

几个注意点

Capitalization (Use only lowercase.)

• Use UTF-8 (no BOM).

Use HTML according to its purpose.

<!-- Not recommended -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- Recommended -->
<a href="recommendations/">All recommendations</a>

Multimedia Fallback

<!-- Not recommended -->
<img src="spreadsheet.png">
<!-- Recommended -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

Use double rather than single quotation marks around attribute values.

• ID and Class Naming

Use meaningful or generic ID and class names. Instead of presentational or cryptic names, always use ID and class names that reflect the purpose of the element in question, or that are otherwise generic.

Names that are specific and reflect the purpose of the element should be preferred as these are most understandable and the least likely to change.

Generic names are simply a fallback for elements that have no particular or no meaning different from their siblings. They are typically needed as “helpers.”

Using functional or generic names reduces the probability of unnecessary document or template changes.

/* Not recommended: meaningless */
#yee-1901 {}

/* Not recommended: presentational（表象的） */ 
.button-green {}
.clear {}

/* Recommended: specific */
#gallery {}
#login {}
.video {}

/* Recommended: generic */
.aux {}
.alt {}

ID and Class Name Style

Use ID and class names that are as short as possible but as long as necessary. Try to convey what an ID or class is about while being as brief as possible.

Using ID and class names this way contributes to acceptable levels of understandability and code efficiency.

/* Not recommended */
#navigation {}
.atr {}

/* Recommended */
#nav {}
.author {}

Type Selectors

/* Not recommended */
ul#example {}
div.error {}

/* Recommended */
#example {}
.error {}

关于这点，我个人认为以代码可维护性为主，比如less，该嵌套就嵌套，没关系

Shorthand Properties

关于缩写，

padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 2em;

padding: 2em 1em;

但要注意，不要多余覆盖，只覆盖掉应该被设置的属性值。 应该遵循最小影响原则。