-
Notifications
You must be signed in to change notification settings - Fork 2
HTML CSS Style Guide
Don’t use tabs or mix tabs and spaces for indentation.
<ul> <li>Fantastic <li>Great </ul>
.example {
color: blue;
}
All code has to be lowercase: This applies to HTML element names,
attributes, attribute values (unless
text/CDATA), CSS selectors, properties, and
property values (with the exception of strings).
<!-- Not recommended --> <A HREF="/">Home</A>
<!-- Recommended --> <img src="google.png" alt="Google">
/* Not recommended */ color: #E5E5E5;
/* Recommended */ color: #e5e5e5;
Trailing white spaces are unnecessary and can complicate diffs.
<!-- Not recommended --> <p>What?_
<!-- Recommended --> <p>Yes please.
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.
Using HTML according to its purpose is important for accessibility, reuse, and code efficiency reasons.
<div>
<!-- Not recommended --> <div onclick="goToRecommendations();">All recommendations</div>
<!-- Recommended --> <a href="recommendations/">All recommendations</a>
Independent of the styling of an element (as CSS allows
elements to assume a different role per display
property), put every block, list, or table element 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 put all li elements in one
line. A linter is encouraged to throw a warning instead of
an error.)
<blockquote> <p><em>Space</em>, the final frontier.</p> </blockquote>
<ul> <li>Moe <li>Larry <li>Curly </ul>
<table>
<thead>
<tr>
<th scope="col">Income
<th scope="col">Taxes
<tbody>
<tr>
<td>$ 5.00
<td>$ 4.50
</table>
Use double ("") rather than single quotation marks
('') around attribute values.
<!-- Not recommended --> <a class='maia-button maia-button-secondary'>Sign in</a>
<!-- Recommended --> <a class="maia-button maia-button-secondary">Sign in</a>
CSS offers a variety of shorthand
properties (like font)
that should be used whenever possible, even in cases where
only one value is explicitly set.
Using shorthand properties is useful for code efficiency and understandability.
/* Not recommended */ border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0;
/* Recommended */ border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;
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.