A few months ago we had the opportunity to create a new product from scratch at YPlan and we wanted to do it in the right way. Our aim was to craft beautiful UI components which we could easily extend and reuse across the application.

Atomic CSS

Last February, we attended an interesting talk about Atomic CSS by Richard Bray at FEL (the best Front End meetup in London).

Atomic CSS is a method of writing CSS where a class defines a single property. The result is a CSS file in which every declaration appears only once.

Our first reaction…

Let’s start with the following tweet with which I couldn’t agree more:

It looks like there’s a war between CSS and inline styles people but it’s not true: everyone just wants to make their job better day after day. React, in particular, has always been communicated in a very strong way (either you accept it or not) and inline styles are not an exception.

Some weeks ago I shared a survey to compare how developers felt about inline styles the first the time they heard about them versus how they feel about them today, on a scale from one…

At YPlan, we care a lot about the quality of our products.
We move fast (and break things, of course) and we want to make sure that our users are always happy.

Apart from working with love everyday, one thing we can do to achieve our goal is to write a good number of tests. The component-based nature of React comes handy in this process because components are easy to test.

The tools we decided to use to test our components are Jest, which we love because it mocks every dependencies by default, and the TestUtils, a set of utilities…

Michele Bertoli

Front End Engineer at Facebook

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store