When you are implementing CSS, then
you must do it the right way, it should be readable, clean, reusable, and
simple.
As mentioned, there are some rules for writing
clean CSS that you should try your best to avoid breaking.
In this article I will share some good
practices or rules to write clean CSS, if I forgot some please share your
suggestion in comment section.
1. DRY
DRY stands for "Don't Repeat
Yourself". This is a general software development principle and can be
applied in any programming language, as well as in CSS.
Bad practice:
.success-button {
background: green;
color: white;
border-radius: 5px;
padding: 10px 20px;
text-align: center;
font-size: 16px;
}
.cancel-button {
background: red;
color: white;
border-radius: 5px;
padding: 10px 20px;
text-align: center;
font-size: 16px;
}
Good practice:
.button {
color: white;
border-radius: 5px;
padding: 10px 20px;
text-align: center;
font-size: 16px;
}
.cancel-button {
background: red;
}
.success-button {
background: green;
}
Note: avoid creating duplicate CSS
classes first verify common CSS rules are available for your new requirement.
2. Naming
Avoid conflicting class names, in page
specific CSS if you write conflicting names your page specific CSS may override
existing common template CSS
Bad:
.table .p
{
/* CSS rules */
}Good practice:
.sub-table //(specific subscriber table css)
{
/* CSS rules */
}
.table-border //(common table border css for all template or all website pages )
{
/* CSS rules */
}
3. Don't Use
Inline-Styles
Well, there are arguments it can be
useful in some cases, but for better readability and code maintenance avoid it.
Avoid:
<div style="font-size: 16px;
color: red;">Xyz Text</div>
4. Avoid the !important
tag
The! important tag has the highest
specificity of all CSS selectors, always using !important to make CSS working
not suggested.
Better understand order of execution
of CSS styles and apply rules with proper selectors, otherwise soon our project
code will be full of! important tags, which makes your CSS code much harder to
maintain.
Note: The only way to override an
important tag is to use another important tag.
5. Avoid complete
code copy paste
Please avoid complete copy paste CSS
from third party components, complete copy pest impacts existing UI recommended
to customize required code only.
6.
Page/controller specific CSS
a. Don't use HTML elements as
selectors in page/control/partial control specific CSS, html or DOM elements
higher-specificity selectors (these types of CSS is applied in common file)
//BAD reason CSS
rules applicable for all website not for specific page or control
table {
/* CSS rules */
}//Recommended or
good practice
.sub-table //subscriber table rules specific to control
{
/* CSS rules */
}
b. Avoid conflicting class selector in
control specific CSS
Bad: These common
and conflicting CSS class name might be available in common CSS
.table-title {
/* CSS rules */
}Suggested or good
practice:
.sub-table-title {
/* CSS rules */
}
c. Use proper CSS combinator selector
to apply CSS for specific element
example: id and element combination(#id.elment) i.e #subTable.div
element and class combination
(elment.class) div.sub-table
7. Comments
Add readable and meaningful comments
when necessary or required only, reason good CSS doesn't need comments reason it
should already be clear and self-descriptive.
Bad:
// Comments for all classes
.example-class {
/* CSS rules */
}Good or
recommended: (add comments to logical code section or common control)
//User control comment
.use-class-one {
/* CSS rules */
} .use-class-two {
/* CSS rules */
}
8. Shorthand CSS
Shorthand properties are CSS
properties that let you set the values of multiple other CSS properties
simultaneously.
Using a shorthand property, you can
save time and energy.
Bad practice
/*normal css*/
img {
margin-top: 5px;
margin-right: 4px;
margin-bottom: 5px;
margin-left: 4px;
}
Good practice
/*shorthand CSS as follows*/
img {
margin: 5px 4px;
}
9. Minify CSS
file size with CSS Compressors
Minifying a CSS file implies the
removal of unnecessary characters in the source code to reduce the file size
and facilitate faster loading of the site
Following are
some tools to compress CSS file
- CSS Minify
- Topcoat
- Code Beautifier
- CSS Nano
- csscompressor.net
- cssminifie.com
Note: Minified file is saved with “.
min.css” extension for example xyzsite.min.css
10. Create
cross-Browser Compatible CSS
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.
Some browser
prefix descriptions
- -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)*/
Code snippet
.stop-break-out-long-text {
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
/* for IE browser*/
-ms-word-break: break-all;
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
/* This is for Firefox browser */
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}