CSS3 19 - Top 10 CSS Best Practices | CSS top guidelines to follow by every UI designer
Top 10 CSS Best Practices
Readability
Organize the Stylesheet
Combine CSS Elements
Appropriate Naming Convention
Avoid Inline Styling
Use External CSS
Shorthand CSS
Minify CSS file
Cross-browser compatibility
CSS Preprocessors
Readability
Write the CSS code in Proper alignment format.
Don’t write the code in a single line. Break the code line by line.
Example :
Wrong approach:
.example{background:blue;padding:2em;border:1px solid yellow;}
Right approach:
.example{
background:blue;
padding:2em;
border:1px solid yellow;
}
Organize the Stylesheet
Put comment whenever it needs and it should be proper comment.
Generic Element (body, a, p, h1,etc)
.header
.nav
.wrapper
Example
/****** header ******/
styles goes here...
/****** navigation ******/
styles goes here...
/****** main content ******/
styles goes here...
/****** footer ******/
styles go here...
Combine CSS Elements
Reduce code redundancy and write clean.
Easy to follow code and its not messy.
Multiple selectors having the same declaration so we can combine all the selectors in a single declaration rather rewriting the code.
Example
h1, h2, h3 {
font-family: verdana;
color: #e1e1e1;
}
Appropriate Naming Convention
Naming of CSS elements is what they’re, not what they give the impression.
Example
Wrong :
.post-large-font {
}
Right :
.post-title{
}
Avoid Inline Styling
Inline styles are very much messy.
It is difficult to understand.
In future if wants to do some changes then its very difficult to find and do the changes.
Use External CSS
Pull all the CSS in a single external file.
Easier to maintain.
Page Loader Faster.
External CSS file should include in the HTML.
Shorthand CSS
Shorthand CSS means set the values of multiple other CSS properties simultaneously.
You can write more concise style sheets.
Using Shorthand CSS you can save time.
Example :
Wrong
img {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}
button {
padding: 0 0 0 20px;
}
Right
img {
margin: 5px 10px;
}
button {
padding-left: 20px;
}
Minify CSS file
Minify means reduce the file size.
It Removes whitespace, Strip comments and Combines files.
It can help the browsers to accelerate the stacking of your CSS codes.
You can minify your CSS here:
https://csscompressor.net/
Cross-browser Compatibility
Cross-browser Compatibility means a website works in any version of any browser.
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
CSS Pre-processors
CSS preprocessors is a scripting language that extends CSS and get compiled into regular CSS syntax.
CSS preprocessors will add some features that don’t exists in pure CSS.
In CSS preprocessors you can use variables, mixins, functions, nesting selectors, inheritance and so on.
Sass(http://sass-lang.com/)
Less (http://lesscss.org/)