HTML and CSS Basics, part 14: CSS resets and Emmet

This is the fourteenth post in this series of articles.

We’ve covered a very big portion of the basics that you need to least be aware of to code HTML and CSS websites.

While the last couple of articles in this article series were quite long and sometimes very in-depth, this article will be a lot easier to read, and not too long at all.

In this article we’ll be dealing with two important concepts in front-end web development:

• CSS resets
• Emmet

Let’s start!

What lead to the appearance of CSS resets

In the early 2000s, there was a period sometimes referred to as “browser wars”.

It was a time when browser vendors did not really try their best to adhere to the same set of standards in how web pages were to be rendered on the screen.

They were all kind of following most of the web standards, but there were lots of exceptions.

What this boiled down to was that the same piece of JavaScript code would either break in certain browsers, or at least produce unexpected results.

This resulted in verious work arounds such as browser sniffing: detecting what browser a web page was accessed on, so that the web page can be served with conditional code for that browser only. It was kind of a mess.

As far as CSS goes, it had its fair share of issues.

The biggest problem was that the exact same CSS code would render completely differently from one browser to the other.

Through the years, many useful techniques and best practices popped up, such as vendor prefixes for example: a way to make the styles appear the same across different browsers even before these browsers fully support some specific property: value pair in CSS syntax.

People were getting frustrated having to deal with browser inconsistencies, so different libraries started popping up both in CSS and JavaScript world, trying to work around the problem.

One of the best examples of this is jQuery. It’s motto is: write less, do more. It was a real breeze of fresh air, and the most popular JavaScript libraries for a number of years.

On the CSS side, one of the solutions was to use CSS resets: a way to normalize user agent stylesheets across different browsers.

User agent stylesheets

Many junior web developers are not aware of the fact that each browser comes with their own set of stylesheets.

These stylesheets are what you see on the screen if no CSS is applied at all to a web page.

These stylesheets are commonly known as user agent stylesheets.

For example, the default font used by most browsers is Times New Roman.

Rather than describing user agent stylesheets, let’s see them in action.

We’ll do that by removing all the styles from this very website.

Removing styles from codingexercises.com

To remove styles from this very webpage, take these steps.

If the developer tools is not open, press the F12 key to open them

Click on the Sources tab, and make sure that the Page sub-tab is active.

Twirl-open the structure of the site, and locate the css folder. Click the main.css file to open it in the file preview pane.

Click inside this pane and press CTRL A keyboard shortcut to select the whole contents of the file.

Press the DELETE button to remove all the styles.

This is what your developer tools should look like:

And here is what the codingexercises webpage will look like with only the user agent stylesheet applied:

If you are curious about the contents of the user agent stylesheet for Chrome/Chromium, here it is.

That’s all there is to it, it’s just another CSS file.

For the most part, all the major browsers these days have user agent stylesheets that look pretty much the same. But they are not 100% consistent.

Today, this might even seem a bit nitpicky: after all, each different browser is a completely different piece of software, with their own rendering engines, different corporations or insititions backing them, etc.

However, it is important to know that the CSS reset appeared as a solution to a real problem at a specific time when there were more inconsistencies in UA stylesheets than there are today.

However, there are still inconsistencies. If you are building a website and one of the requirements is to have it look identical across different devices and browsers, then using a CSS Reset will be a step in the right direction.

Popular CSS resets

There were many resets around, but a few of them stand out today in 2019:

• Normalize
• Bootstrap’s Reboot
• Eric Meyer’s CSS reset

Should we use CSS resets

The short and simple answer is: most of the time, just use one of the most popular ones, and you should be fine. It’s one of those “set and forget” things.

Emmet

This article is a sort of an interlude in the HTML and CSS basics series of articles.

Contrary to all the other articles in this series, we haven’t really written any code so far in this article.

Before we wrap up this article, let’s use the opportunity to squeeze in another concept: Emmet.

What is Emmet?

Emmet is a way for a web developer to quickly produce some common HTML and CSS code.

For example, if you open a brand new codepen, you’ll initially see that all coding areas are empty:

Initially, we don’t have a web page preview in the preview pane, because we obviously haven’t added any code.

Let’s change that by adding some boilerplate HTML code.

Inside the HTML code area, just type one exclamation mark: !.

This exclamation mark is an example of an Emmet abbreviation.

To quickly add code to our page, we need to expand Emmet abbreviations.

To expand any Emmet abbreviation, we usually just press the TAB key. You need to make sure that the cursor is active and placed just to the immediate right of the abbreviation, without any space characters.

After you’ve pressed the TAB key, here’s the result:

That’s Emmet in a nutshell: you type an abbreviation, you expand it, and just like that, you’ve written a lot more code, a lot faster.

How to use Emmet

Emmet comes built-in with many modern code development tools. We’ve seen that Codepen comes with Emmet by default; many stand-alone code editors have the same functionality.

For example, VS Code, just like Codepen, comes with Emmet out-of-the-box.

Next time when you need boilerplate HTML code added on the fly, just press the ! and that’s it.

Note however that expanding an exclamation mark on Codepen doesn’t make much sense. The reason why is explained here. Long story short, the reason is that Codepen hides the required boilerplate HTML to let us get to coding faster.

Luckily, Emmet comes with a lot more than just the ! abbreviation to expand.

Let’s look at an example.

We’ll expand this expression:

.container>h1{Emmet is great for fast prototyping}+(ul>li*3{item $})+section>(div{some content $})*5

Simply copy-paste the above Emmet expression into a new Codepen, hit the TAB key, and you’ll get the following HTML code:

<div class="container">
  <h1>Emmet is great for fast prototyping</h1>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
  <section>
    <div>some content 1</div>
    <div>some content 2</div>
    <div>some content 3</div>
    <div>some content 4</div>
    <div>some content 5</div>
  </section>
</div>

This is the preview of the web page you’ll get by expanding the above abbreviation:

Let’s have a look at how this Emmet abbreviation got expanded.

How Emmet abbreviations work

The first important bit of Emmet code looks like this:

.container

It will expand into a <div> with class="container".

To add multiple CSS classes on the same element, you just add another . and a class name. For example:

h1.bg-warning.font-family-arial

The above code will expand to this:

<h1 class="bg-warning font-family-arial">

The > in Emmet

The > means “whatever is on the right of this sign will be wrapped by whatever is on the left.

For example:

div>p

The above Emmet abbreviation will expand to:

<div>
    <p></p>
</div>

The {} in Emmet

The {} is a placeholder for text inside an HTML element.

For example, this Emmet abbreviation:

h1{Emmet is great for fast prototyping}

…will expand to this HTML:

<h1>Emmet is great for fast prototyping</h1>

The + in Emmet

The + sign adds another element (the one you specify on the right side of the plus sign). That element will be on the same level as the element(s) that precede the + sign.

Here’s an example:

.container>h1+ul

The above Emmet abbreviation will produce this HTML:

<div class="container">
  <h1></h1>
  <ul></ul>
</div>

The () and * in Emmet

The round brackets in Emmet have a similar use as they do in many actual programming languages: they’re simply used to disambiguate code, i.e to group elements that need to be together.

For example:

.container>h1+(ul>li)*2

The above Emmet abbreviation will result in this HTML structure:

<div class="container">
  <h1></h1>
  <ul>
    <li></li>
  </ul>
  <ul>
    <li></li>
  </ul>
</div>

As we can see in the above Emmet abbreviation, we’ve grouped the ul>li Emmet abbreviation using the () syntax. Next, we used the *2, which means what it looks like: it repeats the grouped ul>li two times.

The $ symbol in Emmet

We’ve come to the last unknown part of our relatively complex Emmet example: the $ sign.

Here’s the Emmet abbreviation example:

section>(div{some content $})*5

Here’s the resulting HTML:

<section>
  <div>some content 1</div>
  <div>some content 2</div>
  <div>some content 3</div>
  <div>some content 4</div>
  <div>some content 5</div>
</section>

Obviously, the $ character will be replaced with numbers, in sequence, based on how many times the * will repeat a grouped abbreviation.

In the next article in the series, we’ll examine HTML components and frontend CSS frameworks: Bootstrap, Bulma, and MDL.