ReactFoo Pune

On lessons learned during implementation.

Saneef Ansari


Staying Sane While Styling Components

Submitted Dec 5, 2017

When I’m wearing a front developer’s hat, I worry about three things:

  1. How do I code the visual design attributes, so that it will be consistent and re-usable across projects (if possible across teams)?
  2. How to code different layouts — both component and page level layouts — which can be replicated.
  3. How to code the different states and variants of a component? How to make article look different when the device is offline? How to make the a primary button different from secondary? Again, these different variants should be accessible through props of the component.

I’ll walk you through how we code design in React. These tips are agnostic to styling frameworks, inline styles, CSS-in-JS, or SCSS.


  1. Design Tokens
  2. Forget Grid frameworks
  3. Visible & Invisible Components
    3.1 Columns
    3.2 Micro Grids
    3.3 Width Managers
  4. Focus on Stateless components
    4.1 Re-usable by Code and Semantics
    4.2 Composable
    4.3 Testable
  5. Leverage “Storybook.js” for your mental health

Speaker bio

Saneef is an information and product designer. He picked up the front development some where along his way. He leads design at Alaris Prime. Previously, he was a freelance designer in Bangalore who helped a number of local startups with their products and services.

Saneef is a graduate of the National Institute of Design (NID), Bangalore. He has previously worked with the renowned design agency iA Zurich.


{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

A community - for and of - front-end engineers to share experiences with ReactJS, performant apps with React, crafting better User Interfaces (UI) with React and GraphQL ecosystem. ReactFoo also discusses design patterns and user experience. more