270 reads

How To Type HTML & CSS Effectively

by Santiago Andrés Rodríguez MárquezNovember 25th, 2019

Too Long; Didn't Read

Preprocessors are tools that make you avoid repetition and achieve more. In this article, I’ll show examples of how to use the Sass preprocessor for CSS with the Haml preprocessor. The result that you wanted is the same that if you worked directly in the process of writing HTML & CSS, but done in less time and avoiding repetition. The main ideas are summarized as the following ones. There are better ways to write.html and.css files. Go and find your favorite preprocessor and use Sass.

Company Mentioned

featured image - How To Type HTML & CSS Effectively

I wouldn’t like to carry out the same long and boring known task after somebody told me that there is a better and shorter way of doing the same.

I’ve done some projects until today’s sun, so I know something about working with old HTML & CSS.

Writing HTML & CSS is a task that I categorize as long and boring, and most web developers will categorize this task the same.

There is a remedy for this problem, preprocessors, these are tools that make you avoid repetition and achieve more.

How does a preprocessor manages to do this task? You need to work on different files, these files are read by the preprocessor and converted into the files that you want at the end.

In this article, I’ll show examples of how to use

.scss

files to generate

.css

files with the Sass preprocessor for CSS.

Also, I’m going to display the same process with

.haml

files, these are for generating

.html

files and are read by the Haml preprocessor for HTML.

Here is an example file called

example.scss

showing the syntax used when working with a

.scss

file, this file is specific to the Sass CSS preprocessor.


// Defining variables
$normal_text_medium: 1.2rem;
$dark_text: #2F2D2C;
$geek_green: #8EDE61;
$green_border: 3px solid $geek_green;
$background_grey: #676C65;
$flex-align-items: (sta: flex-start, end: flex-end, cen: center, str: stretch, bas: baseline);

// Iterating over mappings
@each $key, $value in $flex-align-items {
  .f-a-i-#{$key} {
    flex-align-items: $value;
  }
}

// Nesting selectors
.header {
  nav {
    background-color: $background_grey;
  }
}

// Using placeholder classes
%heading-geek {
  border-left: $green_border;
}

// Extending other classes
.header__h1 {
  @extend %heading-geek;
  color: $dark_text;
}

// Pseudoclasses and media queries inside one rule
.header__links {
  color: $dark_text;
  text-decoration: none;
  &:hover {
    color: $geek_green;
    background-color: $background_grey;
  }
  @media (min-width: 768px) {
    font-size: $normal_text_medium;
  }
}

Accepting such an exchange means you’ll be more productive and will adhere to the DRY principle. When you are done, go to your terminal and translate the files. Below is the way you’ll do this with Sass.

$ sass example.scss example.css

What do you get after doing the later activities? The

.html

.css

file that you are used to! Usually with more lines and characters that the files read by the preprocessor.

Here is the output provided by the Sass preprocessor of the file

example.scss

.f-a-i-sta {
  flex-align-items: flex-start; }

.f-a-i-end {
  flex-align-items: flex-end; }

.f-a-i-cen {
  flex-align-items: center; }

.f-a-i-str {
  flex-align-items: stretch; }

.f-a-i-bas {
  flex-align-items: baseline; }

.header nav {
  background-color: #676C65; }

.header__h1 {
  border-left: 3px solid #8EDE61; }

.header__h1 {
  color: #2F2D2C; }

.header__links {
  color: #2F2D2C;
  text-decoration: none; }
  .header__links:hover {
    color: #8EDE61;
    background-color: #676C65; }
  @media (min-width: 768px) {
    .header__links {
      font-size: 1.2rem; } }

The result that you wanted is the same that if you worked directly in the

.html

.css

file, but done in less time, and avoiding repetition.

I’ve been showing only CSS preprocessor examples. Essentially, there is no difference if you do this instead with an HTML preprocessor.

I’ll repeat the same steps using the Haml preprocessor.

First, the input file

example.haml


!!! 5
-# Use of attributes
%html{:lang => "en"}
  %head
    %meta{:charset => "utf-8"}
    %meta{:name => "viewport", :content => "width=device-width,initial-scale=1"}
    %meta{"http-equiv" => "X-UA-Compatible", :content => "ie=edge"}
    %meta{:name => "author", :content => "santiago-rodrig"}
    -# Specifying content
    %title Haml example
    %link{:rel => "stylesheet", :href => "css/main.css"}
  %body
    -# Nesting elements and adding classes
    %header.header
      %h1.header__h1 top heading
      %nav
        %ul.header__ul
          %li
            %a.header__links link
          %li
            %a.header__links link
          %li
            %a.header__links link

Second, how to convert the input file to the

example.html

file that you want.

$ haml example.haml example.html

Lastly, how the result looks.


<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta content='width=device-width,initial-scale=1' name='viewport'>
<meta content='ie=edge' http-equiv='X-UA-Compatible'>
<meta content='santiago-rodrig' name='author'>
<title>Haml example</title>
<link href='css/main.css' rel='stylesheet'>
</head>
<body>
<header class='header'>
<h1 class='header__h1'>top heading</h1>
<nav>
<ul class='header__ul'>
<li>
<a class='header__links'>link</a>
</li>
<li>
<a class='header__links'>link</a>
</li>
<li>
<a class='header__links'>link</a>
</li>
</ul>
</nav>
</header>
</body>
</html>

What do you think? You are more productive now! I’m sure you’ll never go back to plain old HTML & CSS (but of course you should be already familiar with both).

The main ideas are summarized as the following ones.

1. There are better ways to write .html and .css files.
2. Preprocessors do the job, go and find your favorite.
3. You can be more productive if you learn how to use effective tools!

I’ll leave here links of my online profile for sites like Github and LinkedIn. If you want to talk about something related to the field of web development there you reach me. Happy coding!