CSS

CSS is the style language for HTML; together they comprise the presentation layer of web applications. The standard usage of CSS is by defining selectors in which you can specify style properties and their desired values.
The following is a simple example of basic CSS:

#menu {
width: 100%;
background-color: ‘black';
color: ‘white';
}

The preceding selector matches an element with its id attribute set to menu and sets multiple style properties to the matching elements. Obviously, there's much more to CSS selectors, including advanced usages, such as matching by class and element, as well as using pseudo-classes. CSS has a specific priority system in which the browsers know how to apply multiple styles that match the same element.

CSS has had many issues compared to modern styling technologies. First, the fact that it styles HTML, a markup language that was built originally to represent textual documents, has made it often extremely difficult to style modern apps with it. A popular example of this is the notorious vertical alignment, which is a somewhat basic need for modern apps, and in early versions of CSS it was certainly difficult to control.

CSS 3 has divided the CSS specification into separate modules, in which each can advance independently. Fortunately, different modules have made productive progress, and even new ones have emerged, such as CSS Variables, Flexbox, and CSS Grid. Those types of advancements have certainly made life easier when styling apps with CSS. Referencing the previous example, the vertical alignment difficulty has become history.

CSS is not yet without problems. The concepts of hierarchy, extensions, and mixins are not yet part of CSS. Therefore, reusability is very much compromised in plain CSS. Consequently, additional technologies have surfaced to assist with such concerns, known as CSS preprocessors, such as SASS, SCSS, and Less. When CSS does introduce built-in support for hierarchy and mixins, along with its CSS variables and calc function, these CSS preprocessors may no longer be needed. Furthermore, there is another popular pattern called CSS in JS. Its basic idea is to treat CSS as actual code: you write it in actual JavaScript and manage it accordingly.

Lastly, CSS specification doesn't instruct general conventions on how to manage selectors to achieve predictable standard, encapsulation, and reuse. For that purpose, several styling architecture styles have emerged, the most popular of which are BEM and SMACSS.

In conclusion, CSS and its ecosystem are extremely rich. However, it still has a long way to go before it becomes a complete off-the-shelf styling solution, or becomes a silver bullet for that matter.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.21.12.140