I have been using and improving CSS in a production environment for a long time, and unfortunately, I no longer like to use it now, so come to a formal farewell.
CSS is designed to style documents, not program interfaces. Anyone who tries to use CSS on a large scale knows that in order to write good styles, there are a lot of restrictions and rules that need to be added before using CSS. This is very frustrating and I am not happy.
The CSS selector is the main problem we need to face. It is like a variable that can be changed globally. Because of the working mechanism of the selector, it is very difficult to know if the removal of a piece of css is successful. And so far there is no way to write a convinced selector scope. Of course, you can use BEM, CSS modules and some other methods, but these depend on additional tools and methods and never represent the future of CSS.
Many people have already discussed how to write styles for Web App. I think this is the one that best suits my thoughts:REACT: CSS in JS - NationJS
Recall the problem you encountered, this is a list of issues I encountered while writing css:
- No local variables
- No public constants
- Implicit dependency
- Lack of useless code cleanup
- No instruction compression merge
- No unified solution
- No environmental isolation
The way css evolves now doesn't change anything.
Use CSS-in-JS until we have a better solution
At the same time, because CSS-in-JS solves some of the problems we encounter and becomes more and more popular, it provides us with the following advantages:
- Generate minimal and used CSS
- Get better running performance
- Support for static and dynamic styles
- Assisted prerendering key styles
But until the bottom layer is still CSS (just like React will eventually use DOM), just like we compile from one language to another.
When relying on good abstraction capabilities, you can write code like css (no selector), this is the Yoga project. This project is used in React-Native and some other engines. Yoga is just an example, you can find similar projects, such as flex (Yoga implementation in Reason )
In addition to the above advantages, using this solution has the following advantages:
- CSS subset API is simple and more expressive
- Support RTL layout
- It's easy to pre-render key CSS (if your build target is a web platform)
- Style static type check♥️
"If you still don't know how to use CSS"
It’s like saying
If you are smart, use is good for you.
Before saying this, please confirm:
- The project you develop does not require long-term maintenance
- You have more than 1000 css selectors in a project
Using CSS in a small project may be OK, but it is not suitable for medium and large projects. Please read the CSS-in-JS solution carefully until you agree with it, if you disagree...🙃
Give up cssnext
For the above reasons, I will use CSS directly when writing simple HTML.
I firmly believe that CSS will become a low-level instruction, and various solutions will be compiled into CSS, so css will not have any big development, and may even be discarded.
That's why today I gave up cssnext
What will I do next?
I have done some work around the React ecosystem these days, and I am very happy with the React Native StyleSheet API (this API also works on the web)
(If you ask me "media query and pseudo-elements?" I don't need these, I think media query is not good enough)
Now I use the RN StyleSheet API in Reason and bs-react-native, they give me a strong type static check. No need to debug for low-level errors.
I am also looking forward to react-native-dom.
This article is written for the author of the cssnext project, explaining why he gave up the cssnext project.