Artem Sapegin

CSS is a great language and has improved a lot in the past decade but it still has the same global nature as in its early days. CSS was designed to style documents, and that often causes issues in large scale applications. Naming conventions, like BEM, CSS Modules and later CSS in JS significantly improved the maintainability of styles, but we can go one step further. Using components to create responsive Flexbox and Grid layouts can simplify code, improve developer experience and it feels natural in React.

In this talk we’ll explore how to create any kind of page layout with just three generic components: Box, Flex and Stack.

2019

React Boston

Say Hello to Box, Flex and Stack: Layouts in the Component Era

Custom CSS is the simplest way to make the UI inconsistent, especially if we’re talking about spacing between UI elements, font sizes or colors. When developers have too much freedom in defining the UI, they will do things differently. 

The issue could be solved by avoiding any custom CSS on the app level and having a set of primitive components that allow developers to glue UI together in a consistent way.

React Finland

Custom CSS is the path to inconsistent UI

2018

Custom CSS is the Path to Inconsistent UI

Custom CSS is the simplest way to make the UI inconsistent, especially if we’re talking about spacing between UI elements, font sizes or colors. When developers have too much freedom in defining the UI, they will do things differently. The issue could be solved by avoiding any custom CSS on the app level and having a set of base components that allow developers to glue UI together in a consistent way. 