on tailwinds (and others)

[thien-do]

Web Styling (Draft)

• CSS
  • Convention: SMACSS, BEM, OOCSS
  • Framework: Bootstrap, Foundation, Bulma, Tachyons
  • Generator: Tailwinds
  • Shadow DOM
• CSS-in-JS
  • Run-time: Styled Components, Emotion
  • No run-time: Linaria, Astroturf
• CSS preprocessing
  • SASS, Less
  • PostCSS
  • CSS Modules, CSS Blocks, Stylable
  • Vue's single file components

document.tags.H1.fontSize = "20pt";

IDO dream

• Modular
• Dynamic
• Performant
• CSS capatibilities
• Tooling
• Customisation

CSS is not designed to be a programming language

• Because of component-based, actually

  • Global, dependency (or lack of), cascade, silient break

• Portability

  • http://bradfrost.com/blog/post/managing-technology-agnostic-design-systems/

• Dev exp

  • Scoping is good
    • Dead code elimination
    • Unexpected consequences
    • Knowing end results
    • Class name collisions and specificity wars
  • Sharing between JS and CSS
    • https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue
  • Enforcement over convention
  • Tooling support
    • Auto prefixing
    • Additional tools vs dedicated tools (think linting)
  • Entry bar
    • Abstraction

• User exp

  • Performance
    • Initial load vs Run-time cost

https://jxnblk.com/blog/why-you-should-learn-css-in-js/
https://mxstbr.com/thoughts/css-in-js/
https://noti.st/brucelawson/5O0d81#sQH4abT
https://csswizardry.com/2014/10/the-specificity-graph/
https://css-tricks.com/the-fragmented-but-evolving-state-of-css-in-js/
https://css-tricks.com/bridging-the-gap-between-css-and-javascript-css-modules-postcss-and-the-future-of-css/
https://css-tricks.com/the-differing-perspectives-on-css-in-js/
https://css-tricks.com/the-many-ways-to-include-css-in-javascript-applications/