HTML & CSS Styling Standards and Best Practices (Part I)

HTML and CSS covers major portion of frontend development. Writing valid, widely accepted & standard CSS and HTML code is always been a hectic for programmers, This article will help you to find better possible way to balance your code between perfection and pragmatism.

This article includes formatting and styling rules for HTML and CSS, it will help in improving collaboration, code quality, maintaining standards and enabling supportive environment. Also some of the latest best practices for front-end coding that will help your stylesheets and HTML considerably.

Lets start with general styling rules for CSS that should be followed for clear understanding and re-usability of code

General CSS Styling Rules:

Omit the protocol from embedded resources.
Omit the protocol portion (http:, https:) from URLs pointing to images and other media files, style sheets, and scripts unless the respective files are not available over both protocols. Omitting the protocol—which makes the URL relative—prevents mixed content issues and results in minor file size savings.

/* Not recommended */
.example {
background: url(http://www.google.com/images/example);
}

/* Recommended */
.example {
background: url(//www.google.com/images/example);
}

Indent by 2 spaces at a time.
Don’t use tabs or mix tabs and spaces for indentation.

.example {
color: blue;
}

Use only lowercase.
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 */
color: #E5E5E5;
/* Recommended */
color: #e5e5e5;

Use meaningful or generic ID and class names
Instead of presentational or cryptic names, always use ID and class names that reflect the purpose of the element in question, or that are otherwise generic.
Names that are specific and reflect the purpose of the element should be preferred as these are most understandable and the least likely to change.
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.”
Using functional or generic names reduces the probability of unnecessary document or template changes.

/* Not recommended: meaningless */
#yee-1901 {}

/* Not recommended: presentational */
.button-green {}
.clear {}

/* Recommended: specific */
#gallery {}
#login {}
.video {}

/* Recommended: generic */
.aux {}
.alt {}

Use ID and class names that are as short as possible but as long as necessary.
Try to convey what an ID or class is about while being as brief as possible.
Using ID and class names this way contributes to acceptable levels of understandability and code efficiency.

/* Not recommended */
#navigation {}
.atr {}
/* Recommended */
#nav {}
.author {}

Avoid qualifying ID and class names with type selectors.
Unless necessary (for example with helper classes), do not use element names in conjunction with IDs or classes.
Avoiding unnecessary ancestor selectors is useful for performance reasons.

/* Not recommended */
ul#example {}
div.error {}

/* Recommended */
#example {}
.error {}

Use shorthand properties where possible.
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;
Omit unit specification after “0” values.
Do not use units after 0 values unless they are required.
margin: 0;
padding: 0;
Omit leading “0”s in values.
Do not use put 0s in front of values or lengths between -1 and 1.
font-size: .8em;

Use 3 character hexadecimal notation where possible.
For color values that permit it, 3 character hexadecimal notation is shorter and more succinct.

/* Not recommended */
color: #eebbcc;

/* Recommended */
color: #ebc;

Separate words in ID and class names by a hyphen.
Do not concatenate words and abbreviations in selectors by any characters (including none at all) other than hyphens, in order to improve understanding and scannability.

/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {}

/* Not recommended: uses underscore instead of hyphen */
.error_status {}

/* Recommended */
#video-id {}
.ads-sample {}

Use a semicolon after every declaration.
End every declaration with a semicolon for consistency and extensibility reasons.

/* Not recommended */
.test {
display: block;
height: 100px
}

/* Recommended */
.test {
display: block;
height: 100px;
}

Use single quotation marks for attribute selectors and property values.
Use single (”) rather than double (“”) quotation marks for attribute selectors or 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.

/* Not recommended */
@import url("//www.google.com/css/maia.css");
html {
font-family: "open sans", arial, sans-serif;
}

/* Recommended */
@import url(//www.google.com/css/maia.css);

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

Group sections by a section comment (optional).
If possible, group style sheet sections together by using comments. Separate sections with new lines.

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

Drop Unit Type from Zero Values
One way to easily cut down on the amount of CSS code written is to remove the unit type from any zero value. No matter what length value being used, pixels, percentages, em, and so forth, zero is always zero.

/* Not recommended */
div {
  margin: 20px 0px;
  letter-spacing: 0%;
  padding: 0px 5px;
}

/* Recommended */
div {
  margin: 20px 0;
  letter-spacing: 0;
  padding: 0 5px;
}

Build Proficient Selectors
CSS selectors can get out of control if not carefully watched. They can become too location specific as well as too long fairly easily. For the longest time we’ve been told not to use classes and to use element selectors as much as possible. Regrettably, this isn’t true.

/* Not recommended */
ul.news li a {…}
ul.news li a em.special {...}

/* Recommended */
.news a {...}.news 
.special {...}

Please see next article for some of the latest best practices for front-end coding that will help your stylesheets and HTML considerably.