From 18ed71c507d7cfdedb8c5d1dfc186c16c9a03709 Mon Sep 17 00:00:00 2001
From: Tony Ruscoe
Indent by 2 spaces at a time.
-Don’t use tabs or mix tabs and spaces for indentation.
+Don’t use tabs or mix tabs and spaces for indentation.
<ul>
<li>Fantastic
@@ -135,7 +135,7 @@ why is respective solution used or preferred?
(This item is optional as it is not deemed a realistic expectation to always
demand fully documented code. Mileage may vary heavily for HTML and CSS code and
-depends on the project’s complexity.)
+depends on the project’s complexity.)
2.3.3 Action Items
@@ -170,7 +170,7 @@ depends on the project’s complexity.)
HTML5 (HTML syntax) is preferred for all HTML documents: <!DOCTYPE html>
.
-(It’s recommended to use HTML, as text/html
. Do not use XHTML. XHTML, as
+
(It’s recommended to use HTML, as text/html
. Do not use XHTML. XHTML, as
application/xhtml+xml
, lacks both browser
and infrastructure support and offers less room for optimization than HTML.)
@@ -210,7 +210,7 @@ HTML usage.
Use HTML according to its purpose.
-Use elements (sometimes incorrectly called “tags”) for what they have been
+
Use elements (sometimes incorrectly called “tags”) for what they have been
created for. For example, use heading elements for headings, p
elements for
paragraphs, a
elements for anchors, etc.
@@ -275,9 +275,9 @@ templates than it is to update style sheets and scripts.
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML sucks</h1>
-<p>I’ve read about this on a few sites but now I’m sure:
+<p>I’ve read about this on a few sites but now I’m sure:
<u>HTML is stupid!!1</u>
-<center>I can’t believe there’s no way to control the styling of
+<center>I can’t believe there’s no way to control the styling of
my website without doing everything all over again!</center>
@@ -286,10 +286,10 @@ templates than it is to update style sheets and scripts.
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>
-<p>I’ve read about this on a few sites but today I’m actually
+<p>I’ve read about this on a few sites but today I’m actually
doing it: separating concerns and avoiding anything in the HTML of
my website that is presentational.
-<p>It’s awesome!
+<p>It’s awesome!
The only exceptions apply to characters with special meaning in HTML (like <
-and &
) as well as control or “invisible” characters (like no-break spaces).
&
) as well as control or “invisible” characters (like no-break spaces).
<!-- Not recommended -->
The currency symbol for the Euro is “&eur;”.
<!-- Recommended -->
-The currency symbol for the Euro is “€”.
+The currency symbol for the Euro is “€”.
Also, indent them if they are child elements of a block, list, or table element.
-(If you run into issues around whitespace between list items it’s acceptable to +
(If you run into issues around whitespace between list items it’s acceptable to
put all li
elements in one line. A linter is encouraged to throw a warning
instead of an error.)
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.”
+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.
@@ -580,7 +580,7 @@ padding: 0 1em 2em;Omit unit specification after “0” values, unless required.
+Omit unit specification after “0” values, unless required.
Do not use units after 0
values unless they are required.
Omit leading “0”s in values.
+Omit leading “0”s in values.
Do not put 0
s in front of values or lengths between -1 and 1.
/* Not recommended: does not separate the words “demo” and “image” */
+/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {}
/* Not recommended: uses underscore instead of hyphen */
@@ -651,16 +651,16 @@ and scannability.
4.1.11 Hacks
-Avoid user agent detection as well as CSS “hacks”—try a different approach
+
Avoid user agent detection as well as CSS “hacks”—try a different approach
first.
-It’s tempting to address styling differences over user agent detection or
+
It’s tempting to address styling differences over user agent detection or
special CSS filters, workarounds, and hacks. Both approaches should be
considered last resort in order to achieve and maintain an efficient and
manageable code base. Put another way, giving detection and hacks a free pass
will hurt projects in the long run as projects tend to take the way of least
resistance. That is, allowing and making it easy to use detection and hacks
-means using detection and hacks more frequently—and more frequently is too
+means using detection and hacks more frequently—and more frequently is too
frequently.
4.2 CSS Formatting Rules
@@ -727,7 +727,7 @@ reasons.
4.2.4 Property Name Stops
-Use a space after a property name’s colon.
+Use a space after a property name’s colon.
Always use a single space between property and value (but no space between
property and colon) for consistency reasons.
@@ -817,7 +817,7 @@ selectors and property values.
Do not use quotation marks in URI values (url()
).
Exception: If you do need to use the @charset
rule, use double quotation
-marks—single quotation marks are not permitted.
+marks—single quotation marks are not permitted.
/* Not recommended */
@import url("https://www.google.com/css/maia.css");
@@ -861,13 +861,13 @@ sections with new lines.
Be consistent.
-If you’re editing code, take a few minutes to look at the code around you and
+
If you’re editing code, take a few minutes to look at the code around you and
determine its style. If they use spaces around all their arithmetic operators,
you should too. If their comments have little boxes of hash marks around them,
make your comments have little boxes of hash marks around them too.
The point of having style guidelines is to have a common vocabulary of coding so
-people can concentrate on what you’re saying rather than on how you’re saying
+people can concentrate on what you’re saying rather than on how you’re saying
it. We present global style rules here so people know the vocabulary, but local
style is also important. If code you add to a file looks drastically different
from the existing code around it, it throws readers out of their rhythm when