How do you scale CSS for millions of visitors or thousands of pages? The slides from Nicole's presentation at Web Directions North in Denver will show you how to use Object Oriented CSS to write fast, ...
How do you scale CSS for millions of visitors or thousands of pages? The slides from Nicole's presentation at Web Directions North in Denver will show you how to use Object Oriented CSS to write fast, maintainable, standards-based front end code. Adds much needed predictability to CSS so that even beginners can participate in writing beautiful, standards-compliant, fast websites.
Chris Griego, Senior Developer at getaroom@Jens Hedqvist I understand where you're coming from, and I used to be of the same mind. The crux of your argument is balance, and on that point we agree. However, balance goes both ways. It is not balanced to spend vast amounts of time, and money, creating overly complicated, slow, and difficult to maintain CSS code for the sake of supposed virtuous HTML.2 years ago
Are you sure you want to
Jens Hedqvist, Lead Front-End Developer at DaytonaAs long as your not messing up the semantics of the HTML just to get your CSS top notch optimized. We need a balance here, adding redundant HTML elements just for for styling are still, and always will be, EVIL.2 years ago
Introductions - Nicole Sullivan, worked at yahoo, specialist in scalable high performance websites.
After which he said that “CSS is broken” Very common to say that CSS is broken when it is misunderstood. Emerging frameworks are a sign that CSS is broken. Java developers -- Math class TRANSITION On the other hand, I honestly do believe we are doing it wrong.
couple years coding in the basement by yourself before you are remotely useful. Profession needs to accomodate entry level, mid level, and architect level developers. Frankly, I’m tired of writing rounded corner boxes. I’ve done it 1000 times already. What I want is a system that allows newbies to do that part so I can focus on the architect level challenges.
New (different) html pages should be able to be built without modifying the CSS.
And for good reason. Currently there is no consistency or predictability.
Perfectly accessible or high performance website, and then the first newbie to touch it, ruins it. Our code should be robust enough that newbies can contribute while maintaining the standards we’ve set.
yoga, balance metaphor
“Once upon a time...” pages to modules to objects
If we build new HTML pages from a component library, new pages won’t require new css. So what goes into a component library. First up, content objects.
Anything else that should be consistent site-wide.
media, media extended, wrap Open editable zone
presentational elements
function created to return area that occasionally returns the diameter instead.
not because you can’t do it everyone in this room could position something to the left and something else to the right. Also because, when working with beginners, they need not to figure out a brand new system with each module.
If ducati and saleMod both specify border, and the rules are the same strength, ducati should “win” as it is the last class specified.
Support for child element selectors would solve this, but would increase the length of the rules. E > F
OBJECT ORIENTED CSS
for high performance web applications and sites.
Nicole Sullivan
Monday, February 16, 2009
Web Dev Philosophy
• Work out of respect for the design.
• Designers make our code as beautiful and
clever on the outside as it is on the inside.
• Respect the original design vision.
consistent design = clean code = fast site.
Monday, February 16, 2009
“JAVASCRIPT DOESN’T SUCK
You’re just doing it wrong.” -- Doug Crockford
Monday, February 16, 2009
“JAVASCRIPT DOESN’T SUCK
You’re just doing it wrong.” -- Doug Crockford
Monday, February 16, 2009
CSS
“JAVASCRIPT DOESN’T SUCK
You’re just doing it wrong.” -- Doug Crockford
Monday, February 16, 2009
REQUIRE EXPERT ABILITY
JUST TO GET STARTED.
this is not a sign of maturity.
Monday, February 16, 2009
FILE SIZE JUST KEEPS
GETTING BIGGER
As the site evolves we continuously modify the CSS.
Monday, February 16, 2009
CODE RE-USE IS ALMOST
NONEXISTENT
people don’t trust other developers code.
Monday, February 16, 2009
CODE IS TOO FRAGILE.
Even the cleanest code gets ruined by the first non-expert to
touch it.
Monday, February 16, 2009
WHAT IS THE MOST
IMPORTANT MISTAKE
TALENTED CODERS ARE
MAKING?
Writing really clever modules.
Monday, February 16, 2009
THE SIZE OF THEIR CSS
WILL INCREASE
in a 1:1 relationship with the number of blocks, pages, and
complexity of content.
Monday, February 16, 2009
BUT, WE WANT A LOT!
and sometimes those goals conflict.
Monday, February 16, 2009
and sometimes those goals conflict.
Monday, February 16, 2009
Monday, February 16, 2009
Modular - combinable ,
reusable, extensible. Light -
One to many relationship
between CSS and potential
layouts. Fast - Minimal HTTP
requests & minimal size.
Future-proof - maintainable,
semantic, standards oriented,
prepared for future-browsers,
redesign compatible. Visually
interesting and adaptable -
respectful of UED and
mar keting constraints.
Simplifies and speeds CSS
development. Accessible -
SEO, Screen readers, etc.
Monday, February 16, 2009
Modular - combinable ,
reusable, extensible. Light -
One to many relationship
between CSS and potential
layouts. Fast - Minimal HTTP
requests & minimal size.
Future-proof - maintainable,
semantic, standards oriented,
prepared for future-browsers,
redesign compatible. Visually
interesting and adaptable -
respectful of UED and
mar keting constraints.
Simplifies and speeds CSS
development. Accessible -
SEO, Screen readers, etc.
Monday, February 16, 2009
SOLUTION
Object Oriented CSS
Monday, February 16, 2009
TWO MAIN PRINCIPLES
1. Separate Structure and Skin
2. Separate Container and Content
Monday, February 16, 2009
10 BEST PRACTICES
1. Create a component 6. Minimize selectors
library
7. Separate structure and skin
2. Use consistent semantic
styles 8. Separate container and
content
3. Design modules to be
transparent on the inside. 9. Extend objects by applying
multiple classes to an
4. Be flexible. element
5. Learn to love grids. 10. Use reset and fonts from
YUI
Monday, February 16, 2009
9 PITFALLS
1. Location dependent styles. 5. Don’t sprite every image
together (unless your has
very few pages).
2. Avoid specifying what tag
a class applies.
6. Avoid height alignment
3. Avoid IDs to style inside
the main content areas. 7. Text as text, not as images.
4. Avoid drop shadows and 8. Redundancy
rounded corners over
irregular backgrounds. 9. Avoid premature
optimization.
Monday, February 16, 2009
CREATE A COMPONENT
LIBRARY
of reusable “legos”
Monday, February 16, 2009
Components
are like legos
Mix and match to create diverse
and interesting pages.
Monday, February 16, 2009
SEPARATE
CONTAINER AND
CONTENT
break the dependency between the container module
and the content objects it contains.
Monday, February 16, 2009
Monday, February 16, 2009
Contour blocks Background blocks Content Objects -
headings, paragraphs, lists, headers,
footers, buttons, etc.
Capital of the Canterbury region and the largest city
on the South Island (population just over 300,000)
exudes a palpable air of gentility and a connectedness
with the mother country.
Read more...
X X
1:n
Monday, February 16, 2009
Build HTML from the
component library.
New pages should not generally require additional CSS
Monday, February 16, 2009
SITE-WIDE LEGOS
• Headings
• Lists (e.g. action list, external link list, product list, or
feature list)
• Module headers and footers
• Grids
• Buttons
Monday, February 16, 2009
Heading Level 1
Heading Level 2
HEADINGS Heading Level 3
Getting the look and feel you
want with the semantics you Heading Level 4
need.
Heading Level 5
Heading Level 6
Monday, February 16, 2009
‣ Toggle List
Default List
‣ List Item 2
List Item 2
‣ List Item 3
List Item 3
LISTS ❖ Action List
❖ List Item 2
Should be available to all ❖ List Item 3
modules on the page.
Monday, February 16, 2009
MEDIA
Extending objects, a simple
example.
Monday, February 16, 2009
<!-- media -->
<div class=quot;media media_extquot;>
<img class=quot;fixedMediaquot; src=quot;myImg.pngquot; />
<div class=quot;textquot;>
...
</div>
</div>
Monday, February 16, 2009
SEPARATE
STRUCTURE AND
SKIN
abstract the structure of the block from the skin which
is being applied.
Monday, February 16, 2009
block
inner
hd
BLOCK
bd
class can be extended by
adding additional classes to
the block element. ft
Monday, February 16, 2009
Reusing elements
makes them
performance “freebies”
Monday, February 16, 2009
Legos first
Design individual pages only once all the legos have
been defined.
Monday, February 16, 2009
Pitfalls
What not to do.
Monday, February 16, 2009
Avoid redundancy
Monday, February 16, 2009
Nearly identical
modules
Headings 3 and 5 are too similar.
Monday, February 16, 2009
Rule of thumb:
If two modules look too similar to include on
the same page, they are too similar to include
together in a site, choose one!
Monday, February 16, 2009
USE CONSISTENT
SEMANTIC STYLES
Monday, February 16, 2009
Heading should not become a
A Heading
in another part of the page.
Monday, February 16, 2009
Consistency
Writing more rules to overwrite
the crazy rules from before.
e.g. Heading should behave
predictably in any module.
Monday, February 16, 2009
How about an
example?
Yahoo! Personal Finance
Monday, February 16, 2009
2+ different tab
styles. Could they
use the same
images?
Monday, February 16, 2009
3 contour
components are
too similar. Chose
one.
Monday, February 16, 2009
Changes in module
width, background
color, or background
image are an excellent
example of module
reuse.
Monday, February 16, 2009
Mix and match
Container and content objects to achieve high
performance design.
Monday, February 16, 2009
DESIGN MODULES TO
BE TRANSPARENT
on the inside.
Monday, February 16, 2009
Making it look
fab
Requires careful choice of pixels.
Bonus: Consider PNG8 for
progressive enhancement
http://alistapart.com/articles/mountaintop/
Monday, February 16, 2009
Pitfalls
Variable or gradient
backgrounds.
Monday, February 16, 2009
NEVER SPECIFY
ELEMENT
Do: .myClass {...}
Don’t: div.myClass {...}
Exception: Extending a Extend the error class to
class to work on several apply to strong or div
elements. elements specify the
specific tag in the rule that
e.g..error{} which, by declares only the values
that are different than the
default, applies to a P.
default value.
Monday, February 16, 2009
BE FLEXIBLE.
Extensible height and width.
Monday, February 16, 2009
• Grids control width
• Content controls height
Monday, February 16, 2009
LEARN TO LOVE
GRIDS.
Monday, February 16, 2009
MARK-UP AND CSS
become predictable
Monday, February 16, 2009
UML TO DESCRIBE
both HTML and CSS
Monday, February 16, 2009
TEACHING OO CSS
To designers and engineers
Monday, February 16, 2009
A NATURAL PROGRESSION
from simple to more complex tasks.
Monday, February 16, 2009
CSS WISH LIST
So, maybe CSS isn’t perfect.
Monday, February 16, 2009
CSS WISH LIST
So, maybe CSS isn’t perfect.
1. Extending objects - possible to make “sale module” inherit
from “module”.
.module{}
.saleModule{extends: module;}
Monday, February 16, 2009
CSS WISH LIST
So, maybe CSS isn’t perfect.
2. Or, class-order should impact the cascade.
<div class=“module saleMod ducati”> ... </div>
Monday, February 16, 2009
CSS WISH LIST
So, maybe CSS isn’t perfect.
saleMod
Ducati Superbike 848
3. Proximity should
The 848 is Ducati's most impressive
middleweight Superbike ever. Its exceptional
lightweight and legendary Ducati chassis set-up
impact the cascade. combined with the smooth and thrilling torque
delivery of the L-Twin Desmo provide the ideal
way to enter the world of Ducati Superbikes.
Nested modules, first
one last in the CSS. Ducati Superbike 848
The 848 is Ducati's most impressive
middleweight Superbike ever. Its exceptional
lightweight and legendary Ducati chassis set-up
combined with the smooth and thrilling torque
delivery of the L-Twin Desmo.
.protectiveGear{...}
.saleMod{...}
Arai RX7 Corsair Full Face Helmet - Haga Fire
and Ice
The 848 is Ducati's most impressive
middleweight Superbike ever.
protectiveGear
Monday, February 16, 2009
PHOTO CREDITS
“You Crack Me Up” by http://flickr.com/photos/nickwheeleroz/2474196275/in/photostream/
•
“red lego” by http://flickr.com/photos/niznoz/5753993/
•
“Pablo’s cubism period began at three” by http://flickr.com/photos/wwworks/2475349116/in/
•
set-72157608035966422/
“Kuwait water tower” by http://flickr.com/photos/asam/327911794/
•
idigit_teddy: http://www.flickr.com/photos/design_inspiration/238542495/
•
lucianvenutian: http://www.flickr.com/photos/lucianvenutian/1142630637/
•
Gimli_36: http://www.flickr.com/photos/navillot/1878124531/
•
NathanFromDeVryEET: http://www.flickr.com/photos/thatguyfromcchs08/2300190277/
•
Stabilo Boss: http://flickr.com/photos/stabilo-boss/101793494/in/set-72057594060779001/
•
Monday, February 16, 2009
Let’s keep talking...
http://stubbornella.org
nicole@stubbornella.org
“stubbornella” on the web...
twitter, dopplr, slideshare, everywhere...
Monday, February 16, 2009
xushengni
1–10 of 35 previous next Post a comment
1–10 of 35 previous next
Very common to say that CSS is broken when it is misunderstood.
Emerging frameworks are a sign that CSS is broken.
Java developers -- Math class
TRANSITION
On the other hand, I honestly do believe we are doing it wrong.
Profession needs to accomodate entry level, mid level, and architect level developers.
Frankly, I’m tired of writing rounded corner boxes. I’ve done it 1000 times already. What I want is a system that allows newbies to do that part so I can focus on the architect level challenges.
So what goes into a component library. First up, content objects.
Open editable zone
everyone in this room could position something to the left and something else to the right.
Also because, when working with beginners, they need not to figure out a brand new system with each module.