Writing Clean Code: Start to Bootstrap | Toptal®-欧博体育app下载

authors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.

Tigran Vardanyan

Verified Expert in Engineering

Tigran is an experienced front-end developer with a passion for clean and performant CSS code. He likes to keep it simple and fast.

Expertise

Front-end HTML5 Bootstrap

PREVIOUSLY AT

During my 15 years of experience in web development, I’ve worked with various companies, from enterprise-level to startups, and I’ve worked with many, many fellow software engineers along the way. One of the most common and important problems I’ve came across in my projects has been failure to write clean and easy-to-understand code.

Even the best developers from top-notch companies don’t always follow best practices and write code which can be cleaned and optimized.

The Consequences of Messy and Dirty Code

To quote an old but still relevant blog post discussing clean code principles:

Source code is akin to financial debt. Suppose you want to buy a house to live in. Most people don’t have the financial wherewithal to pay cash for a house, so you take out a mortgage instead. But the mortgage itself is not a great thing to have. It’s a liability. You have to pay interest on your debt every month…

So too in web development. The code has ongoing costs. You have to understand it, you have to maintain it, you have to adapt it to new goals over time. The more code you have, the larger those ongoing costs will be. It’s in our best interest to have as little source code as possible while still being able to accomplish our business goals.

But let’s not dwell on the abstract. This article will cover essential clean code principles, different techniques used to organize code, and how to make it more maintainable, scalable, and easier to debug.

Quality code starts with basic code styling, expanding to best practices when writing large apps in HTML/CSS with many reusable blocks, and we will also discuss naming conventions to create greater implicit readability as well as third-party frameworks and their best practices.

By the time you’re done reading this, you should have a good understanding of the basics of quality code and how to make your HTML and CSS code easier to maintain and extend.

Code Styling Essentials

Let’s start with the basics of good HTML and CSS code: W3C validity, naming conventions, file structure, and so on.

Be mindful of the structure from day one.

If you are going to develop a big app, then you need to take care of the file structure. It can, or rather should, look like this:

Image of the file structure for a big app

Use validators to check your code.

Try to always use HTML and CSS validators.

Bad code:


  
    
    
      Hello world
    
  



  
  



  
    Expand details
  
  All content goes here

p {
  font: 400 inherit/1.125 serif;
}

Good code:


  
  
  
    Hello world
  



  
  
  



  
  Expand details
  All content goes here

p {
  font-weight: 400;
  font-size: inherit;
  line-height: 1.125;
  font-family: serif;
}

Use alternative text on tags for clean code principles validity.

This attribute plays vital role for SEO, search engines, web crawlers, screen readers, etc.

Bad code:

Good code:

Use kebab-case (spinal-case).

For names, try to use kebab-case (spinal-case) and not use camelCase, or under_score. Use under_score only when using BEM, though if you are using Bootstrap, it’s better to keep consistent and go with - as a delimiter.

Bad code:


  H1 title

Good code:


  H1 title

kebab-case is more readable then camelCase and under_score.

Use meaningful names that can be understood by anyone, keep them short.

The names of classes should look like .noun-adjective.

Try to use common names of classes instead of writing content specific names. It makes code more readable

Bad code:

Good code:

Don’t write type attributes for stylesheets and script in HTML5.

They are not required with HTML5, but are required by W3C standards in HTML4/XHTML.

Bad code:

Good code:

Use specific classes when necessary.

Keep the CSS selector more specific and select the elements you need; try not to mention their parents if not necessary. It will allow the code to render faster and remove any managing obstacles in future

Bad code:

section aside h1 span {
  margin-left: 25%;
}

Good code:

.left-offset {
  margin-left: 25%;
}

While applying a class to the targeted element may create more code within HTML, it will allow the code to render faster and will remove any managing obstacles.

Add a class to the parent element if you want to give another style to the same block.

If you need to use the same block but with different styling, try to keep the HTML as untouched as possible. Just add one class to the parent element and apply all new stylings to the children of that class in CSS.

Bad code:


  Same section with another styles
  Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. 
  …




  Same section with another styles
  Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. 
  …

article {
  padding: 10px 15px;
  h1 {
    font-size: 32px;
    color: #ff0000;
  }
}

.another-article {
  padding-bottom: 30px;
  border-bottom: 4px solid #ccc;
}
h1.other-styling-title {
  font-size: 20px;
}

Good code:


  Same section with another styles
  Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. 
  … 




  Same section with another styles
  Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. 
  …

article {
  padding: 10px 15px;
  h1 {
    font-size: 32px;
    color: #ff0000;
  }

  &.other-styling {
    padding-bottom: 30px;
    border-bottom: 4px solid #ccc;
    /* you will have less classes */
    h1 {
      font-size: 20px;
    }
  }
}

Drop units from zero values.

Adding the unit is unnecessary and provides no additional value. There is no difference between 0px, 0em, 0%, or any other zero-value. The units aren’t important because the value is still zero.

Bad code:

 div {
  margin: 20px 0px;
  letter-spacing: 0%;
  padding: 0px 5px;
}

Good code:

div {
  margin: 20px 0;
  letter-spacing: 0;
  padding: 0 5px;
}

Don’t write `border-bottom` in CSS if you can add an `hr` tag.

Use the hr tag instead of writing a new selector and adding border styles in CSS. It makes the code more markup-based, and that’s what we’re going for.

Bad code:

I want this section to have a border.
Lorem ipsum

.border-bottom {
  border-bottom: 1px solid #000;
}

Good code:

I want this section to have a border.

Lorem ipsum
// If necessary change hr variable in bootstrap

Use the A > B selector.

It’s very helpful to use the A > B selector, which applies rules only to direct child(ren), in that case you will not have to reset stylings of all other children which don’t need that styling. For example, it’s very useful when coding nested menus. You will not need to redefine submenu stylings.

Bad code:


  List 1
  List 2
  List 3
    
      Submenu 1
      Submenu 2

ul li {
  list-style-type: none;
}
li ul li {
  /* redefine to default value */
  list-style-type: disc;
}

Good code:


  List 1
  List 2
  List 3
    
      Submenu 1
      Submenu 2

ul > li {
  list-style-type: none;
}

How to Write Clean HTML

Moving on to HTML, the priority will be to ensure a robust and easy to maintain front-end.

Try to have a front-end that is as markup-based as possible.

Make your front-end code markup-based instead of writing too much CSS.

This will will help search engines and make your code more readable, potentially enhancing search rankings and user experience.

Bad code:


  Main text title
  
  Here is image description

Good code:


  Main text title
  
    
    
      Here is image description

Avoid using unnecessary wrappers in HTML.

Try not to use unnecessary wrapper elements in HTML. Having tons tons of

and elements is a thing of the past. Keeping things granular and linear enables you to achieve minimal code (see next point).

Bad code:


  
    
      
        Unnecessary br tags

Good code:


  Unnecessary br tags

Use atomic classes for styling.

Do not use any custom colors or font sizes (if the color or font size is not in the framework, just add your atomic classes). Atomic classes are simple, single-purpose units of styling. Much like inline styles, Atomic styles only apply a single style declaration.

Bad code:

Without using atomic class
Paragraph without atomic class

   Another h1 text
  Paragraph inside div without class

h1 {
  color: red;
}
section > h1 {
  color: blue;
}

Good code:

Without using atomic class
Paragraph without atomic class

   Another h1 text
  Paragraph inside div without class

.text-red {
  color: red;
}
.text-blue {
  color: blue;
}

Try to keep granular and atomic classes, and use them when needed. Your front-end will become more markup-based as a result.

Make use of semantic elements.

Using semantics provides a better structure and makes the code and content easier to read.

Bad code:

Welcome
This is unnecessary br tag.

Good code:

Welcome
This is unnecessary br tag.

Use HTML5 tags.

The new tags give you more expressive freedom and to standardize common elements, which improves the automated processing of documents. Here is a solid list of all elements. I’ve discovered that a lot of developers always use a lot of

and , but first please check here which tags fit logically in your context:

Bad code:

 
  HTML 4 title
  
    Semantics
    are
    important.

Good code:

 
  HTML5 title
  
    Semantics are important.

Bottom line: Learn and use new elements in HTML5. It’s well worth the effort!

CSS: Clean Code and Preprocessors

When it comes to CSS, it’s hard not to start off with some unoriginal, yet sassy advice:

Use a CSS preprocessor.

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS. The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS.

Group your selectors: Use @extend in SASS.

By grouping your selectors, or using @extend in SASS, you should help keep your code DRY (Don’t repeat yourself).

Bad code:

p {
   font-size: 22px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1 {
  font-size: 41px;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Good code:

.font-smoothing {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  font-size: 22px;
  @extend .font-smoothing;
}
h1 {
  font-size: 22px;
  @extend .font-smoothing;
}

Use rem units instead of pixels in CSS.

Use REMs for sizes and spacings, for example font sizes it make based on the font-size of the root element. They also allow you to quickly scale an entire project by changing the root font size (for example at a certain media query/screen size).

You will write less code for responsive views:

Bad code:

p {
  font-size: 22px;
  padding: 10px;
}

@media (max-width: 767px) {
  p {
    font-size: 16px;
    padding: 5px;
  }
}

Good code:

html {
  font-size: 14px;
}
@media (max-width: 767px) {
  html {
    font-size: 12px;
  }
}

p {
  font-size: 1.6rem;
  padding: 1rem;
}

Try to avoid having fixed height or width in CSS.

Try to avoid having fixed height or width in CSS. Heights can be generated by having inner content + paddings and widths can be defined by a grid system (use nested grid if necessary).

Bad code:


  Let's Get In Touch!
  
  Ready to start your next project with us?

#footer {
  height: 130px;
}

Good code:


  Let's Get In Touch!
  
  Ready to start your next project with us?

#footer {
  padding-top: 23px;
  padding-bottom: 47px;
}

Make sure to use the parent item just once in SCSS.

When you’re using a CSS preprocessor, and planning to write styling for any section, make sure to use the parent item in CSS just once, and include all child elements and media queries inside its brackets. This will allow you to find and modify the main parent element easily in one place when making changes in future.

Bad code:

.section-parent-class {
  position: relative;
  h2 {
      color: #ff0;
    }
  header {
    margin: 2rem 1rem;
  }
}

@media (max-width: 767px) {
  .section-parent-class {
    footer {
      padding: .5rem;
    }
  }
}

Good code:

.section-parent-class {
  position: relative;
  h2 {
    color: #ff0;
  }
  header {
    margin: 2rem 1rem;
  }
  
  footer {
    @media (max-width: 767px) {
      padding: .5rem;
    }
  }
}

Think about which elements will be affected before writing a CSS rule.

Always think about which elements will be affected before writing any CSS rule. If your changes won’t be common, then write your rules in a way to affect only a certain element and nothing else.

Bad code:

/* Commonly used class */
.title {
    color: #008000;
}

Good code:

/* Specify it not to affect other titles */
.section-blog .title {
    color: #008000;
}

Try to look for existing CSS rules and variables before writing new ones.

Always look for existing rules that fit the desired styling, both in custom CSS and in the framework. Only if there is nothing adequate, proceed to writing a new one.

This is particularly important when working with big apps.

Bad code:

.jumbotron {
  margin-bottom: 20px;
}

Good code:

// change $jumbotron-padding from _variables.scss
.jumbotron {
  margin-bottom: $jumbotron-padding;
}

Use specific rules.

If the background has one property, we specify that property, But if it has different background properties, we can give it one declaration.

Bad code:

.selector {
  background: #fff;
}

Good code:

.selector {
  /* This way background image will not be overwritten if there is any */
  background-color: #fff;
}

Use shorthand properties and values.

Do your best to use more shorthand properties and values. Using a shorthand property, you can write concise and, more often than not, much more readable style sheets, saving precious time and energy.

Bad code:

img {
  margin-top: 5px;
  margin-right: 10px;
  margin-bottom: 25px;
  margin-left: 10px;
}
button {
  padding: 0 0 0 20px;
}

Good code:

img {
  /* Shorthand style */
  margin: 5px 10px 25px;
}
button {
  /* Don’t play with shorthand too much */
  padding-left: 20px;
}

Use `em` instead of `px` for line height.

Using em and px units gives us flexibility in our designs and the ability to scale elements up and down instead of being stuck with fixed sizes. We can use this flexibility to make our designs easier to adjust during development and more responsive as well as allow browser users to control the overall scale of sites for maximum readability.

Bad code:

p {
  font-size: 12px;
  line-height: 24px;
}

Good code:

p {
  font-size: 12px;
  line-height: 2em; /* or just line-height: 2; */
}

Use Bootstrap classes as much as possible.

While this rule could apply to UI frameworks in general, I am using Bootstrap as an example, because it is the world’s most popular front-end component library.

Bootstrap allows you to use a lot of ready classes, making your work easier. Try to use Bootstrap classes as much as possible, to make more HTML-based markup.

Bad code:


  Lorem ipsum dolor sit amet, ut ius delenit facilisis
  Lorem ipsum dolor sit amet, ut ius delenit facilisis

.first-column,
.second-column {
  width: 25%;
  float: left;
  padding-left: 15px;
  padding-right: 15px;
}
...

Good code:


  Lorem ipsum dolor sit amet, ut ius delenit facilisis
  Lorem ipsum dolor sit amet, ut ius delenit facilisis

Customize your framework properly.

Bootstrap relies on the variables.scss file, which allows you to easily configure and customize your front-end without writing a single line of code. Otherwise, if you are going to manually write all the customizations on your own, you’d be better not to use a framework at all.

Some developers avoid changing variables.scss, thinking they will still be able to upgrade Bootstrap to a new version without much hassle, but it can be a tedious task. Even minor updates require developers to read the changelog, go through all markup and CSS, and migrate to the new version manually.

Bad code:

navbar {
  padding: 20px 10px;
}
.carousel-indicators {
  li {
    width: 6px;
    height: 6px;
    margin-right: 3px;
    margin-left: 3px;
  }
}

Good code:

$navbar-padding-y:      ($spacer / 2) !default;
$navbar-padding-x:      $spacer !default;

$carousel-indicator-width:       30px !default;
$carousel-indicator-height:      3px !default;
$carousel-indicator-spacer:      3px !default;

Don’t overwrite `.container` width.

Try to not overwrite .container’s width. Try using a grid system instead, or just change the container width in _variables.scss. If you need to decrease its width, just use max-width instead of width. In that case, .container from Bootstrap will stay untouched in responsive views.

Bad code:

.container {
  @media (min-width: $screen-lg-min) {
      width: 1300px;
  }
}

Good code:

// change $container-lg from _variables.scss
.container {
  @media (min-width: $screen-lg-min) {
    width: $container-lg;
  }
}

Use Bootstrap 4 classes and write less CSS.

Start using Bootstrap 4, even though it’s in beta. It includes many new classes which will help you create layouts faster, especially Flexbox and spacers.

Bad code:


  Flex item 1
  Flex item 2
  Flex item 3


  Flex item 1
  Flex item 2
  Flex item 3

.flex-ex {
  display: flex;
  > div {
    padding: 2px;
  }
  &.flex-reverse {
    flex-direction: row-reverse;
  }
  li {
   list-style: none;
    padding: .5rem;
  }
}

Good code:

 
  Flex item 1
  Flex item 2
  Flex item 3


  Flex item 1
  Flex item 2
  Flex item 3

Now we can assign classes to an element to remove all borders or some borders.

Bad code:

border-example2 {
  > span {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: .50rem;
    background-color: #e1e1e1;
    border: 1px solid;
      &.border0 {
        border: none;
      }
      &.border-top0 {
        border-top: none;
      }
      &.border-right0 {
        border-right: none;
      }
      &.border-bottom0 {
        border-bottom: none;
      }
      &.border-left0 {
        border-left: none;
      }
    }
}

Good code:

.border-example {
  > span {
    width: 100px;
    height: 100px;
    background-color: #e1e1e1;
    border: 1px solid;
  }
}

Use `.col-sm-X` if `.col-md-X` and `.col-lg-X` have same value for X.

Don’t write .col-md-X and .col-lg-X if .col-sm-X has same value for X. For example, there is no need to write .col-lg-10 because when we write .col-md-10, we automatically include .col-lg-10 in it.

Bad code:

Good code:

Don’t use `.col-xs-12`.

Don’t use .col-xs-12 because if no .col-xs-X is assigned, then it will be .col-xs-12 by default.

Bad code:


  
    
      
        Services
        Lorem ipsum dolor sit amet consectetur.
      
    
    
      
        E-Commerce
        Lorem ipsum dolor sit amet, consectetur adipisicing.

Good code:


  
    Services
    Lorem ipsum dolor sit amet consectetur.
    
      
        E-Commerce
        Lorem ipsum dolor sit amet, consectetur adipisicing.

Don’t use `reset.css`; use `normalize.css` instead.

If you are using Bootstrap, then normalize.css is already included there, no need to include it twice.

Follow guidelines, even if they’re not a best practice.

For the sake of consistency, it’s better to always follow the rules and guidelines you started with (whether they’re about naming, code style, or file structure)

Wrapping Up

I hope you have been able to take away something helpful and that you will think more about writing minimal HTML and CSS code with best practices.

For big companies, it’s quite difficult to maintain big applications when there is messy code. And of course, big companies have the money to pay for good quality. If you follow clean coding principles, you’ll improve your chances of landing a good job. It’s also worth bringing up the freelance aspect: Professionals juggling multiple projects and clients must deliver clean code that can be passed on to other developers in no time.

I hope to expand to more advanced topics in future posts, as I intend to talk about automating the coding process, using Gulp/Grunt tasks, Linters, Editor plugins, tools that generate code, AI tools that write code instead of you, and other related topics.

I hope this has been an interesting and informative read. Good luck in your coding endeavors.

Understanding the basics

What is clean code?
Clean code is code which is easy to read and understand as well as easy for any developer to maintain and modify. It means that assigned names are meaningful but not too long. No parts of code should be repeated, and almost everything should be consistent.
How to write clean code?
“Don’t repeat yourself” (DRY), “abstraction,” and “keep it simple, stupid” (KISS) principles are the most useful best practices in writing clean code. Consistency and readability should be ensured, and style guides and conventions must be followed.

Tigran Vardanyan

Verified Expert in Engineering

Yerevan, Armenia

February 19, 2016

About the author

Tigran is an experienced front-end developer with a passion for clean and performant CSS code. He likes to keep it simple and fast.

authors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.

Expertise

Front-end HTML5 Bootstrap

PREVIOUSLY AT

Hire Tigran

World-class articles, delivered weekly.

Join the Toptal^® community.

Hire a Developer or Apply as a Developer

\n\n\n

Good code:

\n\n

\n\n

\n\n

Use specific classes when necessary.

\n\n

Bad code:

\n\n

section aside h1 span {\n  margin-left: 25%;\n}\n

\n\n

Good code:

\n\n

.left-offset {\n  margin-left: 25%;\n}\n

\n\n

While applying a class to the targeted element may create more code within HTML, it will allow the code to render faster and will remove any managing obstacles.

\n\n

Add a class to the parent element if you want to give another style to the same block.

\n\n

Bad code:

\n\n

\n  Same section with another styles
\n  Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. 
\n  …\n
\n\n\n\n  Same section with another styles
\n  Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. 
\n  …\n
\n

\n\n

article {\n  padding: 10px 15px;\n  h1 {\n    font-size: 32px;\n    color: #ff0000;\n  }\n}\n\n.another-article {\n  padding-bottom: 30px;\n  border-bottom: 4px solid #ccc;\n}\nh1.other-styling-title {\n  font-size: 20px;\n}\n

\n\n

Good code:

\n\n

\n  Same section with another styles
\n  Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. 
\n  … \n
\n\n\n\n  Same section with another styles
\n  Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. 
\n  … \n
\n

\n\n

article {\n  padding: 10px 15px;\n  h1 {\n    font-size: 32px;\n    color: #ff0000;\n  }\n\n  &.other-styling {\n    padding-bottom: 30px;\n    border-bottom: 4px solid #ccc;\n    /* you will have less classes */\n    h1 {\n      font-size: 20px;\n    }\n  }\n}\n

\n\n

Drop units from zero values.

\n\n

Adding the unit is unnecessary and provides no additional value. There is no difference between 0px, 0em, 0%, or any other zero-value. The units aren’t important because the value is still zero.

\n\n

Bad code:

\n\n

 div {\n  margin: 20px 0px;\n  letter-spacing: 0%;\n  padding: 0px 5px;\n}\n

\n\n

Good code:

\n\n

div {\n  margin: 20px 0;\n  letter-spacing: 0;\n  padding: 0 5px;\n}\n

\n\n

Don’t write `border-bottom` in CSS if you can add an `hr` tag.

\n\n

Use the hr tag instead of writing a new selector and adding border styles in CSS. It makes the code more markup-based, and that’s what we’re going for.

\n\n

Bad code:

\n\n

I want this section to have a border.
\nLorem ipsum
\n

\n\n

.border-bottom {\n  border-bottom: 1px solid #000;\n}\n

\n\n

Good code:

\n\n

I want this section to have a border.
\n
\nLorem ipsum
\n// If necessary change hr variable in bootstrap\n

\n\n

Use the A > B selector.

\n\n

Bad code:

\n\n

\n  List 1
\n  List 2
\n  List 3\n    \n      Submenu 1
\n      Submenu 2
\n    
\n  
\n
\n

\n\n

ul li {\n  list-style-type: none;\n}\nli ul li {\n  /* redefine to default value */\n  list-style-type: disc;\n}\n

\n\n

Good code:

\n\n

\n  List 1
\n  List 2
\n  List 3\n    \n      Submenu 1
\n      Submenu 2
\n    
\n  
\n
\n

\n\n

ul > li {\n  list-style-type: none;\n}\n

\n\n

How to Write Clean HTML

\n\n

Moving on to HTML, the priority will be to ensure a robust and easy to maintain front-end.

\n\n

Try to have a front-end that is as markup-based as possible.

\n\n

Make your front-end code markup-based instead of writing too much CSS.

\n\n

This will will help search engines and make your code more readable, potentially enhancing search rankings and user experience.

\n\n

Bad code:

\n\n

\n  Main text title
\n  \n  Here is image description
\n
\n

\n\n

Good code:

\n\n

\n  Main text title
\n  \n    \n    \n      Here is image description\n    
\n  
\n
\n

\n\n

Avoid using unnecessary wrappers in HTML.

\n\n

Try not to use unnecessary wrapper elements in HTML. Having tons tons of

and elements is a thing of the past. Keeping things granular and linear enables you to achieve minimal code (see next point).

\n\n

Bad code:

\n\n

\n  \n    \n      \n        Unnecessary br tags\n      
\n    
\n  
\n
\n

\n\n

Good code:

\n\n

\n  Unnecessary br tags
\n
\n

\n\n

Use atomic classes for styling.

\n\n

Bad code:

\n\n

Without using atomic class
\nParagraph without atomic class
\n\n   Another h1 text
\n  Paragraph inside div without class
\n
\n

\n\n

h1 {\n  color: red;\n}\nsection > h1 {\n  color: blue;\n}\n

\n\n

Good code:

\n\n

Without using atomic class
\nParagraph without atomic class
\n\n   Another h1 text
\n  Paragraph inside div without class
\n
\n

\n\n

.text-red {\n  color: red;\n}\n.text-blue {\n  color: blue;\n}\n

\n\n

Try to keep granular and atomic classes, and use them when needed. Your front-end will become more markup-based as a result.

\n\n

Make use of semantic elements.

\n\n

Using semantics provides a better structure and makes the code and content easier to read.

\n\n

Bad code:

\n\n

Welcome\nThis is unnecessary br tag.\n

\n\n

Good code:

\n\n

Welcome
\nThis is unnecessary br tag.
\n

\n\n

Use HTML5 tags.

\n\n

and , but first please check here which tags fit logically in your context:

\n\n

Bad code:

\n\n

 \n  HTML 4 title
\n  \n    Semantics\n    are\n    important.\n  
\n
\n

\n\n

Good code:

\n\n

 \n  HTML5 title
\n  \n    Semantics are important.\n  
\n
\n

\n\n

Bottom line: Learn and use new elements in HTML5. It’s well worth the effort!

\n\n

CSS: Clean Code and Preprocessors

\n\n

When it comes to CSS, it’s hard not to start off with some unoriginal, yet sassy advice:

\n\n

Use a CSS preprocessor.

\n\n

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

\n\n

Group your selectors: Use @extend in SASS.

\n\n

By grouping your selectors, or using @extend in SASS, you should help keep your code DRY (Don’t repeat yourself).

\n\n

Bad code:

\n\n

p {\n   font-size: 22px;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\nh1 {\n  font-size: 41px;\n  color: #000;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n

\n\n

Good code:

\n\n

.font-smoothing {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\np {\n  font-size: 22px;\n  @extend .font-smoothing;\n}\nh1 {\n  font-size: 22px;\n  @extend .font-smoothing;\n}\n

\n\n

Use rem units instead of pixels in CSS.

\n\n

You will write less code for responsive views:

\n\n

Bad code:

\n\n

p {\n  font-size: 22px;\n  padding: 10px;\n}\n\n@media (max-width: 767px) {\n  p {\n    font-size: 16px;\n    padding: 5px;\n  }\n}\n

\n\n

Good code:

\n\n

html {\n  font-size: 14px;\n}\n@media (max-width: 767px) {\n  html {\n    font-size: 12px;\n  }\n}\n\np {\n  font-size: 1.6rem;\n  padding: 1rem;\n}\n

\n\n

Try to avoid having fixed height or width in CSS.

\n\n

Try to avoid having fixed height or width in CSS. Heights can be generated by having inner content + paddings and widths can be defined by a grid system (use nested grid if necessary).

\n\n

Bad code:

\n\n

\n  Let's Get In Touch!
\n  
\n  Ready to start your next project with us?
\n 
\n

\n\n

#footer {\n  height: 130px;\n}\n

\n\n

Good code:

\n\n

\n  Let's Get In Touch!
\n  
\n  Ready to start your next project with us?
\n
\n

\n\n

#footer {\n  padding-top: 23px;\n  padding-bottom: 47px;\n}\n

\n\n

Make sure to use the parent item just once in SCSS.

\n\n

Bad code:

\n\n

.section-parent-class {\n  position: relative;\n  h2 {\n      color: #ff0;\n    }\n  header {\n    margin: 2rem 1rem;\n  }\n}\n\n@media (max-width: 767px) {\n  .section-parent-class {\n    footer {\n      padding: .5rem;\n    }\n  }\n}\n

\n\n

Good code:

\n\n

.section-parent-class {\n  position: relative;\n  h2 {\n    color: #ff0;\n  }\n  header {\n    margin: 2rem 1rem;\n  }\n  \n  footer {\n    @media (max-width: 767px) {\n      padding: .5rem;\n    }\n  }\n}\n

\n\n

Think about which elements will be affected before writing a CSS rule.

\n\n

Always think about which elements will be affected before writing any CSS rule. If your changes won’t be common, then write your rules in a way to affect only a certain element and nothing else.

\n\n

Bad code:

\n\n

/* Commonly used class */\n.title {\n    color: #008000;\n}\n

\n\n

Good code:

\n\n

/* Specify it not to affect other titles */\n.section-blog .title {\n    color: #008000;\n}\n

\n\n

Try to look for existing CSS rules and variables before writing new ones.

\n\n

Always look for existing rules that fit the desired styling, both in custom CSS and in the framework. Only if there is nothing adequate, proceed to writing a new one.

\n\n

This is particularly important when working with big apps.

\n\n

Bad code:

\n\n

.jumbotron {\n  margin-bottom: 20px;\n}\n

\n\n

Good code:

\n\n

// change $jumbotron-padding from _variables.scss\n.jumbotron {\n  margin-bottom: $jumbotron-padding;\n}\n

\n\n

Use specific rules.

\n\n

If the background has one property, we specify that property, But if it has different background properties, we can give it one declaration.

\n\n

Bad code:

\n\n

.selector {\n  background: #fff;\n}\n

\n\n

Good code:

\n\n

.selector {\n  /* This way background image will not be overwritten if there is any */\n  background-color: #fff;\n}\n

\n\n

Use shorthand properties and values.

\n\n

Do your best to use more shorthand properties and values. Using a shorthand property, you can write concise and, more often than not, much more readable style sheets, saving precious time and energy.

\n\n

Bad code:

\n\n

img {\n  margin-top: 5px;\n  margin-right: 10px;\n  margin-bottom: 25px;\n  margin-left: 10px;\n}\nbutton {\n  padding: 0 0 0 20px;\n}\n

\n\n

Good code:

\n\n

img {\n  /* Shorthand style */\n  margin: 5px 10px 25px;\n}\nbutton {\n  /* Don’t play with shorthand too much */\n  padding-left: 20px;\n}\n

\n\n

Use `em` instead of `px` for line height.

\n\n

Bad code:

\n\n

p {\n  font-size: 12px;\n  line-height: 24px;\n}\n

\n\n

Good code:

\n\n

p {\n  font-size: 12px;\n  line-height: 2em; /* or just line-height: 2; */\n}\n

\n\n

Use Bootstrap classes as much as possible.

\n\n

While this rule could apply to UI frameworks in general, I am using Bootstrap as an example, because it is the world’s most popular front-end component library.

\n\n

Bootstrap allows you to use a lot of ready classes, making your work easier. Try to use Bootstrap classes as much as possible, to make more HTML-based markup.

\n\n

Bad code:

\n\n

\n  Lorem ipsum dolor sit amet, ut ius delenit facilisis
\n  Lorem ipsum dolor sit amet, ut ius delenit facilisis
\n
\n

\n\n

.first-column,\n.second-column {\n  width: 25%;\n  float: left;\n  padding-left: 15px;\n  padding-right: 15px;\n}\n...\n

\n\n

Good code:

\n\n

\n  Lorem ipsum dolor sit amet, ut ius delenit facilisis
\n  Lorem ipsum dolor sit amet, ut ius delenit facilisis
\n
\n

\n\n

Customize your framework properly.

\n\n

Bad code:

\n\n

navbar {\n  padding: 20px 10px;\n}\n.carousel-indicators {\n  li {\n    width: 6px;\n    height: 6px;\n    margin-right: 3px;\n    margin-left: 3px;\n  }\n}\n

\n\n

Good code:

\n\n

$navbar-padding-y:      ($spacer / 2) !default;\n$navbar-padding-x:      $spacer !default;\n\n$carousel-indicator-width:       30px !default;\n$carousel-indicator-height:      3px !default;\n$carousel-indicator-spacer:      3px !default;\n

\n\n

Don’t overwrite `.container` width.

\n\n

Bad code:

\n\n

.container {\n  @media (min-width: $screen-lg-min) {\n      width: 1300px;\n  }\n}\n

\n\n

Good code:

\n\n

// change $container-lg from _variables.scss\n.container {\n  @media (min-width: $screen-lg-min) {\n    width: $container-lg;\n  }\n}\n

\n\n

Use Bootstrap 4 classes and write less CSS.

\n\n

Start using Bootstrap 4, even though it’s in beta. It includes many new classes which will help you create layouts faster, especially Flexbox and spacers.

\n\n

Bad code:

\n\n

\n  Flex item 1
\n  Flex item 2
\n  Flex item 3
\n
\n\n  Flex item 1
\n  Flex item 2
\n  Flex item 3
\n
\n

\n\n

.flex-ex {\n  display: flex;\n  > div {\n    padding: 2px;\n  }\n  &.flex-reverse {\n    flex-direction: row-reverse;\n  }\n  li {\n   list-style: none;\n    padding: .5rem;\n  }\n}\n

\n\n

Good code:

\n\n

 \n  Flex item 1
\n  Flex item 2
\n  Flex item 3
\n
\n\n  Flex item 1
\n  Flex item 2
\n  Flex item 3
\n
\n

\n\n

Now we can assign classes to an element to remove all borders or some borders.

\n\n

Bad code:

\n\n

\n  \n  \n  \n  \n  \n
\n

\n\n

border-example2 {\n  > span {\n    width: 100px;\n    height: 100px;\n    display: inline-block;\n    margin: .50rem;\n    background-color: #e1e1e1;\n    border: 1px solid;\n      &.border0 {\n        border: none;\n      }\n      &.border-top0 {\n        border-top: none;\n      }\n      &.border-right0 {\n        border-right: none;\n      }\n      &.border-bottom0 {\n        border-bottom: none;\n      }\n      &.border-left0 {\n        border-left: none;\n      }\n    }\n}\n

\n\n

Good code:

\n\n

\n  \n  \n  \n  \n  \n
\n

\n\n

.border-example {\n  > span {\n    width: 100px;\n    height: 100px;\n    background-color: #e1e1e1;\n    border: 1px solid;\n  }\n}\n

\n\n

Use `.col-sm-X` if `.col-md-X` and `.col-lg-X` have same value for X.

\n\n

Bad code:

\n\n

\n  
\n  
\n
\n

\n\n

Good code:

\n\n

\n  
\n  
\n
\n

\n\n

Don’t use `.col-xs-12`.

\n\n

Don’t use .col-xs-12 because if no .col-xs-X is assigned, then it will be .col-xs-12 by default.

\n\n

Bad code:

\n\n

\n  \n    \n      \n        Services
\n        Lorem ipsum dolor sit amet consectetur.
\n      
\n    
\n    \n      \n        E-Commerce
\n        Lorem ipsum dolor sit amet, consectetur adipisicing.
\n      
\n    
\n  
\n
 \n

\n\n

Good code:

\n\n

\n  \n    Services
\n    Lorem ipsum dolor sit amet consectetur.
\n    \n      \n        E-Commerce
\n        Lorem ipsum dolor sit amet, consectetur adipisicing.
\n      
\n    
\n  
\n
 \n

\n\n

Don’t use `reset.css`; use `normalize.css` instead.

\n\n

If you are using Bootstrap, then normalize.css is already included there, no need to include it twice.

\n\n

Follow guidelines, even if they’re not a best practice.

\n\n

For the sake of consistency, it’s better to always follow the rules and guidelines you started with (whether they’re about naming, code style, or file structure)

\n\n

Wrapping Up

\n\n

I hope you have been able to take away something helpful and that you will think more about writing minimal HTML and CSS code with best practices.

\n\n

I hope this has been an interesting and informative read. Good luck in your coding endeavors.

\n","as":"div","isContentFit":true,"sharingWidget":{"url":"http://ktdv.4dian8.com/front-end/frontend-clean-code-guide","title":"Writing Clean Code: Start to Bootstrap","text":null,"providers":["linkedin","twitter","facebook"],"gaCategory":null,"domain":{"name":"developers","title":"Engineering","vertical":{"name":"developers","title":"Developers","publicUrl":"http://ktdv.4dian8.com/developers"},"publicUrl":"http://ktdv.4dian8.com/developers/blog"},"hashtags":"CleanCode,CSS,HTML5"}}

ByTigran Vardanyan

Expertise

The Consequences of Messy and Dirty Code

Code Styling Essentials

Be mindful of the structure from day one.

Use validators to check your code.

Hello world

Hello world

Use alternative text on tags for clean code principles validity.

Use kebab-case (spinal-case).

H1 title

H1 title

Use meaningful names that can be understood by anyone, keep them short.

Don’t write type attributes for stylesheets and script in HTML5.

Use specific classes when necessary.

Add a class to the parent element if you want to give another style to the same block.

Same section with another styles

Same section with another styles

Same section with another styles

Same section with another styles

Drop units from zero values.

Don’t write border-bottom in CSS if you can add an hr tag.

Use the A > B selector.

How to Write Clean HTML

Try to have a front-end that is as markup-based as possible.

Main text title

Avoid using unnecessary wrappers in HTML.

Use atomic classes for styling.

Without using atomic class

Another h1 text

Without using atomic class

Another h1 text

Make use of semantic elements.

Welcome

Use HTML5 tags.

HTML5 title

CSS: Clean Code and Preprocessors

Use a CSS preprocessor.

Group your selectors: Use @extend in SASS.

Use rem units instead of pixels in CSS.

Try to avoid having fixed height or width in CSS.

Make sure to use the parent item just once in SCSS.

Think about which elements will be affected before writing a CSS rule.

Try to look for existing CSS rules and variables before writing new ones.

Use specific rules.

Use shorthand properties and values.

Use em instead of px for line height.

Use Bootstrap classes as much as possible.

Customize your framework properly.

Don’t overwrite .container width.

Use Bootstrap 4 classes and write less CSS.

Use .col-sm-X if .col-md-X and .col-lg-X have same value for X.

Don’t use .col-xs-12.

Services

Lorem ipsum dolor sit amet consectetur.

E-Commerce

Services

Lorem ipsum dolor sit amet consectetur.

E-Commerce

Don’t use reset.css; use normalize.css instead.

Follow guidelines, even if they’re not a best practice.

Wrapping Up

Further Reading on the Toptal Blog:

Understanding the basics

What is clean code?

How to write clean code?

Tags

About the author

Expertise

Toptal Developers

Use specific classes when necessary.

Add a class to the parent element if you want to give another style to the same block.

Same section with another styles

Same section with another styles

Same section with another styles

Same section with another styles

Drop units from zero values.

Don’t write border-bottom in CSS if you can add an hr tag.

Use the A > B selector.

How to Write Clean HTML

Tigran Vardanyan

Don’t write `border-bottom` in CSS if you can add an `hr` tag.

Use `em` instead of `px` for line height.

Don’t overwrite `.container` width.

Use `.col-sm-X` if `.col-md-X` and `.col-lg-X` have same value for X.

Don’t use `.col-xs-12`.

Don’t use `reset.css`; use `normalize.css` instead.

Don’t write `border-bottom` in CSS if you can add an `hr` tag.

Use `em` instead of `px` for line height.

Don’t overwrite `.container` width.

Use `.col-sm-X` if `.col-md-X` and `.col-lg-X` have same value for X.

Don’t use `.col-xs-12`.

Don’t use `reset.css`; use `normalize.css` instead.