What you mean with "CSS-in-Js should generate style tags instead of inline styles. "?

Well, this is more a theoretical question. I obliviously can add a className to each of my components but I'm trying to adopt CSS-in-JS best practice in order to use all the goodies of let JS managing my styles and to have a scoped CSS for each component. I really enjoy using inline styles except for the side-effects of having a reduced DOM readability (which is not an user problem anyway, just annoying for the developer) and the unwanted complexity of achieving a :hover :focus (etc..) effect. I'm wondering if a vanilla-approach (without helpers libraries) is still a valid choice...

Thanks Tommy for the answer. Using <div> is a required feature of the project I'm working on and I can't use a semantic <table> approach. Furthermore, I think that using <table> elements I could just avoid a display: table-cell , leaving as it is all the other properties: border: 1px solid #e9e9e9; padding-left: 6px; min-width: 150px; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; vertical-align: middle; Looking how CSS-in-JS libraries works (CSS Modules and StyledComponents for example), I see they are generating a custom class "on demand" when the component is rendered. I'm wondering how I can do that... I'm avoiding the CSS stylesheet in order to avoid the global CSS variables mess. Thanks to Christopher Chedeau and his presentation: https://speakerdeck.com/vjeux/react-css-in-js Regarding the workflow question, this is how I'm currently achieving the :hover effect (which is a huge pain...): // Function to set the :hover state toggleHover = () => { this .setState(prevState => { return { hover: !prevState.hover }; }); }; [...] // Inline CSS applied (I'm extending the main CSS of my header) <div style={{ ...styles.header, color: this .state.hover ? styles.header.activeColor : "" , cursor: this .state.hover ? styles.header.activePointer : "" }} onMouseEnter={ this .toggleHover} onMouseLeave={ this .toggleHover} >