10 Best Practices in CSS

If you are inquisitive about learning and implementing CSS, then you must do it the right way, the way professionals do.

Sometimes it’s the result of sloppy committal to writing from the beginning, and thanks to various hacks and changes over time.

CSS could be a language that is employed by almost each developer for some purpose. Moreover, it is a language for which we have a tendency to typically view as granted, it’s powerful and has several nuances that may facilitate (or damage) our styles.

1. Create it Readable

The readability of your CSS is necessary, although the general public overlooks its importance. Nice readability of your CSS makes it a lot easier to keep up with the future, as you will be able to notice components faster.

Note: Usually while writing CSS, most developers adopt one of the following approaches.

Approach 1: All on one line as below:

[java]
.example{background:red;padding:2em;border:1px solid black;}
[/java]

Approach 2: Each style gets its own line as below:

[java]
.example {
background: red;
padding: 2em;
border: 1px solid black;
}
[/java]

Both practices square measure is acceptable, although you may usually notice that way two despises way one! Simply keep in mind – opt for the tactic that appears best TO YOU. This is all that matters.

2. Use Reset and Normalize CSS

Most CSS frameworks have an option to reset them. If you are not aiming to use the existing framework reset CSS  one, then a better option will be to set them to reset or normalize. Resets or Normalize CSS eliminate browser inconsistencies like heights, font sizes, margins, headings, etc. The reset permits your layout to look consistent all told browsers.

Find different type of Reset CSS from here: http://cssreset.com/

3. Organize the Stylesheet

It is smart to put your stylesheet come in the simplest way that permits you to realize elements of your code quickly. I like to recommend a top-down format that tackles designs as they seem within the ASCII text file. So, an associate degree example stylesheet could be ordered like this:

i) Generic Element (body, a, p, h1, etc.)
ii) .header
iii) .nav
iv) .wrapper

Also, use commented CSS like below:

[java]
/****** header ******/
styles goes here…
/****** navigation ******/
styles goes here…
/****** main content ******/
styles goes here…
/****** footer ******/
styles go here…
[/java]

4. Combine CSS Elements

Elements during a stylesheet typically share properties. Rather than re-writing previous code, why not simply mix them? As an example, your h1, h2, and h3 components would possibly share identical font and color. Hence you can combine the same:

[java]
h1, h2, h3 {
font-family: verdana;
color: #e1e1e1;
}
[/java]

5. Use Appropriate Naming Convention

One of the main advantages of CSS is the ability to separate designs from content. You’ll be able to change the entire design of your website by simply modifying the CSS without ever touching the markup language. Therefore don’t create your CSS by using limiting names. Use additional versatile naming conventions and keep consistent.

The naming of your CSS elements is based on what they’re, not what they give the impression of being like. For instance, “.comment-blue” is not appropriate than “.comment-beta” (because if you need to change the color of this class, then you only need to change in CSS, not in HTML), and “.post-large-font” is additional limiting than “.post-title”.

6. Always avoid inline styling

Using inline styling show the HTML code messy. Updating each HTML events style through global CSS is hard. So you always need to avoid inline style. Below is the example related to this style:

Bad Code:

[java]
<div style="float:left">
<img src="images/logo.gif" alt="" />
</div>
[/java]

Good Code:

[java]
<div class="left">
<img src="images/logo.gif" alt="" />
</div>
[/java]

7. Always use External CSS

The use of external CSS is beneficial. You can pull all the CSS in an external file and include this files in your HTML.

Benefits of External CSS:

• All the CSS are stored within single Stylesheet.
• All the style changes are done in a single CSS for each page (Easier to maintain the website).
• Single CSS will be cached and page load faster.
• Due to the use of external CSS, we can differentiate the CSS like web page layout CSS and Print-friendly CSS.

Use different version external stylesheet in your HTML as follows:

[java]
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="print" />
[/java]

8. Shorthand CSS

One feature of CSS is the ability to use shorthand properties and values. Most properties and values have acceptable shorthand alternatives.

Example:

[java]
img {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}

button {
padding: 0 0 0 20px;
}
[/java]

Instead of above we can use shorthand CSS as follows:

[java]
img {
margin: 5px 10px;
}

button {
padding-left: 20px;
}
[/java]

Also:

[java]
.module {
background: #DDDDDD;
color: #FF6600;
}
[/java]

Instead of above we can use shorthand CSS as follows:

[java]
.module {
background:#ddd;
color:#f60;
}
[/java]

9. Minify CSS file size with CSS Compressors

It’s an excellent thought to minify the CSS file to reduce the file size. Through this, you can help browsers to accelerate the stacking of your CSS codes. So you can use a tool like CSS Compressor and Minifier to get this going.

You can minify your CSS here: https://csscompressor.net/

10. Cross-browser compatibility:

When you use an external stylesheet (where we can use browser engine prefix like -moz-, -webkit-, -o- and -ms-) for layout and valid markup (XHTML, HTML5), then your web pages work well on all browsers such as IE, Opera, Chrome, Mozilla, and Safari, etc..

Also following are the prefix description:

[java]
-moz- /* this is use for Firefox browser*/
-webkit- /*this is use for chrome and safari browsers*/
-o- /*this is use for opera browser*/
-ms- /*this is use for Internet Explorer (but not always it’s depends on CSS3 browser support)*/
[/java]

Conclusion:

We have listed out ten best practices which every front-end and back-end developer follows. Also if the beginner level developer follows these guidelines, they will not miss a single point while they are writing the CSS.

This approach is quite practical for both front-end and back-end developers.