Best HTML and CSS Practices and How to Implement them

For most front end developers, CSS, or at least HTML will seem like a piece of cake, but it may not be always the case. There were and will be a lot do scenarios where a back-end developer would have to get their hands dirty and buckle down to get some front-end work done. More often than not, this would lead to a lot of disarray, and what might be perceived as decent HTML and CSS by themselves, might be an SEO and a markup disaster that might not be easily maintainable.

HTML Best Practices

Always validate your HTML Markups

According to the W3C, there are certain standards that need to be upheld to write a good HTML code. You can validate your markup by visitng their official validation tool online at http://validator.w3.org/
So, for whichever tips mentioned in the remainder of this article, combine it with the above validation for best results.

Structure is important

We have all tested HTML snippets just by putting aor other tag snippets and saving it just to see how it render. While this works, this is neither the standard nor will it be supported in all the browsers. Hence always have a well defined document structure.

Use the correct doctype

This is a rather easy step considering that we use HTML 5 now. But incase it is not HTML 5 you are writing, or a rather stricter version of HTML like 4.xx refer this website to figure out which doctype to declare.

Use proper styling

• Never give inline styles: It cannot be overridden without JavaScript
• Put your stylesheets inside the head tag. This is so that, the styles load first and then the document will load with the styles, if it’s the other way round, the document will get loaded and then the styles will repaint the DOM causing performance degradation.

Strictly Avoid Duplicate IDs

It is fundamentally wrong to have a duplicate ID since it is a unique identifier. Needless to say that this will fail the W3C validator. Use classes instead of IDs if there are elements of similar nature that should be styles together

Use modular code blocks and Reduce the document size

Avoid a very lengthy markup. Use elements as sparingly as possible and try to split your document into several other document according to the section and display.

SEO and Miscellaneous Tips

• Do have a meta-tag in your document head section and treat it as important. It provides additional information about your page/website to the search crawlers.
• Use alt tags for images.
• Provide a meaningful title in the title tag
• Use only a SINGLE < h1 > tag. It is treated as your page headline. Use the < h2 > tags for subheadings, < h3 > for sub-sub headings and so on.
• Always use lowercase markups.
• Only use classes and IDs whenever it is absolutely necessary. If it can be referenced and styled generically without it, then make use of it.

CSS Tips

Keep it clean

Do not use messy CSS with a mixture of writing formats like

.class1.class2{background:blue; color: white; margin: 0 auto;}

AND

.class1.class2{
background:blue;
color: white;
margin: 0 auto;
}

If you’re following one of this, follow it across your project.

Use top down approach

While writing styles, start writing styles for more generic elements and then more specific ones with the placement of the elements on the page
Example:

• html, body, p, span, h1, h2, a, div
• .header
• .navbar
• .container, .content, .body
• .footer

Also, write the generic ones, first and then use the other styles and media queries in the end, generic to more specific.
Identify the structure of the page. Write more specific CSS ONLY if it’s absolutely required. Otherwise do not override it and let it inherit from the parents. Writing and repeating CSS for each child makes it difficult to debug and override in the future.

Naming convention

• Give meaningful names while keeping the below point in mind.
• While naming an HTML class and writing the appropriate CSS, make sure that you do not have to change the class name inorder to change the CSS. Example: You have a div. You got a requirement to make it of a background color of say “blue”. Do not give classes by the name “blue-div” or things like this. Because, int he future, if the requirement changes for you to change the background to example, “green”, you need to change the class name as well as the style.
• Same goes for font sizes, bold, etc

Never use inline styling and sparingly use !important

As mentioned above in the HTML section, never use inline styling. It cannot be overridden using CSS, only using scripts. The use of !important is usually debated, and the use of it should be minimized unless and until you know it should absolutely be used and overridden. But if there is even a remote chance of making it work without using !important, then that must be used. This article portrays the usage of the same and when it is okay to do so.

Use CSS Comb

You can use CSS Comb tools online like this one and set the rules. It removes unused CSS, inserts missing semicolon, converts your colors to lower/upper case and so on. This will further optimize your code.

Check for cross browser compatibility

Always, and I mean always, check if your CSS works like expected in all the majorly used browsers and browser versions.
You can do that by going to CanIUse
There are prefixes used to

• Android: -webkit-
• Chrome: -webkit-
• Firefox: -moz-
• Internet Explorer: -ms-
• iOS: -webkit-
• Opera: -o-
• Safari: -webkit-

Example:

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;

Instead of doing all the prefixes yourself, you could also go to an auto-prefixer tool to do it like this one.
It not only gives you the auto-prefixed output, but also checks for syntax errors in your styles.

Use external Stylesheets

Do not write styles inside the style tag. Instead link it from an external stylesheet.

CSS Specificity

Always take care of the specificity of the CSS Selectors. This would make choosing the selector and writing the styles much easier.

Source: https://vecta.io/blog/definitive-guide-to-css-styling-order

Example

Use shorthands and CSS Minification

Instead of using

margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

Use

margin: 10px 20px;

Or background:#fff instead of background: #fffff

Or background: url(image.jpg) right top no-repeat #000;

Instead of

  background-image: url(image.jpg);
  background-position: right top;
  background-repeat: no-repeat;
  background-color: #000000;

Minify CSS Online and reduce the size of your file by removing whitespaces from the stylesheets using https://csscompressor.net/ or https://cssminifier.com/