How to Write Cleaner HTML and CSS

HTML, CSS, and JavaScript together make up the visual landscape of the web as we know it. Like the skeleton, skin and muscles come together to help create a functioning human body, these three languages, when combined in an intentional and planned way, create a website.

As front-end Developers, it is our job to utilize these languages creatively and efficiently in order to create the best possible experience for the end users of thunder::tech’s clients. While these languages are fundamental to the web, writing them is a repetitive and time-consuming process.

To help streamline the process of writing these languages, alternative languages called preprocessing languages have been introduced to help developers write code more cleanly and efficiently.

A preprocessing language is a language that converts one language into another. To break it down, a preprocessing language uses a streamlined version of code that outputs a lengthier version of the same code. This saves time for the developer, which offers a more efficient way to write the code.

Further, preprocessing languages offer a host of features that give the developer even more control over how to organize their code. Two preprocessing languages our front-end development team uses at thunder::tech are Sass and Pug (formerly Jade).

Pug is a templating engine for integrating content from a CMS, but we find that it makes a very effective preprocessing language because it offers many of the same features for HTML that Sass does for CSS.

One cool thing you can do with Sass is you can assign something to a variable, such as a color in the below example, and then pass that color to multiple places within your style sheet.

What about Pug? What can it do? The below example demonstrates how you can write a while loop to generate an unordered list in HTML.

For those who aren’t developers and whose heads are starting to spin, no worries, basically this is all black magic witchery. Just know that for a developer, this is a whole new way of doing something they’ve done a thousand times, but way better.

Getting a little deeper down the rabbit hole here, Sass and Pug are tools to help front-end developers create DRY’er, more modular code.

DRY is a principle in development called “Don’t Repeat Yourself,” which focuses on reducing and eliminating duplicated code. Considering that every line of code in software must be maintained, duplication of code then is simply a waste.

Similarly, modular programming is a software design technique that encourages separating functions of a program into individual, reusable pieces, in that each module contains everything necessary to perform a single desired function. Phew!

A simple way of visualizing this can be seen by looking at thunder::tech’s home page:

Each separate color and number is its own unique module. These sections can be reused in other places on the site with different content. Building modular websites removes some of the repetition encountered in development, which promotes DRY development.

In the end, this results in a more flexible, expandable and maintainable website.

So with the understanding that Sass and Pug help to create better code overall, let’s take a look at another example of a feature that both Sass and Pug use called mixins.

Pug to HTML

Sass to CSS

A mixin in both Sass and Pug allows a developer to write named, reusable blocks of code. These blocks of code can be called by their name to be used in different areas. Here’s a simple example. Let’s say you were tasked to write the code for this section of thunder::tech’s home page:

If you were going to write the HTML for this, you’d have to create each one of those services individually. If each one took you a minute to write, it’d take you about 10 minutes to make each service.

But what if you could write it with pug and have it preprocessed into HTML? Maybe the pug would take you two minutes to write, and it would output the HTML for all of the services. That would save you time, and would create shorter, cleaner code.

In the future, if 10 more services were added, you wouldn’t even have to write new code, since the pug can generate it. BOOM!

Impressed? Confused? Convinced you want to learn more? The examples above barely scratch the surface of the capabilities and benefits of Sass and Pug. To dive deeper, check out their documentation pages Sass and Pug.

Have questions for our Front-end team? We’d love to answer them for you. Shoot us a message through our form.