A Quick Overview of the Awesome LESS.js (via nettutsplus)

Less.js Will Obsolete CSS

decodering:

It’s a tool I wanted to use myself, and even though SASS already existed I didn’t feel like using a different syntax to CSS—I wanted something to augment CSS and make it more powerful, while still retaining the same look and feel. That’s exactly what LESS does. It extends CSS with things like variables, nested rules, mixins and operations to name a few.

Hi-res

What does width: 100% mean in CSS

Efficiently Rendering CSS

selectors are read, right to left.

ul > li a[title="home"] /* a[title="home"] processed first, key selector*/

ID’s most efficient, Universal least

#main-navigation {   }      /* ID (Fastest) */
body.home #page-wrap {   }  /* ID */
.main-navigation {   }      /* Class */
ul li a.current {   }       /* Class *
ul {   }                    /* Tag */
ul li a {  }                /* Tag */
* {   }                     /* Universal (Slowest) */
#content [title='home']     /* Universal */

don’t tag qualify

• ID’s are already unique
• don’t tag qualify classes if possible. only tag qualify if class can be used on multiple elements for different uses

descendant selectors slowest

html body ul li a {  }

review why you wrote the selector. consider …

#main-navigation li a { font-family: Georgia, Serif; }

font-family cascades so, for increased efficiency use …

#main-navigation { font-family: Georgia, Serif; }

CSS3 and efficiency

CSS3 selectors more browser intensive.

Free CSS Drop-Down Menu Framework

decodering:

Modular, with themes. Not only HTML is separated from CSS, but even CSS definitions are categorized into structural and thematic types. Thus creating a new css drop-down menu means creating only a new theme since structure is permanent.

(demo demo demo)

Object-Oriented CSS: What, How, and Why

main principles:

• separate structure from skin - separate layout styling from design styling (eg. using Grid System)
• separate container from content - container should be able to accept any content - no need h3 on top followed by <ul>

Advantages:

• CSS reusable
• easier to change design

usually objects have a <header> and <footer> but is optional

start with top-level styles then structure of page

body { ... }
a { ... }
ul { ... }

#container { ... }
    #container > header { ... }
        #container > header li { ... }
    #container > footer { ... }

then start with class selectors. notice no element name prefixed to class styles. facilitate reusability - eg. can use .post in a div or other element. also don’t add heights and widths (separate structure from skin). didn’t style h2 as headers shld look similar on entire site. extended classes, eg. .post.ext or .postExt

.post { ... }
    .post > header { ... } 

Don’t lock down your selectors; you never know when you’ll want those styles!

if a style can be independent, let it be, don’t lock it down to require say a div as a parent. refactor when necessary

main steps:

• determine object
• set reset, base elements, and base object styles
• apply classes to objects and components for look and feel