CSS In Lightning Components

I have to recognise that there is a long time since I wrote my last CSS. So maybe, there are things that have surprised me but that you already have used out of Lightning. Anyway, I am about to remark a couple of points that, for me, make a difference between CSS in Lightning and CSS for a regular web. There is much more stuff to tell, so most probably I will write at least another article regarding CSS in Lightning.

Cross browser compatibility.

Each browser has its own rules for CSS, and so, create a CSS that make your web look and behave the same in each browser can be complicated.

But this is something you do not need to worry about when creating CSS for Lighting. You will never have to remember what works here or there and what was the trick for this the webkit I need to add to make it works. Salesforce will do the hard work and ensure your CSS looks the same in every browser.

Selector .THIS

Having custom CSS styles for several Lightning components on the same page could be a problem. Because of that, Salesforce adds a new class to every first level label. But only if you define a style for your components. In this way, you will not have to worry about modifying a different component or think long class names to differentiate classes between components.  This new class name is just c+yourComponentName. In case you add a style for a component called “thisCssComponent” your labels will look like this.

The rest will work as usual in CSS

But there are, at least, a couple of things more called my attention regarding CSS in Lightning. So, most probably I will write another post. I hope you found this post interesting.

Thanks for reading!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.