Posts tagged ‘lightning’

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.

See Mike Topalovich Present at Dreamforce 2016

Dreamforce 2016 df16

This will be my 5th year presenting at Dreamforce, and once again I’m excited about the content that I will be delivering. Come check out a session or two if you are interested in any of these topics, you can bookmark them prior to August 30th so that you have them ready to go when the Agenda Builder opens up.

The World is Flat: Design Principles for Salesforce Data Modeling

Getting the data model right is critical for the performance, usability and maintainability of your Salesforce customizations and custom Force.com applications. As you have probably already experienced, the Force.com database is unlike any relational database you may have used in the past, and SOQL is definitely not SQL. Attend this session to learn why Force.com data modeling is important, how to resist the temptation to normalize the data model and instead apply patterns of denormalization, and what patterns and practices can be applied to balance the competing requirements of user experience, analytics, query performance, scalability and operations to design high-performing data models for Salesforce.

Convert SQL Queries into SOQL Queries

SOQL is the query language of the App Cloud. Join us to learn how to translate SQL queries and joins into SOQL queries and joins. This session is intended for Apex developers who are having trouble understanding SOQL syntax.

Get Started with Responsive Apps in the Lightning Framework

Lightning Components, the UI framework with which the Salesforce1 Mobile application was built, is embedded within the Force.com Platform. Lightning Components allow you to rapidly build applications with reusable components using an event-driven architecture. Applications built with Lightning Components can support responsive design, adapting to the user’s device. Join us to learn how to build a simple Lightning application composed of decoupled components and their bundled resources. You should have experience in developing web applications with HTML, CSS, and JavaScript to get the most benefit from this session.

Getting Started with Apex Code for Developers

Do you have Java, C#, or other OOP experience and want to transfer those skills to do some heavy lifting for you on Force.com? Then get hands-on access to Apex Code, the world’s first cloud-computing programming language. We’ll make the transfer easy from what you already know to what you need to know for writing Apex Code.

This one-day pre-conference training course takes place on Monday, October 3.

Hope to see you in San Francisco! If you want to meet up for a beverage, please connect with @topalovich on Twitter.

Mike Topalovich Salesforce Technical Architect in Chicago
Mike Topalovich - Salesforce Certified Force.com Platform Developer I Mike Topalovich - Salesforce Certified Force.com Platform Developer II Mike Topalovich - Salesforce Certified Force.com Developer Mike Topalovich - Salesforce Certified Force.com Advanced Developer
Mike Topalovich - Salesforce Certified Mobile Solutions Architecture Designer Mike Topalovich - Salesforce Certified Force.com Platform App Builder Mike Topalovich - Salesforce Certified Administrator Mike Topalovich - Salesforce Certified Advanced Administrator