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.