FTW : Fuse + LEss = Win

Huge Huang

to know

massive css issues I met

stale rules

stale rules

original

stale rules

no-longer used

always be overrided

stale rules

find unused selectors

stale rules

dust-me

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

specificity war 


    <div id="web">
        <ul>
            <li class="rule">
                <a href="">hello</a>
            </li>
            <li class="rule">
                <a href="">world</a>
            </li>
        </ul>
    </div>

// how we style <a>

specificity war

specificity war

who wins?

specificity war

no matter who wins

we lose

what we learn

maintenance

is a problem

massive CSS maintenance

is a HUGE problem

Fuse

Ryan loves pie

Fuse

configure modules consisting of static CSS and JS files

twiki : Fuse

how Fuse works

core
core.css
core.js
                    
<module id="core">
    <file type="css" src="path/css/core.css" />
    <file type="js"  src="path/js/core.js" />
</module>
core
base
base.css
base.js
                    
<module id="base">
    <require module="core" />
    <file type="css" src="path/css/base.css" />
    <file type="js"  src="path/js/base.js" />
</module>
base
core.css
core.js
base.css
base.js
                    
<module id="base">
    <require module="core" />
    <file type="css" src="path/css/base.css" />
    <file type="js"  src="path/js/base.js" />
</module>
base
override
core.css
override.css
override.js
                    
<module id="override">
    <require module="base" />
    <exclude type="css" src="path/css/core.css" />
    <file type="css"  src="path/js/override.css" />
    <file type="js"  src="path/js/override.js" />
</module>
override
core.js
base.css
base.js
override.css
override.js
                    
<module id="override">
    <require module="base" />
    <exclude type="css" src="path/css/core.css" />
    <file type="css"  src="path/js/override.css" />
    <file type="js"  src="path/js/override.js" />
</module>

mindset

modulize CSS/JS resources

news search

module

LESS

The dynamic stylesheet language

Leaner CSS official website

LESS

variables 

    
    @LINK_COLOR: #0000de;
    @RESULT_COLOR: #008000;

    a:link {
      color: @LINK_COLOR;
    }

    #web ol li a:link {
      color: @RESULT_COLOR;
    }

    // actually I'd like to use it as a constant

LESS

mixin

a bigger variables. Awesome! 

    
    .rounded-corners (@radius: 5px) {
        border-radius: @radius;
        -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
    }

    // shortcut to add rounded-corner
    #header { .rounded-corners; }
    #footer { .rounded-corners(10px); }

LESS

nested rules 

    
    #header {                               
        h1 {
            font-size: 26px;
            font-weight: bold;
        }
        p { 
            font-size: 12px;
            a { 
                text-decoration: none;
            }
        }
    }

Fuse + LESS

target

write LESS

deploy CSS 

    
// CSS

#web .url {
    font-weight: bold;
}

#web li em {
    color: #008000;
    font-weight: bold;
}
    

    
// LESS : rollup concept

.highlight () { 
    font-weight: bold; 
}

#web {
    li em {
        color: #008000;
        .highlight;
    }
    .url { .highlight; }
}
    

    
.highlight () { 
    font-weight: bold; 
    color: #ff0000;
    // blah blah
}

#web {
    li em {
        color: #008000;
        .highlight;        // applied
    }
    .url { .highlight; }   // applied
}
    

    
// CSS : smelly

#module a { color: #008000; }
#module p { font-size: 1.2em; }
...
.smelly { display: none; } // what the..
...
#module .cl { background-color; silver; }

    

    
// LESS : much easier to see

#module {
    a { color: #008000; }
    p { font-size: 1.2em; }
    ...
    .cl { background-color: silver; }
    ...
}

.smelly { display: none; }

conclusion

syntax ~= DOM tree

conclusion

extend via concept roll-up

conclusion

wrong code looks wrong

reference

END & Q & A

appendix

selector weight

iIce

i I c e (if It can eat !?)

original

selector weight