XF 1.4 Combining CSS

[Amaury]

This is something I've never really thought about, but I've become curious.

When and how do you know when you can combine CSS to make it more compact? For example, I was able to change both the section text in preferences (Locale, Options, Notices) and the Share This Page text with:

.larger.textHeading, .xenForm .sectionHeader {
    color: @contentText;
}

In the framework I'm working with, whereas in KH-Flare 2015 I have:

.xenForm .sectionHeader {
    color: @secondaryDarker;
}

.sharePage, .xenForm .sectionHeader {
    color: @secondaryDarker;
}

Is it just a matter of things that will be, for example, using the same color or can only certain things be put together?

 

[Dylan V]

Hi,

When I code, I put all my code by category to find a part quickly and easily. Example:

/* Node list */

.nodeList .categoryStrip .nodeTitle a,
.node .nodeDescription
{
        color: #FFFFFF;
}

If the elements are part of the node list, so I'll combine them, because I don't want to use the same color if I can combine my items and use only once the color code. This applies only if the element is part of the node list, otherwise, if I've another part, I'll do this:

/* Navigation */

.navTabs .navTab.selected .navLink,
.navTabs .navLink:hover
{
        color: #FFFFFF;
}

I could of course combine everything, but because I want that my code is clean, I'll separate my items. It's like I work.