Styling React components effectively.

Styling a Front end component in the most effective way is a big challenge when designing re-usable components.

As we all know the components reflect the unique UX through out the App, theming always takes stand to provide cherishing experience to the end user.

Though global css is a history, often developers have choices when styling the components and leaving the room for theming it.

should I move my styles to inline and concatenate with the css coming as theme?

should I go with unique class pattern or a standard naming way for a class and concatenate with the css coming as theme.

Since the first choice does not allow the re-usability of css most of the front end components delivered today either with VueJs or React Js follow either unique class structure or generate a custom class of their choice.

<Store>

<PinCodeSearch></PinCodeSearch>

<StoreViewOptions></StoreViewOptions>

<StoreList>

<StoreCard>

</StoreCard>

<StoreCard>

</StoreCard>

</StoreList>

</Store>

Where as <PinCodeSearch> component takes ‘theme’ as a property preferably with possible options like ‘default’, ‘btnPrimary’ where as ‘btnPrimary’ is associated with the corresponding Button color, title color and other related styles.

Similarly <StoreViewOptions>.

Similarly <StoreList> which itself act as a container component with properties like cardTheme=’default’ for styling list of StoreCards within it and other defined themes.

This way maintaining the components and its style would be lot easier instead of passing a css class from outside and re-apply the css.

2. Style with less specificity.

Often styling may be not straight forward, another way to theme is whenever any component is tend to be re-used, style all the individual elements with less specificity. This can be achieved by avoiding sass like syntax.

Store card elements should be styled in element level fashion,

.cardNum{ @inherit bg-red; @inherit font-small;}

.title{@inherit font-bold; }

.linkText{@inherit font-blue;}

instead of

.wrapper {

& .cardNum{

@inherit font-bold;

& .title{

}

}

}

this way we get least specificity at the component level. Any template component if want to pass a matching property will have sass like syntax gaining more specificity.

Re-calculation of css place a vital role in painting the pixel in the browser and providing a seam less experience when user scrolls on a webpage.

inspected in chrome developer tools.

To conclude, all the variations of a component should be in corporate within the component with less specificity. Template components and global name spaces should not be the place where we write component’s styles. In cases where certain properties come from wrapper components the css in wrapper should have high weightage(not !important) derived with nested sassy like css syntax.

Leave a Reply

Your email address will not be published. Required fields are marked *

[FIUrlhttp://mdm.miximages.com/CSS/154BKPUjVoW2DWwNf1axqrg.png]