oocss and smacss case study
TRANSCRIPT
![Page 1: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/1.jpg)
#iiofficecebu
OOCSS and SMACSSCase Study
![Page 2: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/2.jpg)
#iiofficecebu
KOTA FUJISHIROFront-end web developerTwitter:@fujineko_kotaFacebook:kota fujishiro
![Page 3: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/3.jpg)
#iiofficecebu
It is easy to write CSS codes.But , It is difficult to design CSS.
![Page 4: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/4.jpg)
#iiofficecebu
selector { property : value }
![Page 5: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/5.jpg)
#iiofficecebu
#main h2{ … }
#main .contact .header h2{ … }
#sidebar h2{ … }
#main #sidebar
![Page 6: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/6.jpg)
#iiofficecebu
#main h2 { … }#main .contact .header h2 { … }#sidebar h2 { … }.somewhere .title h2 { … }
In this case,the title h2 depends on the parent.It is not flexible or reusable.
![Page 7: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/7.jpg)
#iiofficecebu
1.Overwrite2.Copy and Paste3.!important
![Page 8: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/8.jpg)
#iiofficecebu
Overwrite
![Page 9: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/9.jpg)
#iiofficecebu
Copy and paste
![Page 10: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/10.jpg)
#iiofficecebu
!important
You will meet problems about the specificity
![Page 11: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/11.jpg)
#iiofficecebu
In the end , your source code will be messy.
![Page 12: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/12.jpg)
#iiofficecebu
Break into smaller partsand Follow the rule.
![Page 13: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/13.jpg)
#iiofficecebu
ITCSS
OOCSSSMACSS
BEM
SUITCSS
FLOCSS
AtomicCSS
![Page 14: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/14.jpg)
#iiofficecebu
OOCSSSMACSS
Object Oriented CSS
Scalable and Modular Architecture for css
![Page 15: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/15.jpg)
#iiofficecebu
OOCSS
![Page 16: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/16.jpg)
#iiofficecebu
What is the OOCSS?
![Page 17: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/17.jpg)
#iiofficecebu
Make a website with objectslike LEGO block.
![Page 18: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/18.jpg)
#iiofficecebu
Name each Objects
![Page 19: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/19.jpg)
#iiofficecebu
Make a website with objectslike LEGO block.
![Page 20: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/20.jpg)
#iiofficecebu
SMACSS
![Page 21: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/21.jpg)
#iiofficecebu
What is the SMACSS?
![Page 22: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/22.jpg)
#iiofficecebu
The main concept of SMACSS isto categorize CSS into 5 rules.
1.Base 2.Layout3.Module4.State5.Theme
![Page 23: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/23.jpg)
#iiofficecebu
![Page 24: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/24.jpg)
#iiofficecebu
![Page 25: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/25.jpg)
#iiofficecebu
BaseResect.css,Normalize.css …etc
![Page 26: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/26.jpg)
#iiofficecebu
![Page 27: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/27.jpg)
#iiofficecebu
LayoutOutline of modules
![Page 28: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/28.jpg)
#iiofficecebu
![Page 29: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/29.jpg)
#iiofficecebu
ModuleReusable parts.
State(is-hidden,is-active…etc)
![Page 30: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/30.jpg)
#iiofficecebu
![Page 31: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/31.jpg)
#iiofficecebu
![Page 32: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/32.jpg)
#iiofficecebu
Resources
github.com/kotafujishiro/SampleSite
OOCSSslideshare.net/stubbornella/object-oriented-css
SMACSSsmacss.com
![Page 33: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/33.jpg)
#iiofficecebu
Let’s create modular and scalable CSS
by using OOCSS and SMACSS
![Page 34: OOCSS and SMACSS Case Study](https://reader036.vdocuments.site/reader036/viewer/2022062823/5878a4fa1a28ab42588b64fd/html5/thumbnails/34.jpg)
#iiofficecebu
Thanks