A Bit About CSS History

Feb 29, 2020 • ☕️ 3 min read

History is boring, there’s no doubt about that, but learning history is a powerful step to embrace something and being really good at it. Before digging deep in advanced concepts in this book, let me tell you a brief story about CSS history.

A Star Was Born

Fast backwards in 1990 HTML was invented by Berners-Lee to create electronic pages that are displayed on the World Wide Web, each page contains a series of connections to other pages called hyperlinks.

HTML was specifically designed to hold the content of a web page, it needed something else to hold the style and design as a separate concern, something like style sheet which is a collection of style rules that that tells a browser how the various styles are to be applied to the HTML tags to present the document.

CSS (Cascading Style Sheets) was first proposed by Håkon Wium Lie on October 10, 1994 while working with Tim Berners-Lee at CERN and the rest is history. CSS was not the only styling language in development at the time, but the very element of cascading and developing sequence is what set it apart from the rest.

CSS is a domain-specific, declarative programming language; it describes how HTML elements are to be displayed on screen, paper, or in other media; it can control the layout, colors, and fonts of multiple web pages all at once.

html {
  font-family: sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.7;
}

body {
  box-sizing: border-box;
  background-color: white;
  display: block;
  margin: 0;
}

What Make CSS Special

When we write CSS, we don’t tell the browser exactly how to render a page. Instead, we describe the rules for our HTML document one by one and let browsers handle the rendering. CSS followed a predictable and perhaps more importantly, forgiving format and just about anyone could pick it up. That’s a feature, not a bug.

Cascading is the core feature of CSS since its inception, styles can cascade from one style sheet to another, enabling multiple types of CSS sources to be used on one HTML document.

Inline CSS refers to CSS found in an HTML file, found in the head of a document between style tags. Inlining CSS simply means putting your CSS into your HTML file instead of an external CSS file.

Some of the advantages of using CSS are:

  • Easier to maintain and update
  • Greater consistency in design
  • More formatting options
  • Lightweight code
  • Faster download times
  • Search engine optimization benefits
  • Ease of presenting different styles to different viewers
  • Greater accessibility

CSS gives you the opportunity to create sites that look very different from page to page, without a lot of extensive coding.

One of Three Musketeers

CSS is one of the core languages of the open Web and is standardized across Web browsers according to the W3C specification.

CSS along with HTML and JavaScript are three cornerstones of the open web — HTML defines the website structure, CSS gives it look and feel, JavaScript brings interactivity and animations.

The first commercial browser to support CSS was Microsoft’s Internet Explorer 3, which was released in August 1996. The next browser to announce support for CSS was Netscape Navigator, version 4.0. The third browser that ventured into CSS was Opera.

Even though CSS was standardized for ages, browser vendors implement CSS features at their own speeds. That’s why until today CSS might still behaves differently across browsers in some features, sometimes you have to use vendor-specific prefixes to make your website look the same everywhere.

It can seem frustrating when you want to use a feature and discover that it isn’t supported by one major browser, or if things seem to be behaving in different ways.

CSS Over the Years

CSS features are controlled and developed by W3C over the years across multiple specifications.

CSS has various levels and profiles; each level of CSS builds upon the last, typically adding new features and typically denoted as CSS 1, CSS 2, CSS 3, and CSS 4; profiles are mobile devices, printers, and television sets.

CSS1 was published in 1996, CSS2 in 1998, CSS3 in 1999. There is no single, integrated CSS4 specification because the specification has been split into many separate modules which level independently.

The development of CSS hasn’t stopped. Far from it. CSS now has more than 60 modules that define different capabilities, some already part of the standard, some still in development.

Summary

CSS is a declarative programming language allows web designers, developer, bloggers, and so forth to make websites unique and attractive. CSS gives us the opportunity to play with a page layout, adjust colors and fonts, add effects to images, etc.

CSS has been and will continue to dominate the way we decorate websites

Nowadays web developers rarely write vanilla CSS, they often use CSS preprocessors or frameworks to leverage cooked styles and coordinate more efficiently with dynamic data coming from JavaScript.

Reading More

Long-standing CSS Methodologies

The industry darling BEM, the rebellious maverick Atomic CSS, and other incompetent solutions

Bull - queue system for handling distributed jobs and messages in Node

Bull is the fastest, most reliable, Redis-based queue for Node. I have been using it for years to handle async jobs and schedule messages

Client-Side Rendering (CSR)

CSR strategy has very good developer experience but the impact on SEO and user experience still concerned

Should I use a static site generator?

Short answer is yes, long answer is it depends on your content and expectation in terms of performance, SEO, cost, and developer experience