Jiew Meng

Web Developer, Computer Science Student

Posts tagged "css"

Posts tagged "css"

Posts tagged "css"

Posts tagged "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.

Posts tagged "css"

Posts tagged "css"

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

Search

Loading

Likes

Following