From 18ed71c507d7cfdedb8c5d1dfc186c16c9a03709 Mon Sep 17 00:00:00 2001 From: Tony Ruscoe Date: Wed, 12 Jan 2022 14:33:52 +0000 Subject: [PATCH] Replace HTML entities in the HTML/CSS Style Guide The internal script that converts our style guides from Markdown to HTML now does this. --- htmlcssguide.html | 48 +++++++++++++++++++++++------------------------ 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/htmlcssguide.html b/htmlcssguide.html index 3c823e5..43c29e4 100644 --- a/htmlcssguide.html +++ b/htmlcssguide.html @@ -59,7 +59,7 @@ over HTTPS.

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!

3.1.6 Entity References

@@ -301,14 +301,14 @@ templates than it is to update style sheets and scripts.

as well as among teams.

The only exceptions apply to characters with special meaning in HTML (like < -and &) as well as control or “invisible” characters (like no-break spaces).

+and &) as well as control or “invisible” characters (like no-break spaces).

<!-- Not recommended -->
 The currency symbol for the Euro is &ldquo;&eur;&rdquo;.
 
<!-- Recommended -->
-The currency symbol for the Euro is “€”.
+The currency symbol for the Euro is “€”.
 

3.1.7 Optional Tags

@@ -320,8 +320,8 @@ tags. The <!-- Not recommended --> @@ -385,7 +385,7 @@ on a new line.

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

@@ -490,7 +490,7 @@ reflect the purpose of the element in question, or that are otherwise generic.

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;

4.1.6 0 and Units

-

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.

@@ -592,7 +592,7 @@ padding: 0;

4.1.7 Leading 0s

-

Omit leading “0”s in values.

+

Omit leading “0”s in values.

Do not put 0s in front of values or lengths between -1 and 1.

@@ -637,7 +637,7 @@ easier, for example in search and replace operations.

(including none at all) other than hyphens, in order to improve understanding and scannability.

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