'We had 90% unused CSS because everybody was afraid to touch the old stuff'

Excerpts from JS Party podcast:

Kend C. Dodds mentioned that many developers often choose to copy code when using traditional CSS because they are not sure whether the modification is safe. In a PayPal project, 90% of CSS code is unused because no one dares to modify the old code easily. This is not because the developer lacks CSS skills, it may also be because CSS itself has flaws.

Emma Bostain points out that this is the key to solutions like CSS-in-JS (such as styled-components). They encapsulate style logic inside components, avoid code conflicts and make it easier to add, delete, and modify styles.

Dodds agrees that these tools are created to solve this problem.

Many large companies have similar problems: a large number of developers, frequent employee turnover, which makes no one know which CSS code is being used.

That's why Dodds sometimes likes component-based style solutions (although he's not keen on complex tools or JavaScript syntax). The key lies in the tight coupling of styles and components, and developers are no longer afraid of modifying styles. Not all projects require this approach, but if your front-end architecture is already based on components (an excellent front-end architecture without JavaScript), then this style is perfect.

Based on this, Dodds is excited that "scope styles" make a comeback in standardization discussions.

He recalled an ancient idea (probably briefly appeared in the browser): add style blocks directly in HTML, and styles only act on the parent element. This idea is great and he hopes to be realized again.

However, new solutions (such as Miriam's original proposal) are more cleverer than this basic concept, such as being able to set lower and upper boundaries, thus achieving scope of "ring" styles in the DOM (the term proposed by Nicole Sullivan). Regardless of the end result, the scope style without Shadow DOM and zero tool will make a lot of sense.

The above is the detailed content of 'We had 90% unused CSS because everybody was afraid to touch the old stuff'. For more information, please follow other related articles on the PHP Chinese website!