Hackernoon logoHow To Type HTML & CSS Effectively by@santiago-rodrig

How To Type HTML & CSS Effectively

Author profile picture

@santiago-rodrigSantiago Andrés Rodríguez Márquez

Full-stack Developer, chess amateur, languages geek.

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 
 files to generate 
 files with the Sass preprocessor for CSS.
Also, I’m going to display the same process with 
 files, these are for generating 
 files and are read by the Haml preprocessor for HTML.
Here is an example file called 
 showing the syntax used when working with a 
 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 
 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 
.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 
 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 

!!! 5
-# Use of attributes
%html{:lang => "en"}
    %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"}
    -# Nesting elements and adding classes
      %h1.header__h1 top heading
            %a.header__links link
            %a.header__links link
            %a.header__links link
Second, how to convert the input file to the 
 file that you want.
$ haml example.haml example.html
Lastly, how the result looks.

<!DOCTYPE html>
<html lang='en'>
<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'>
<header class='header'>
<h1 class='header__h1'>top heading</h1>
<ul class='header__ul'>
<a class='header__links'>link</a>
<a class='header__links'>link</a>
<a class='header__links'>link</a>
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!


The Noonification banner

Subscribe to get your daily round-up of top tech stories!