Architecture for CSSMohamed Amin

Table1. Intro2. OOCSS3. SMACSS4. Adjacent Approaches

a. Dry Cssb. Css For GrownUps

5. Summary

Intro <div class="box1"> <h3>Heading</h3> <img src="pic" /> <p>Blah Blah Blah Blah ..</p> <a href="url">more</a> </div><div class="box2"> <h3>Heading</h3> <img src="pic" /> <p>Blah Blah Blah Blah ..</p> <a href="url">more</a></div>

#box1{ width: 200px; height: 200px; background: red; border: solid 1px green; margin: 10px; padding: 10px;}#box2{ width: 200px; height: 200px; background:blue ; border: solid 1px yellow; margin: 10px; padding: 10px;}

Intro <div class="box1"> <h3>Heading</h3> <img src="pic" /> <p>Blah Blah Blah Blah ..</p> <a href="url">more</a> </div><div class="box2"> <h3>Heading</h3> <img src="pic" /> <p>Blah Blah Blah Blah ..</p> <a href="url">more</a></div>

#box1{ width: 200px; height: 200px; background: red; border: solid 1px green; margin: 10px; padding: 10px; } #box1 h1{ font-size: 30px; color: white; } #box1 p{ font-size: 18px; color: yellow; } #box1 a{ font-size: 12px; color: blue; }

OOCSSObject-Oriented CSSNicole Sullivanhttps://github.com/stubbornella/oocss/wiki

OOCSSWhat’s a CSS Object?

Basically, a CSS “object” is a repeating visual pattern, which can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript. Once created, an object can then be reused throughout a site.

OOCSSWhat’s a CSS Object?

Basically, a CSS “object” is a repeating visual pattern, which can be abstracted

into an independent snippet of HTML, CSS, and possibly JavaScript. Once

created, an object can then be reused throughout a site.

OOCSSFACEBOOK

HTMLBYTES/PAGE

-44%

CSSBYTES/PAGE

-19%

Signs That you Need OOCSS● Alot Of floats● Alot Of specific Margins● Alot of Font Size & !important

What To Do ? That you Need OOCSS● Apply Dry Css● Separate Structure form Styling● Modularize

OCSS's DO's :● Use Css Grid● Keep selectors chain short● Style Classes rather than elements

OCSS's Don'ts● Avoid attaching classes to elements in selectors ● Avoid using ID's As styling hock● Avoid descendent selectors● Avoid Class names that are related to the appearance of style (

blue , red instead use primary-color , secondary color )

SMACSS Scalable and Modular Architecture for CSShttp://smacss.com/Jonathan Snook

SMACSSCategorizing The Css :1. Base2. Layout3. Module4. State5. Theme

SMACSSBASEare the defaults. They are almost exclusively single elementselectors but it could include attribute selectors, pseudo-classselectors, child selectors or sibling selectors. Essentially, a basestyle says that wherever this element is on the page, it should looklike this.

Reset Css : Normailze

SMACSSLayout divide the page into sections. Layouts hold one ormore modules together.

SMACSSModulesare the reusable, modular parts of our design. They arethe Icons, the sidebar sections, the product lists and so on.

SMACSS Modules Candidates● Navbar● Carousels● Dialogs● Widget● Tables● sidebar

SMACSSState are ways to describe how our modules or layouts willlook when in a particular state.

SMACSSTheme rulesare similar to state rules in that they describehow modules or layouts might look. Most sites don’t require a layerof theming but it is good to be aware of it.

SMACSS What To DO

Minimizing the Depth:The problem with such a depth is that it enforces a much greaterdependency on a particular HTML structure. #sidebar div, #footer div {border: 1px solid #333;}#sidebar div h3, #footer div h3 {margin-top: 5px;}#sidebar div ul, #footer div ul {margin-bottom: 5px;}

.pod {border: 1px solid #333;}.pod > h3 {margin-top: 5px;}.pod > ul {margin-bottom: 5px;}

SMACSS What To DO

Use child selectors to increase reusability:css get evaluated from right to left , make it less dependant on the parent .

SMACSS What To DO

Multiple Classes for more “senmaticizing” the stateNo shame in using more classes to get more control on the modules in various states ..btn { ... }.btn:hover { ... }.btn:focus { ... }.btn-default { ... }.btn-default:hover { ... }.btn.is-pressed { ... }.btn.is-pressed:hover { ... }.btn-default.is-pressed { ... }.btn-default.is-pressed:hover { ... }

SMACSS What To DO

Selector’s PerformanceConstrain yourself, don’t choke yourself.

With all that said, even these simple optimizations may be overkill.Steve Souders, who works tirelessly on performance testing, examinedthe performance impact of CSS selectors and determined(back in 2009) that the delta between the best case and the worst case was 50ms. In other words, consider selector performance butdon’t waste too much time on it.

Quick Points1. IDs don’t make it a style hock.2. Classes : your friend , make it reusable and

semantic.3. Selectors : Less is More .4. Module : make it every where.5. Naming Conventions

Quick Points1. IDs don’t make it a style hock.2. Classes : your friend , make it reusable and

semantic.3. Selectors : Less is More .4. Module : make it every where.5. Naming Conventions

The Process Minified1. Structure .2. Reduce.3. Reuse.

The Process Minified : Structure1. Utilize Naming conventions to structure and

Meaning.2. Categorizing style into layers and multiple

documents.3. Apply grids and consistent page structure.

The Process Minified : Reduce1. No inline styles.2. use short chain of selectors.3. Drop elements as selectors.4. Classes over IDs.

The Process Minified : Reuse1. Modularize page components to reuse .2. Extend The Module with subclassing

Let’s Do it ...

Demo

Let’s Do it ...