Previous postNext post

CSS in real life

CSS in real life

Ever since the introduction of React, styling has been a contentious topic. Since then, a variety of solutions have appeared and finally the community has begun to gravitate towards certain practices that hide some of the technical complexity. In our styling session with Artem Sapegin and Artem Zakharchenko, we got a taste of what’s to come.

Artem Sapegin  —  Custom CSS is the path to inconsistent UI#

Sketch notes by [David Leuliette](https://davidl.fr)

Sketch notes by David Leuliette

How much CSS should developers write? If adding a new feature forces you to write new CSS, are you doing it right? It’s easy to end up with a codebase that duplicates similar CSS for slightly different purposes. For this reason, even a simple application can end up having multiple different concepts for the same idea.

Artem Sapegin’s talk shows how custom CSS is the path to an inconsistent UI and how to approach this problem by using primitive components that are then used to compose UIs.

Although it will take time to develop the primitives, you’ll gain consistency through composition and end up writing less CSS as the specific details are hidden away behind neat APIs.

Artem Zakharchenko  —  Creating layouts that last#

Sketch notes by [David Leuliette](https://davidl.fr)

Sketch notes by David Leuliette

When writing layouts, you often have to think on a rather low level. You might end up setting up a CSS grid and then figuring out how to transition from a layout to another using media queries.

What if layouts were a first class citizen instead? It’s this idea that Artem Zakharchenko explores in his talk about creating layouts that last.

Conclusion#

I like the fact that the discussion about styling in React is shifting more to the level of practices. You can apply design tokens and primitive components to hide the details and your styling solution.

As shown by Artem Zakharchenko’s talk, it’s possible to rethink the way we layout our views by composing them differently and relying on new standards underneath.

Sponsors of 2019#

🥇Gold Sponsors#

🥈Silver Sponsors#

🥉Bronze Sponsors#

Become a sponsor

Partners#