WORA : Write Once Use Everywhere

Hello Bhaiyo and Bhano, Ladies and Gentleman, Boys and Girls.

I hope you have heard about this phrase Necessity is the mother of invention. This phrase is applicable to any new invention in almost every industry.

But in Software industry this phrase Laziness is the father of invention overrides the above one.

Not agree with above statement ?

Let me try to prove that with help of one scenario in Lighting Web Component framework (LWC) and at end of this article you would agree with new phrase.

As a LWC learner/developer you might know about Shadow DOM and how the CSS works for each web component.

I hope you have basic understanding about how CSS works within a particular Component. If not, then please refer below link more better understanding.

With help of above document you got the idea that in order to style each component we would need to write separate CSS for each component. However this restriction gives more power to LWC framework in different context (Will explain in another article)

But as a Lazy developer i have one problem with above restriction because now every time i need to write CSS rule in individual component although some components share same elements and i want to apply same style sheet to all those elements.

For example I use h1 html element in few components and I want that my all components header (h1) must have same CSS definition. So as per new feature I don't need to write h1 style in each component instead i would simply define one lightning web component which will have only one CSS file inside it and will have all common styles which i want to apply for different components.

As you can see I have defined one component which has CSS file inside it. This CSS has style definition for h1 element.

Now i can use this CSS file in any of the component i want with help of below statement.

You need to apply this statement in respective Component's CSS file where you want to apply the defined styles.

I have defined two Components and each of them has h1 element.

I hope you can visualize the output of above component and hope you understood how laziness is father of inventions.

Follow me on Twitter/LinkedIn to get more interesting post/articles about Salesforce and Salesforce and Salesforce.