Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What are CSS3 Modules?

Tags:

css

I am not able to understand the concept of modules. What are these modules and how are they different from CSS2? Can anyone explain these modules in a simple better way? And why these modules make CSS3 different from CSS2 ?

like image 552
user2091061 Avatar asked Apr 29 '13 06:04

user2091061


People also ask

What are CSS modules in React?

CSS Modules are "CSS files in which all class names and animation names are scoped locally by default". Instead of having CSS files and classes that are static, CSS Modules creates a dynamic implementation that is locally scoped to the HTML with the help of Webpack or Browserify.

What is modular CSS?

Modular CSS is approach of breaking down webpage styling into smaller independent components that are consistent, reusable and hold on to its visual integrity in any part of the webpage.

Are CSS modules CSS in JS?

And in this point to solve all problems of having global CSS enters the stage CSS Modules. Basically CSS Modules = CSS in JS objects . CSS Modules it is the same as the CSS code structure and all.


3 Answers

CSS level 2 is a monolithic specification. You have a single specification divided into sections, with each section describing a basic component of the CSS formatting model, for example:

  • Selectors
  • Cascading and inheritance
  • The box model
  • Colors and backgrounds
  • Fonts

The definitive CSS level 2 standard is CSS2.1, or CSS level 2 revision 1, which became a recommendation in 2011 following a set of changes to the 1998 standard for enhanced interoperability. The CSS2.1 specification can be found here (with the examples above linking to individual sections).

Post-CSS2 you have modules, which are basically various sections of CSS2 split into their own specifications. The above examples from CSS2 have the following corresponding modules:

  • Selectors
  • Cascading and inheritance
  • The box model
  • Colors and backgrounds (yes, that's one section split into two modules)
  • Fonts

This means you have multiple specifications that all pertain to CSS, each with its own independent development path. This consequently means that different modules can progress toward implementation and standardization at different rates, without having to depend on the rest of CSS as a language (which was the primary cause of CSS2.1 taking so long to become a recommendation following CSS2's standardization). These specifications are collectively known as CSS3, or "CSS level 3", although each goes through levels on its own, making it somewhat of a misnomer.

CSS3 and its modularization system are explained in greater detail in this other answer.

like image 181
BoltClock Avatar answered Nov 15 '22 19:11

BoltClock


CSS Level 2 is "a specification"

CSS Level 3 is "a collection of specifications". Each specification (module) defines a (largely) self-contained set of related features, such as borders and backgrounds.

This allows the various specifications to progress to recommendations without having to wait for everything else.

like image 28
Quentin Avatar answered Nov 15 '22 19:11

Quentin


What is the difference between css2 and css3? nice answer is given at http://webdesign.about.com/od/css3/a/differences-css2-css3.htm CSS3 has been split up into different sections, called modules. Each of these modules is making it's way through the W3C in various stages of the recommendation process. Hope this could help.

like image 26
Sameera Thilakasiri Avatar answered Nov 15 '22 20:11

Sameera Thilakasiri