Why Does it Matter if I Use a Space Between .THIS and a CSS Class Name in the Lightning Component Bundle Style Resource?

One of the things that I have struggled to adequately explain to students in the DEV601 (Programming Lightning Components) course is the difference between using a space between .THIS and a CSS class name or omitting the whitespace after .THIS completely.

I thought this was a Lightning quirk, but it’s actually basic CSS syntax. While this may be obvious to anyone with a deep CSS background, it has never been inherently obvious to me even with ~20 years of CSS exposure.

For example:

.THIS.myTestClass1 {
    
    text-align: center;
    
}

.THIS .myTestClass2 {

    font-weight: bold;

}

We know from the documentation that .THIS.myClass1 will apply the styling properties only to top-level tags containing a reference to myClass1 within the markup of that particular component. We also know that .THIS .myClass2 will be applied to any tag that contains a reference to myClass2 within a component.

Why is this?

The answer is simple…if you understand what is happening with the underlying CSS.

The first thing we have to understand is that when the Lightning Component Framework is bootstrapped and the app.css external style sheet is compiled, any reference to .THIS that is found within a Style resource in a component bundle is replaced by a base CSS class name that is the full descriptor of the component – i.e. namespace:componentName – with the colon character stripped out.

For example, any reference to .THIS in the Style resource for c:MyComponent will be represented as .cMyComponent in the CSS style sheet that gets compiled by the framework.

Here’s where things get interesting…

Within the HTML that gets generated by the framework, any top-level tag (i.e. a tag that is a direct child of aura:component) that has a class attribute defined will have the base CSS class for the component appended to the values of the class attribute.

For example, if we have the following top-level div tag in c:MyComponent:

<aura:component>

<div class="myClass1">

...

</div>

</aura:component>

The same div tag will be rendered like this in the HTML output:


<div class="myClass1 cMyComponent">

Whereas if we have the following markup in our component:



<div class="myClass1">

<div class="myClass2">

     ...

     </div>


</div>


The child div tag will be rendered like this in the HTML output:



<div class="myClass2">

So here’s where the spacing between .THIS and class names come into play and the key piece of information that I was missing all this time…

When a CSS rule set is defined with a space in between two classes (e.g. .THIS and .myClass2), it becomes what is called a descendent selector.

A descendent selector will apply the styling properties to any matching elements within the ancestry of a containing element, regardless of whether the element is a direct child or if other elements are between the child and the containing element.

This applies not only to class names, but also to element selectors like p or div. For example:


.THIS p {font-weight: bold;}

Learn more about descendent selectors (and CSS combinators in general) here: http://www.w3schools.com/css/css_combinators.asp

Now when we don’t include a space in between .THIS and a class or element name, the styling contained within the rule set only applies to HTML elements where the class attribute references both CSS classes.

So again, if we have .THIS.myClass1 defined in the Style resource for c:MyComponent, the styling will only be applied to HTML elements where both the myClass1 and cMyComponent values are defined in the class attribute for that element.

And as we saw in the examples above, top level HTML elements that have class attributes defined will have the base CSS class of the component appended.

So the “why” behind the no-space styling being applied to top-level tags is because when two (or more) selectors are combined without whitespacing, both (or all) of the classes must be defined as values of the class attribute on the HTML element for the styling to be applied.

Learn more about combining class selectors here: https://css-tricks.com/multiple-class-id-selectors/

Again, this may be a “well, duh” revelation for some, but I’m always digging for the “why” behind everything, and this was an important discovery for me as I strive for mastery of the platform. It will change the way I explain this to DEV601 students.

Mike Topalovich
Hi, I’m Mike. I help companies like yours do business in new ways with Salesforce.

I am a freelance Salesforce Developer, Architect, and CTO as well as a part time instructor for Salesforce University.

Connect with me today to discuss how I can become a part of your team on an ongoing retainer basis.
Mike Topalovich on EmailMike Topalovich on FlickrMike Topalovich on LinkedinMike Topalovich on RssMike Topalovich on Twitter

Leave a Reply