Difference between .THIS.mycustomclass versus .THIS .mycustomclass?

In Lightning Components, the .THIS attribute refers to the component itself. This is important to remember. In this example, let’s say that the component is called “MyComponent”.

Using a space between attributes indicates a descendant selector. To use your example, this means the style will apply to all elements with the second attribute that are inside an element with the first attribute. In other words, this styling

.THIS .mycustomclass {
    //css styling
}

will apply to all elements with the .mycustomclass attribute that are inside the component (because the .THIS attribute refers to the component).

If you remove the space, then the style will only apply to elements that have both the first and the second attribute. So this styling

.THIS.mycustomclass {
    //css styling
}

will only apply to elements that have both the .THIS and .mycustomclass attributes. This only applies to top-level elements, because the Lightning Component Framework turns this:

<aura:component>
<div class="mycustomclass"> // <-- Top-level element
    ...
</div>
</aura:component>

into this:

<div class="cMyComponent mycustomclass">

 .THIS.mycustomclass ===>there is no space in the selector as this rule is for top-level elements.
.THIS .mycustomclass ===>element is not a top-level element