Architecture for css

Architecture for CSS
Mohamed Amin

Table
1. Intro
2. OOCSS
3. SMACSS
4. Adjacent Approaches
a. Dry Css
b. 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" />
</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;
}

Intro
<div class="box1">
<h3>Heading</h3>
<img src="pic" />
</div>
<div class="box2">
<h3>Heading</h3>
<img src="pic" />
</div>
#box1{
width: 200px;
height: 200px;
background: red;
border: solid 1px green;
}
#box1 h1{
font-size: 30px;
color: white;
}
#box1 p{
font-size: 18px;
color: yellow;
}
#box1 a{
font-size: 12px;
color: blue;
}

OOCSS
Object-Oriented CSS
Nicole Sullivan
https://github.com/stubbornella/oocss/wiki

OOCSS
What’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.

OOCSS
FACEBOOK
HTML
BYTES/PAGE
-44%
CSS
BYTES/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
CSS
http://smacss.com/
Jonathan Snook

SMACSS
Categorizing The Css :
1. Base
2. Layout
3. Module
4. State
5. Theme

SMACSS
BASE
are the defaults. They are almost exclusively single element
selectors but it could include attribute selectors, pseudo-class
selectors, child selectors or sibling selectors. Essentially, a base
style says that wherever this element is on the page, it should look
like this.
Reset Css : Normailze

SMACSS
Layout
divide the page into sections. Layouts hold one or
more modules together.

SMACSS
Modules
are the reusable, modular parts of our design. They are
the Icons, the sidebar sections, the product lists and so on.

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

SMACSS
State
are ways to describe how our modules or layouts will
look when in a particular state.

SMACSS
Theme rules
are similar to state rules in that they describe
how modules or layouts might look. Most sites don’t require a layer
of 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 greater
dependency 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 state
No 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 Performance
Constrain yourself, don’t choke yourself.
With all that said, even these simple optimizations may be overkill.
Steve Souders, who works tirelessly on performance testing, examined
the 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 but
don’t waste too much time on it.

Quick Points
1. 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 Minified
1. Structure .
2. Reduce.
3. Reuse.

The Process Minified : Structure
1. 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 : Reduce
1. No inline styles.
2. use short chain of selectors.
3. Drop elements as selectors.
4. Classes over IDs.

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

Architecture for css

More Related Content

Viewers also liked

Similar to Architecture for css

Recently uploaded

Architecture for css

Editor's Notes