Company
Date Published
Author
CJ Cenizal
Word count
1123
Language
-
Hacker News points
None

Summary

The Kibana team addresses the challenge of writing scalable CSS by adopting a component-based approach, using classes and the BEM naming convention to create predictable and readable markup. By constructing user interfaces from components like buttons and panels, the team simplifies CSS, making it easier to maintain and avoiding complex selector dependencies that can lead to errors. The use of single-class selectors helps clarify the relationship between elements and reduces the risk of unintentional style changes. To manage CSS inheritance issues, the team applies inherited properties only to "leaf" nodes that do not contain child elements. This structured approach is designed to improve both the readability of markup and the efficiency of UI development. The blog post is part of a series that will continue with a focus on writing JavaScript with React for component reusability and composability.