Our great sponsors
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
IMHO, combining multiple styles with Styled-Components mixins is less elegant and not as easy as specifying multiple classes per single element (see issue on GitHub as reference).
When I was writing the WhatsApp-Clone I used a different approach to overcome the problems mentioned above. Instead of creating a dedicated component for each styled element, I used a container that has all the CSS rules with private classes. By private classes I mean, classes which start with an underscore (e.g. _my-class). This way I’m less likely to collide globally defined CSS rules:
The source code is available on GitHub, or it can be downloaded via NPM (or Yarn):