Structured CSS via @import and pre-processor

[gasolin]

for case like https://github.com/mozilla-b2g/Gaia-UI-Building-Blocks/blob/v2/style/headers.css

ex:

headers.css

/* headers.css */
@import url("headers/layout.css");
@import url("headers/layout_mobile.css");
@import url("headers/layout_tablet.css");

The PROS:

• clean structured
• follow CSS standard
• developer does not have to include extra styles if we support more form factors

The CONS:

• will introduce performance issue in production

Fortunately we can fix it by use pre-processor to detect @import statement and inline the css files in production.

There are some script like https://github.com/simme/rework-importer can interpret and inline all @import css into single file.

With pre-processor, the basic css file will be inlined to single header.css file

/* headers.css */
headers {
}
/* mobile style */
headers .mobile {
}
/* tablet style */
@media (min-width: 768px) and (orientation: portrait) {
  headers {
  }
}

And we can pass some conditions for production mode, for example: pass mobile type to the build system, pre-processor could pick layout.css and layout_mobile.css but ignore layout_tablet.css, generate an inline header.css.

The PROS:

• previous PROS
• reduce size
• better performance by move out unnecessary styles

The CONS:

• need enhance the pre-processor to make it possible

@rnowm does this proposal reasonable or useful for Building-Blocks?

[rnowm]

@gasolin that's definitely something we should start using!
BTW: could it be possible when copying the BB to each app on build time do something like:
https://github.com/giakki/uncss
That would remove not used BB styles per app :)

[gasolin]

@rnowm uncss sounds interesting for remove per app unused styles. It's another topic(but related to pre-processor) so I'd like to create a separate issue to track it.

[gasolin]

requests can be fulfilled with https://github.com/gasolin/provecss

see imprt testcases https://github.com/gasolin/provecss/tree/master/test/features