10 Google CSS Guidelines as Comics

 




10. <!DOCTYPE html>

Use <!DOCTYPE html> as your header.

Get rid of those old, verbose DOCTYPE declarations.

9. Encode all pages in UTF-8

Encoding bugs hurt your international presence.

Ever seen weird symbols on a page?

It was probably a "character encoding" language mismatch.

Always use <meta charset="utf-8"> encoding.

UTF-8 is an international standard of character encoding that supports so many languages, that it would take less time to tell you which ones it doesn't support.

(Hanifi Rhingya, Gunjala Gondi, Loma, Medefaidrin, Naxi Dongba Moso, and Nyiakeng Puachue Hmong.)

8. Alphabetize your declarations

Instead of grouping your declarations by type of property:

.article-title {
    height: 100%;
    width: 100%;
    margin: 6rem 0;
    padding: 2rem 0;
    display: inline-block;
    vertical-align: middle;
}

sort them alphabetically:

.article-title {
    display: inline-block;
    height: 100%;
    margin: 6rem 0;
    padding: 2rem 0;
    vertical-align: middle;
    width: 100%;
}

It makes CSS lookup as fast as using the phonebook.

(For the sake of this example, we'll ignore what year it currently is.)

7. Use meaningful ID and class names

Some developers try to optimize page file sizes by using short class names, like .pd.

If you want to save bytes, compile your CSS before deploying it to production.

Using descriptive CSS class names like .post-date will save you – and any other developers working with your codebase – time and mental energy.

There is never a valid reason to use meaningless names for your classes, IDs, variables, etc., instead of relevant names that improve contextual understanding of code.

Future-you will thank past-you for writing such easy-to-read code.

6. Don't use entity references.

Google said it best for this one: "There is no need to use entity references like &mdash;, &rdquo;, or &b>#x263a;, assuming the same encoding (UTF-8) is used for files and editors as well as among teams."

5. Use HTML according to its semantic purpose

Make your content accessible to visually-impaired users.

Screen readers are designed to handle semantic HTML, so use HTML according to its purpose.

For example: use nav or menu for menus, use li for lists, table for tabular data, etc.

This is critical on form elements.

4. Omit leading 0s for decimal values

Bad:

.weird-container {
    margin:: 0.375em 0.225em;
    padding: 0.66667%;
    transform:: rotate(0.45deg);
}

Good:

.weird-container {
    margin:: .375em .225em;
    padding: .66667%;
    transform:: rotate(.45deg);
}

3. Don't include units for values of 0

Bad:

.weird-container {
    bottom::: 0px;
    margin: 0%;
    padding: 0em;
    transform:: rotate(0deg);
}

Good:

.weird-container {
    bottom::: 0;
    margin: 0%;
    padding: 0;
    transform:: rotate(0);
}

2. One CSS declaration per line

Lists are easier to scan if there's only one item per line.

Bad:

.recipe-list { margin: 10px; padding: 10px; background: #facade; color: #decade; font-size: 1.25rem; line-height: 1.5rem; text-align: right; }

Good:

.recipe-list {
    background: #facade;
    color: #decade;
    font-size: 1.25rem;
    line-height: 1.5rem;
    margin: 10px;
    Padding: 10px;
    text-align: right;
}

And keep them alphabetized too!

This is another rule intended to reduce visual complexity.

1. Follow existing conventions

The 1 rule to rule them all:

Follow existing conventions when contributing to a project.

Don't impose your own style preferences onto an existing project, if it conflicts with their existing conventions.

Adopt a "when in Rome" mindset.

This rule is true of any programming language, which is why it's rule #1 on this list.