OOCSS and SMACSS Case Study

#iiofficecebu

OOCSS and SMACSSCase Study

#iiofficecebu

KOTA FUJISHIROFront-end web developerTwitter:@fujineko_kotaFacebook:kota fujishiro

#iiofficecebu

It is easy to write CSS codes.But , It is difficult to design CSS.

#iiofficecebu

selector { property : value }

#iiofficecebu

#main h2{ … }

#main .contact .header h2{ … }

#sidebar h2{ … }

#main #sidebar

#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.

#iiofficecebu

1.Overwrite2.Copy and Paste3.!important

#iiofficecebu

Overwrite

#iiofficecebu

Copy and paste

#iiofficecebu

!important

You will meet problems about the specificity

#iiofficecebu

In the end , your source code will be messy.

#iiofficecebu

Break into smaller partsand Follow the rule.

#iiofficecebu

ITCSS

OOCSSSMACSS

BEM

SUITCSS

FLOCSS

AtomicCSS

#iiofficecebu

OOCSSSMACSS

Object Oriented CSS

Scalable and Modular Architecture for css

#iiofficecebu

OOCSS

#iiofficecebu

What is the OOCSS?

#iiofficecebu

Make a website with objectslike LEGO block.

#iiofficecebu

Name each Objects

#iiofficecebu

Make a website with objectslike LEGO block.

#iiofficecebu

SMACSS

#iiofficecebu

What is the SMACSS?

#iiofficecebu

The main concept of SMACSS isto categorize CSS into 5 rules.

1.Base 2.Layout3.Module4.State5.Theme

#iiofficecebu

#iiofficecebu

#iiofficecebu

BaseResect.css,Normalize.css …etc

#iiofficecebu

#iiofficecebu

LayoutOutline of modules

#iiofficecebu

#iiofficecebu

ModuleReusable parts.

State(is-hidden,is-active…etc)

#iiofficecebu

#iiofficecebu

#iiofficecebu

Resources

github.com/kotafujishiro/SampleSite

OOCSSslideshare.net/stubbornella/object-oriented-css

SMACSSsmacss.com

#iiofficecebu

Let’s create modular and scalable CSS

by using OOCSS and SMACSS

#iiofficecebu

Thanks