Componentizing the Kibana UI, part 1: CSS that Scales
Blog post from Elastic
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.
No tracked trend matches for this post yet.
Use this post, company, and trend context to find content marketing opportunities, perform competitive analysis, or address product feature gaps via the Plushcap MCP server or the Plushcap API.