Downloaded 37 times
ST
Uploaded byshinobu tsutsui
3,432 views
What's Object-Oriented CSS (japanese)
The document introduces Object-Oriented CSS (OOCSS), emphasizing its benefits in enhancing website performance and reducing maintenance costs by promoting the reuse of design components. It outlines strategies for implementation, such as reducing file sizes, utilizing CSS sprites, and maintaining consistency across styles. The author discusses best practices for structuring CSS to avoid duplication and ensure flexibility in web design.
Recommended
![[BROCHURE] Italy Tour Project | @SlideON](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fbrochure8-251215152319-2805af68-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![Chapt_4[1].ppt very interseting and important](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fchapt41-251208222956-7cf5e0fa-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
What's Object-Oriented CSS (japanese)
- 1.WhatʼsObject- Oriented CSSfor high performance web site 2010/5/22 Webridge Meeting #2 tshinobu
- 2.Hello, everyone.“tshinobu” onthe webI wrote about OOCSSin Web Designing →
- 3.
- 6.
- 7.
- 8.
- 9.
- 11.
- 12.
- 13.ul { ...} ul li { ... }ul li a { ... }
- 14.ul { ...} ul li { ... }ul li a { ... }
- 16.
- 24.Web siteʼs performance of business
- 25.Code is toofragile.
- 26.What to dofirst?•Reduce file size•Reduce HTTP request•Reduce maintenance cost
- 27.What you cando?•Use CSS Sprite•Use CSS level 3•Use Object-Oriented CSS!
- 28.
- 35.
- 37.Compornents are likeLEGO. reusing elements make them.
- 38.
- 39.Site-wide legos• Headings•Lists (e.g. action, product, feature, external link)• Module headers and footers• Grids• Buttons• Anything else that should be consistent site-wide.
- 41.Separate container and content
- 42.Separate structure and skin
- 46.
- 47.Location dependent styles avoid!
- 48.
- 49.Avoid irregularBe flexible
- 53..cf = clearfix .fl = float left .fr = float right .flall = float aplly child selector .il = display inline .ilall = display inline apply child selectorBASE .txtl = text align left .txtr = text align rightCLASS .txtc = text align centerNAMES .hd = header .bd = body .ft = footer .tr = top right .tl = top left .br = bottom right .bl = bottom left
- 54..lineGRID .unitAND .size*of* .prepend*RYTHM .append*CLASS .default .halfNAMES .zero
- 55..separate-t / r/ l / b .link-a .thumb-aOTHER .icon-text .icon-text-importantCLASS .icon-text-companyNAMES .list-a .tbl-a .mod-a .mod-index
- 56.
- 69.Enjoy efficient Webdevelopmentby OOCSS!
- 70.
- 71.
- 72.Thank you! Letʼs Keep talking. http://tshinobu.com/ luminexy@gmail.com