Basically, CSS is a language structure that describes the style of some HTML file (can also be used for XML), defining how it should be displayed. This structure allows developers to manage the behavior on one or multiple web pages; any change performed on some CSS element will be reflected in all HTML elements linked to it.

CSS is based on rules. These rules are defined on .css files, called style sheet. Style sheets can be composed of one or more rules, applied to one HTML or XML document; the rule has two parts: selector and declaration:

h4 { color : red}

We were reviewing some of the most basic CSS concepts, just to refresh our knowledge about the syntax and elements that compose a style sheet. In the real world, a style sheet could have more than 20 classes belonging to one HTML page; in extreme cases, these classes could be one hundred or more. In these cases, maybe you will find CSS syntax very primitive, not auto-explanatory, and incomplete in some cases. It's hard to implement inheritance on big systems and over time, it could become hard to maintain.
You can apply different approaches in order to write better CSS code, you can define different classes for each web page and then import them on one single CSS file, or maybe you could define parent classes and apply inheritance to child elements, but, in both cases, you will need to deal with maintainability problems.

It's just for the reason...

In the previous section, we learned how to use a CSS preprocessor and how to compile this SASS/LESS code into pure CSS to be interpreted by the browser. Note that each time you make a change, you will need to recompile the entire file, which means that you will need to type the same command and do the same task one, two, and several times. Yes, it's really boring. Fortunately, we have task automation tools. What does that mean? Some other tool will do the dirty job for us.

Gulp is an open source JavaScript-based task runner, which uses code-over-configuration approach to define its tasks. These could be the following:

• Bundling and minifying libraries and style sheets
• Refreshing...

We are ready to start writing our first HTML elements and add style to the application. There are common elements that can be repeated in more than one application: tables, grids, input tags, select, and so on. We can define our own, but you should keep in mind that all of these elements need to be standardized, and defining it from zero can become a difficult task. Today, we have many HTML libraries and templates to start developing our view layer and add custom behavior to satisfy our own needs. Let's explore the three most used HTML, JS, and CSS libraries.

Bootstrap is one of the most popular and complete frontend libraries. It is composed of HTML templates, predefined CSS classes...

As we said in the last section, Material Design is not a library. However, many libraries are based on Material philosophy, so we will choose Materialize CSS. Their components look very natural, and the best part is that Aurelia has its own implementation of this library called Aurelia-Materialize, which will facilitate us a lot in the development process and integration.

Let's open our created FIFA World Cup application and set the Terminal into the root folder; then we need to install some dependencies. Execute the following commands in the next order:

• $ au install jquery
• $ au install tslib
• $ au install materialize-amd
• $ au install aurelia-materialize-bridge

In our index.html file, lets include the Material Design icons to be imported into our project:

In this chapter, we learned how to style our Aurelia application using CSS. Also, we explored the two most popular CSS preprocessors—LESS and SASS. We saw how these preprocessors help us develop more powerful style sheets using variables and extensions.

We explored how to automate tasks using Gulp. Gulp is used by the Aurelia CLI to execute all the tasks related to it.

Lastly, we went through different CSS Frameworks and explored and configured Google's Material Design Framework. We used Material Design to create our example application and take advantage of the most common UI elements.

In the next chapter, we will see how to apply testing in our code by adopting Test-Driven-Development in our development process. Keep reading!