- Make use of Bootstrap classes Don’t create new custom classes if you can achieve something using Bootstrap class. Try to extract styling that is provided by bootstrap from custom class.
Eg: For example this custom class is not required at all. (eg: .service)
.service {
font-weight: bold;
color: red
}
Correct way to do this:
<div class="font-weight-bold text-danger"></div>
-
Class names should follow abstract naming convention so classes can be reused. Instead of
.FromPrice
use.price
. -
Choose a name for the class that makes some sense.
Instead ofcont01
name itcontainer
.- Don’t add numbers to class name unless it’s a requirement.
-
Remove trailing whitespace
-
Do not style element in reference to many parents unneccesarily. Eg: Not recommended:
.container > .card > .card-body > ul > li
Recommended:ul > li
-
When quoting attributes values, use double quotation marks.
-
Use proper indentation
-
Make use of icons libraries like
font-awesome
or any other of your choice. Don’t use single (.png) images for icons like (Dahboard, User, Email). Always use icons from icon libraries unless in edge cases. -
Make sure that closing tags are matched.
-
For reusable components, make use of PUG Framework, It will save a lot of time & duplication.
-
Make use of GIT which will make it easier to track files changed.