Web development started with the HTML marking language. It is used to build web pages, creating the different sections and presenting the information. That is its purpose. But through the years and without proper support for styling how that information is presented, web pages used well-known tricks such as tables. Almost all web pages were built with tables to display the information in the desired areas.
CSS means cascading style sheets. It is a language to style the information presented with HTML. The first versions did not have cross-browser support, and web pages were still built using tables. It was not until version 2 that we have a good language for style sheets, and tables were being abandoned in favor of CSS styles (finally!). CSS3 set a good foundation, and many technologies showed to make styling easier.
Each browser sets its own style defaults that need to be handled so the web site looks the same everywhere.
This originated the creation of a simple style sheet that resets the styles for the browser it is being loaded from, so styles can be safely created from scratch.
CSS is a simple language that offers its feature-set for plain files that can be called from an HTML page. This was designed for simple web sites, but once the project grows up, styles can become a mess. CSS pre-processors try to solve that problem.
Sass is a language that lets the developer organize the styles using variables and nesting, and modularizing them among several files. It even has partials support, so we can insert chunks of code in others, being these chunks in dedicated files. Mixins is also a killer-feature: it consists of features that can be reused in multiple styles. It is intended for those styles that are reused in several places.
Besides the code structure, a tool was needed to improve presenting information. Yes, CSS3 killed HTML tables, but there was a need for something that could make it even easier.
A CSS grid allows to divide the page in rows and columns, so we can have cells to fill in. It basically provides the same functionality as HTML tables, but with more control, and of course cleaner. They are intended for rapid prototyping, although they can be used in production without any problem.
I remember using the 960 grid system, which sets the width to 960 pixels, and divides it by 12 or 16 columns. Very handy. There were many alternatives to this tool, but they all do basically the same thing.
The next natural step is… yes! bring more features! Tools get improved and other new tools learn from others errors to design a better solution from scratch.
A CSS framework provides a grid system, a reset stylesheet, typographies, icons, and a full set of pre-designed utilities (buttons, form elements, menus, modal windows, and so on).
It also has to impose the mobile-first approach, so design has to be applied to the smallest screen, and then it improves for bigger ones. This also derives a responsive behavior, so when the window is being resized, the design has to adapt in real time.
During the first versions it was used for very simple tasks. But since Gmail and Google maps were launched, it gained an amazing popularity. Ajax was a killer-feature: you could make a request to the server and receive the response in the background, so you had complete control. The user perceived it like a native application.
With jQuery you can build those cool and useful Ajax requests very easily, as well as deal with the DOM very efficiently. It has become an indispensable tool.
Backbone, Ember and Google’s Angular constitute the classic frameworks. But there are other approaches like Facebook’s React, which focuses to the user interface only, using a virtual DOM to abstract the real one and make development easier.
Depending on the backend programming language being used, we may use an HTML template so the code looks more structured and clearer.
For Ruby projects, it is very common to use Haml, that removes many distracting elements from HTML and provides an indented structure. You may like it and use it, or use plain HTML with embedded Ruby (called ERB).
I like Slim. It is very similar to Haml but it looks nicer to me.
Frontend web development is not simple anymore. Almost all web sites use any of these technologies (or even all of them!). It is important to try as many tools as we can to choose the ones we feel more comfortable with.
Which of these technologies do you usually use?