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
![Soundtoys Mac v5.5.5.0 Crack for MacOS Full Version [Latest] pptx](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fsoftwareoverview-251207193711-91d8ae6b-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![AnyTrans for iOS 8.9.14.20251127 With Crack for MacOS [Latest] pptx](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fsoftwareoverview-251207190907-2316965f-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![Driver Easy Pro Key 7.1.0.2641 Full Mac Crack Free Activated Download [2026]....](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fsoftware-251207185324-b2fb71b4-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![Chapter4_Initiation_of_Sediment_Motion_v2[1].pptx](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fchapter4initiationofsedimentmotionv21-251208223747-f94ef163-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![Moho Pro 14.4 Crack for MacOS Works Until 2050 [Latest] pptx](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fsoftwareoverview-251207192639-797289c4-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![Wondershare Filmora 15.0.11 Crack for Mac Key Full Download [Latest] pptx](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fsoftware-251207184836-1d16ba16-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)
![WinRAR Crack 7.13 Final Mac Keygen 2026 Download [Latest] Software.pptx](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fsoftware-251207185858-eb450678-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