1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 Combining CSS

Discussion in 'Styling and Customization Questions' started by Amaury, Jul 24, 2015.

  1. Amaury

    Amaury Well-Known Member

    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:

    Code:
    .larger.textHeading, .xenForm .sectionHeader {
        color: @contentText;
    }
    In the framework I'm working with, whereas in KH-Flare 2015 I have:

    Code:
    .xenForm .sectionHeader {
        color: @secondaryDarker;
    }
    Code:
    .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?
     
  2. Dylan V

    Dylan V Well-Known Member

    Hi,

    When I code, I put all my code by category to find a part quickly and easily. Example:
    Code:
    /* 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:
    Code:
    /* 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.
     

Share This Page