Skip to content

Instantly share code, notes, and snippets.

@izshreyansh
Last active April 2, 2021 10:39
Show Gist options
  • Save izshreyansh/724208173165c985e619969325d89cac to your computer and use it in GitHub Desktop.
Save izshreyansh/724208173165c985e619969325d89cac to your computer and use it in GitHub Desktop.
HTML Recommendation

HTML Preferences

  • 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 of cont01 name it container.

    • 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment