CSS

These are the CSS-specific coding styles. Anything mentions here overrides/adds to the "In General" guides. The only 1 principle when coding CSS is that:

Be consistent. As long as it is sharing a single pattern, it is maintainable.

#1- For Any Link, State Protocol

State the full URL including the protocol (e.g. https).
Avoid using insecure protocol.

/* Recommended */

@import 'https://fonts.googleapis.com/css?family=Open+Sans';

/* Not recommended: omits the protocol */

@import '//fonts.googleapis.com/css?family=Open+Sans';

/* Not recommended: uses HTTP */

@import 'http://fonts.googleapis.com/css?family=Open+Sans';

Rationale

Security purposes.

#2 - Indentation

use 2 spaces tab.

Recommended:

.example {

 color: blue;

Rationale

Use tab as it is designed for indentation.
Make the elements clear.
These spaces are deleted when minification process is used.

#3 - Naming Convention

Use lowercase at all cost (except for values like full name).

<!-- Recommended -->

color: #e5e5e5;

<!-- Not recommended -->

color: #E5E5E5;

Rationale

Distinguish between tags, its descriptions and values.
Less complications.

#4 - Comments

Use minification and compression for post-processing CSS output.
Follow Generalized practice when you use minification compression for your CSS output.
Use sparingly otherwise.

Rationale

Minification process will strip the comments from the output CSS. Hence, it is safe to use comments.
Minify CSS reduces network payload size.

#5 - Use HTML5

Use HTML5 instead of other version.
Use UTF-8 characters set.
Use tools like W3C Validator to validate site.

Recommended:

<!DOCTYPE html>

<meta charset="utf-8">

Not recommended:

<html>

<meta charset="utf-8">

Rationale

Security and modern browsers interpretation.

#6 - Use Proper ID and Class Naming

Use meaningful name.
Use generic name over presentation or meaningless name.
Use functional and generic name to simplify styling changes.

Recommended:

<!-- Recommended -->

#gallery {}

#login {}

.video {}

.aux {}

.alt {}

Not recommended:

<!-- Not recommended -->

#yee-1901 {}

.button-green {}

.clear {}

Rationale

Built-in syntax checkup.
Purposeful checking and simpler codes.

#7 - ID and Class Naming Style

Should be as short as possible but as long as necessary.
Should be intuitively acceptable by its name.

Recommended:

#nav {}

.author {}

Not Recommended:

#navigation {}

.atr {}

Rationale

Keep things simple.

#8 - Avoid Type Selector Whenever Possible

Use generic ID and class type selector.
Only use selector when absolute necessary.

Recommended:

#example {}

.error {}

Not recommended:

ul#example {}

div.error {}

Rationale

Selector bloats CSS file for 1 specific styling.
Performance degradation.

#9 - Use Shorthand Whenever Available

Use the simplest configuration for maximum profits.

Recommended:

border-top: 0;

font: 100%/1.6 palatino, georgia, serif;

padding: 0 1em 2em;

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;

Rationale

Less line and clean.

#10 - Only Provide Unit When Required

Not all elements need unit. Provide to those that are needed.

Example:

flex: 0px; /* This flex-basis component requires a unit. */

flex: 1 1 0px; /* Not ambiguous without the unit, but needed in IE11. */

margin: 0;

padding: 0;

Rationale

Complying to standards.

#11 - Omit Leading 0.

Remove the leading 0 when it comes to decimal values.

Recommended:

font-size: .8em;

Not recommended:

font-size: 0.8em;

Rationale

Clearer decimal value.
reduce overall sizes.

#12 - Use 3 Hexadecimal Characters When Available

When there are repeating values compatible with 3-hexadecimal characters, use it.

Recommended:

color: #ebc;

Not recommended:

color: #eebbcc;

Rationale

Reduce overall sizes.

#13 - Use Prefixes to Group CSS Elements and Perform Delimiting

Use hyphen to prefix elements.
Use hyphen to separate words instead of space or underscore.

Recommended:

.adw-help {} /* AdWords */

#maia-note {} /* Maia */

#video-id {}

.ads-sample {}

Not recommended:

/* Not recommended: does not separate the words “demo” and “image” */

.demoimage {}

/* Not recommended: uses underscore instead of hyphen */

.error_status {}

Rationale

There are times where we combine multiple CSS files together and generic names tends to conflict one another. You can use prefix to group them together as one module library.

#14 - Sort Alphabetically for Each Declaration

Use hyphen to prefix elements.
Group vendor-specific elements with the main elements but also, sort them alphabetically in the group itself.

Recommended:

background: fuchsia;

border: 1px solid;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

border-radius: 4px;

color: black;

text-align: center;

text-indent: 2em;

Rationale

Easier to search for elements.

#15 - Block Content Indentation

Indent all elements inside block contents

Recommended:

@media screen, projection {

  html {

    background: #fff;

    color: #444;

Rationale

Clear grouping of styles.

#16 - Always use Semicolon to End A Declaration

Always use semicolon to split declaration.

Recommended:

.test {

  display: block;

  height: 100px;

Not Recommended:

.test {

  display: block;

  height: 100px

Rationale

Clear instruction splitting.
Extensibility and Maintainability.
Minification process will remove all spaces. Hence, semicolon acts as a vital separator.

#17 - Use a Space After Property Colon and Before Opening Curly Braces

Add a space after a colon.
Add a space before opening braces.
DO NOT set opening curly braces onto a new line.

Recommended:

.test {

  display: block;

  height: 100px;

Not Recommended:

/* Not recommended: key-value are joined */

.test {

  display:block;

  height:100px

/* Not recommended: missing space before curly braces */

#video{

  margin-top: 1em;

/* Not recommended: unnecessary line break for curly braces */

#video

  margin-top: 1em;

Rationale

Clear key-value splitting.

#18 - Use Comma and New Line To Separate Multiple Selectors

Always use comma and new line to separate selectors.

Recommended:

h1,

h2,

h3 {

  font-weight: normal;

  line-height: 1.2;

Not Recommended:

h1, h2, h3 {

  font-weight: normal;

  line-height: 1.2;

Rationale

Clear selector modifications.
Minification process will remove the space and new-line. Hence, write for human to read.

#19 - Always Put a Blank Line between Rules

Use blank new line between rules.

Recommended:

html {

  background: #fff;

body {

  margin: auto;

  width: 50%;

Not Recommended:

html {

  background: #fff;

body {

  margin: auto;

  width: 50%;

Rationale

Clear separation.
Minification process will remove the space and new-line. Hence, write for human to read.

#20 - Use Single Quotation Marks Whenever Possible

Default to single quotation mark (').
No quotation mark for URL.
Only use double quotation mark (") when there is a strict requirement.

Recommended:

/* Recommended */

@import url(https://www.google.com/css/maia.css);

html {

  font-family: 'open sans', arial, sans-serif;

Not Recommended:

/* Not recommended */

@import url("https://www.google.com/css/maia.css");

html {

  font-family: "open sans", arial, sans-serif;

Rationale

Security reason (opinionated).
Comply to standards.

#21 - Refrain from Using !Important

That is for emergency and debugging usage.
Refractor your CSS instead.

Rationale

If everything is explicitly important, they are not important at all!

That's all for CSS coding style.

Page updated

Google Sites

Report abuse