CSS 332 PROGRAMMING ISSUES WITH OBJECT-ORIENTED LANGUAGES LECTURE 3. 141010.
Object Oriented CSS
-
Upload
dmytro-shteflyuk -
Category
Documents
-
view
577 -
download
4
description
Transcript of Object Oriented CSS
OBJECT ORIENTED CSSfor high performance web applications and sites.
Nicole SullivanMonday, 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 SUCKYou’re just doing it wrong.” -- Doug Crockford
CSS
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
Modu l a r - comb i n ab l e , 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 - re spec t fu l o f UED and m a r k e t i n g c o n s t r a i n t s . Simplifies and speeds CSS development. Accessible - SEO, Screen readers, etc.Monday, February 16, 2009
Modu l a r - comb i n ab l e , 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 - re spec t fu l o f UED and m a r k e t i n g c o n s t r a i n t s . Simplifies and speeds CSS development. Accessible - SEO, Screen readers, etc.Monday, February 16, 2009
TWO MAIN PRINCIPLES1. Separate Structure and Skin
2. Separate Container and Content
Monday, February 16, 2009
10 BEST PRACTICES1. Create a component
library
2. Use consistent semantic styles
3. Design modules to be transparent on the inside.
4. Be flexible.
5. Learn to love grids.
6. Minimize selectors
7. Separate structure and skin
8. Separate container and content
9. Extend objects by applying multiple classes to an element
10.Use reset and fonts from YUI
Monday, February 16, 2009
9 PITFALLS1. Location dependent styles.
2. Avoid specifying what tag a class applies.
3. Avoid IDs to style inside the main content areas.
4. Avoid drop shadows and rounded corners over irregular backgrounds.
5. Don’t sprite every image together (unless your has very few pages).
6. Avoid height alignment
7. Text as text, not as images.
8. Redundancy
9. Avoid premature optimization.
Monday, February 16, 2009
Components are like legos
Mix and match to create diverse and interesting pages.
Monday, February 16, 2009
SEPARATE CONTAINER AND
CONTENTbreak the dependency between the container module
and the content objects it contains.
Monday, February 16, 2009
Contour blocks Background blocks Content Objects - headings, paragraphs, lists, headers,
footers, buttons, etc.
1:n
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
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
HEADINGSGetting the look and feel you want with the semantics you
need.
Heading Level 1Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
Monday, February 16, 2009
LISTSShould be available to all
modules on the page.
Default List List Item 2List Item 3
‣ Toggle List‣ List Item 2‣ List Item 3
❖ Action List ❖ List Item 2❖ List Item 3
Monday, February 16, 2009
<!-- media --><div class="media media_ext"> <img class="fixedMedia" src="myImg.png" /> <div class="text"> ... </div></div>
Monday, February 16, 2009
SEPARATE STRUCTURE AND
SKINabstract the structure of the block from the skin which
is being applied.
Monday, February 16, 2009
BLOCKclass can be extended by
adding additional classes to the block element.
hd
bd
ft
block
inner
Monday, February 16, 2009
Legos firstDesign individual pages only once all the legos have
been defined.
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
ConsistencyWriting more rules to overwrite
the crazy rules from before.
e.g. Heading should behave predictably in any module.
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 matchContainer and content objects to achieve high
performance design.
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
NEVER SPECIFY ELEMENT
Exception: Extending a class to work on several elements.
e.g..error{} which, by default, applies to a P.
Extend the error class to apply to strong or div elements specify the specific tag in the rule that declares only the values that are different than the default value.
.myClass {...}
div.myClass {...}
Do:
Don’t:
Monday, February 16, 2009
CSS WISH LIST
1. Extending objects - possible to make “sale module” inherit from “module”.
.module{}
.saleModule{extends: module;}
So, maybe CSS isn’t perfect.
Monday, February 16, 2009
CSS WISH LIST
2. Or, class-order should impact the cascade.
<div class=“module saleMod ducati”> ... </div>
So, maybe CSS isn’t perfect.
Monday, February 16, 2009
CSS WISH LIST
3. Proximity should impact the cascade. Nested modules, first one last in the CSS.
.protectiveGear{...}
.saleMod{...}
So, maybe CSS isn’t perfect.
saleMod
Ducati Superbike 848The 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 provide the ideal way to enter the world of Ducati Superbikes.
Ducati Superbike 848The 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.
Arai RX7 Corsair Full Face Helmet - Haga Fire and IceThe 848 is Ducati's most impressive middleweight Superbike ever.
protectiveGear
Monday, February 16, 2009
• “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/
PHOTO CREDITS
Monday, February 16, 2009
http://[email protected]
“stubbornella” on the web... twitter, dopplr, slideshare, everywhere...
Let’s keep talking...
Monday, February 16, 2009