February 03, 2017

Inline css in modern apps

While modern framework communities are push forward in using inline css, innovated by one of the react developer react-css-in-js.

As Vjeux have presented in his deck the problems that they faced using css while they are working on react projects.
css problems

Since then internet was boomed about working on inline css, thats when the birth of most popular plugins:
Comparison of CSS in JS Libraries for React
One of the coolest feature that inline css offer is the ability to recompute your styles at runtime, and styles does not exists when not required.

where there is a solution, there will be a problem in computer science, using inline css you do not get full features of css, such as hover, pseudo styles, such as :active, :active + sibling etc... thought some plugins already solve this yet another problem using inline css is slower than external css, imaging you when you have 10000 rows in a table and each TD in contains each inline styles, loading of your html will be a problem.

When you open up your console and now you realised you have hard time debugging it, lots of css on your DOM, and usually we search elements by class name.

My conclusion is that I will definitely stay with SASS for a while with some nice name convention concept like SuitCss or BEM