|
|
|
|
|
|
by wolfgang42
3484 days ago
|
|
|
This isn't specifically to do with Styletron, but I'm wondering: what is the use case for building arbitrary CSS from JavaScript? I've never written an app where this seemed necessary; the most I've ever needed is some semantic classes to apply, like this: .request-pending {background-color: $yellow;}
.request-acknowledged {background-color: $green;}
It seems like mixing the actual styles in with the JS violates separation of concerns and clutters up the actual logic. |
|
|
* For one people using React already have there "html" (jsx) in their javascript. This is not necessarily a bad thing.
* Many people use React with a library called redux, which is a very simple state-container. They then break up their application into components and containers. The data in the redux store is one giant tree that contains the entire application's state. Sections of the state are connected to the containers, which have various components inside of them. These components are generally just a function of the properties that they are initialized with. All the business logic happens in redux, and all the presentational logic happens in the components, with the containers in the middle passing the data.
* Components are meant to be isolated, composable, reusable, and easily testable. As a result people began using css-modules so that the names of the style classes could be isolated per component and not pollute the global namespace. This is enough for most projects.
* CSS in JS is particularly useful when you are building a library of components that are meant to imported individually and/or used together. When building a library with the following goals:
1. Have a lot of quality components that are deeply customizable view various properties without having to directly override the style, but still allow styles to be overridden
2. Isolate the components and their styles from each other so that you don't have to import the entire library to use 1 component.
3. Make it easy to import and use them in your project.
CSS Modules would fit, except that they make importing the components much more difficult for the end user. They basically would need a webpack config and loader to import the styles. That or they would have to link the css on their own.
As a result you had libraries like Material-UI use inline styles for the entire library. This has its own disadvantages. Not all CSS properties are available inline, computing the styles on every render can be slower than having normal CSS, and it looks kind of sloppy when you see the end result. As a result people are creating or improving alternatives to inline styles such as Glamor, JSS, Styletron, and aphrodite.