Technology Deep-Dive: The CSS Edition
As Trey mentioned in Dusting off Open Source CU, we want Open Source CU to serve as a platform for discussing technology trends and sharing code in addition to more strategic discussions. We’re passionate about our craft and spend significant time and effort exploring the (near) future of web and mobile development. Over time we’ll present this research within the context of building high-quality member experience and show how these pieces fit together, but we also want to engage those who are building the next generation of banking.
In this post our focus is on some of the changes happening in the world of CSS. Here are some articles we found interesting:
The End of Global CSS CSS React Webpack
Organizing CSS becomes more difficult as the size of the user interface increases, and this seems like an interesting way to reduce the complexity, particularly when combined with React (we’ll be talking more about React in the future).
Solved by Flexbox CSS Flexbox
Layout in CSS is painful but important, particularly to support multiple screen sizes. We’ve used grid systems like those provided by Bootstrap and Neat (in addition to some custom solutions), but they’re still constrained by the limitations of CSS and require significant amounts of work. Flexbox is the solution to this problem and it’s becoming more widely available (including its use in React Native). We’re not able to use it in production yet (thanks, IE), but we’re able to use it in prototypes and look forward to the day when controlling layout via CSS is straightforward.
This site shows how to solve common layout challenges using Flexbox.
PostCSS CSS Build Tools
The most popular PostCSS plugin is Autoprefixer, and if you’re going to use newer CSS then it’s a huge time-saver. From the “Solved by Flexbox” site referenced above:
If you’re writing Flexbox code and not using autoprefixer, well, you’re making a horrible mistake.
Last night was the first time I used it, but so far I’m impressed.
Related articles you may find interesting: