diff --git a/htmlcssguide.html b/htmlcssguide.html index d332787..8bab67a 100644 --- a/htmlcssguide.html +++ b/htmlcssguide.html @@ -371,6 +371,34 @@ as defaults. This can be safely done even for older browsers.

<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script> +

id Attributes

+ +

Avoid unnecessary id attributes.

+ +

Prefer class attributes for styling and data attributes for scripting.

+ +

Where id attributes are strictly required, always include a hyphen in the +value to ensure it does not match the JavaScript identifier syntax, e.g. use +user-profile rather than just profile or userProfile.

+ +

When an element has an id attribute, browsers will make that available as a +named property on the global window prototype, +which may cause unexpected behavior. While id attribute values containing a +hyphen are still available as property names, these cannot be referenced as +global JavaScript variables.

+ +
<!-- Not recommended: `window.userProfile` will resolve to reference the <div> node -->
+<div id="userProfile"></div>
+
+ +
<!-- Recommended: `id` attribute is required and its value includes a hyphen -->
+<div aria-describedby="user-profile">
+  …
+  <div id="user-profile"></div>
+  …
+</div>
+
+

HTML Formatting Rules

General Formatting

@@ -477,12 +505,12 @@ to test.

CSS code that may not have any effect and can be removed, and that ensures proper CSS usage.

-

ID and Class Naming

+

Class Naming

-

Use meaningful or generic ID and class names.

+

Use meaningful or generic 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.

+

Instead of presentational or cryptic names, always use 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.

@@ -494,7 +522,7 @@ meaning different from their siblings. They are typically needed as “helpers. document or template changes.

/* Not recommended: meaningless */
-#yee-1901 {}
+.yee-1901 {}
 
 /* Not recommended: presentational */
 .button-green {}
@@ -502,8 +530,8 @@ document or template changes.

 
/* Recommended: specific */
-#gallery {}
-#login {}
+.gallery {}
+.login {}
 .video {}
 
 /* Recommended: generic */
@@ -511,28 +539,28 @@ document or template changes.

 .alt {}
-

ID and Class Name Style

+

Class Name Style

-

Use ID and class names that are as short as possible but as long as necessary.

+

Use 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.

+

Try to convey what a 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.

+

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

/* Not recommended */
-#navigation {}
+.navigation {}
 .atr {}
 
/* Recommended */
-#nav {}
+.nav {}
 .author {}
-

ID and Class Name Delimiters

+

Class Name Delimiters

-

Separate words in ID and class names by a hyphen.

+

Separate words in class names by a hyphen.

Do not concatenate words and abbreviations in selectors by any characters (including none at all) other than hyphens, in order to improve understanding @@ -546,7 +574,7 @@ and scannability.

/* Recommended */
-#video-id {}
+.video-id {}
 .ads-sample {}
@@ -555,36 +583,52 @@ and scannability.

Prefix selectors with an application-specific prefix (optional).

In large projects as well as for code that gets embedded in other projects or on -external sites use prefixes (as namespaces) for ID and class names. Use short, -unique identifiers followed by a dash.

+external sites use prefixes (as namespaces) for class names. Use short, unique +identifiers followed by a dash.

Using namespaces helps preventing naming conflicts and can make maintenance easier, for example in search and replace operations.

.adw-help {} /* AdWords */
-#maia-note {} /* Maia */
+.maia-note {} /* Maia */

Type Selectors

-

Avoid qualifying ID and class names with type selectors.

+

Avoid qualifying class names with type selectors.

Unless necessary (for example with helper classes), do not use element names in -conjunction with IDs or classes.

+conjunction with classes.

Avoiding unnecessary ancestor selectors is useful for performance reasons.

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

ID Selectors

+ +

Avoid ID selectors.

+ +

ID attributes are expected to be unique across an entire page, which is +difficult to guarantee when a page contains many components worked on by many +different engineers. Class selectors should be preferred in all situations.

+ +
/* Not recommended */
+#example {}
+
+ +
/* Recommended */
+.example {}
+
+

Shorthand Properties

Use shorthand properties where possible.

@@ -757,19 +801,19 @@ begins the rule.

/* Not recommended: missing space */
-#video{
+.video{
   margin-top: 1em;
 }
 
 /* Not recommended: unnecessary line break */
-#video
+.video
 {
   margin-top: 1em;
 }
 
/* Recommended */
-#video {
+.video {
   margin-top: 1em;
 }
@@ -848,11 +892,11 @@ sections with new lines.

/* Header */
 
-#adw-header {}
+.adw-header {}
 
 /* Footer */
 
-#adw-footer {}
+.adw-footer {}
 
 /* Gallery */