LElewisl9029·Oct 19, 2017Recommendation phrase
Congrats on shipping the 2nd Beta!
My favorite part of Bootstrap 4 is actually its newly included CSS reset Reboot [0]. It's built on Normalize, but also provides a set of very compelling improvements like making use of the native font stack, a bunch of very sensible spacing and layout adjustments, and built-in optimizations for touch responsiveness (removing the 300ms delay). I'm definitely going to be trying it out on my next project regardless of whether or not it uses Bootstrap itself.
With that said, I don't mean to rain on the parade, but I've been gradually deviating away from using CSS frameworks for my projects, not because I don't _want_ to use them, but rather because most CSS frameworks don't seem to mix naturally with component-oriented CSS-in-JS libraries like glamorous [1], which is my preferred way to work with styling the
Read the rest
se days.
If I do include a CSS framework, I end up having to use a mix of custom component-scoped styles and global CSS classes from these frameworks, and those CSS classes may have margins and cascading effects that reach into children. This breaks component-level style isolation, and makes the styling of children much harder to reason about, which defeats much of the purpose of using component-oriented CSS to begin with.
What I really want to do is to import styles from a well designed CSS framework _as a JS module_ (but I'm willing to accept anything that's properly namespaced and isolated, like CSS Modules), and compose them with my own styles without worrying about a polluted global namespace or styles from parents reaching into children/vice versa or fighting with specificity issues.
So far, I haven't found any CSS frameworks that fit the bill, but Tachyons [2] seems like it could be close enough (by emphasizing modular, low specificity, shallowly cascading styles) that I could maybe just run it through a CSS to JS compiler like native-css [3] and import its classes and compose them as I would with any other JS style object. This is something I'm going to experiment with soon enough, but I'd love to hear if others have any thoughts/experiences they'd like to share on using CSS frameworks with component-oriented CSS.
[0] https://getbootstrap.com/docs/4.0/content/reboot/
[1] https://glamorous.rocks/
[2] http://tachyons.io/
[3] https://github.com/raphamorim/native-css