Scalable CSS | An Origin Story. (Part 1 of 3)

SCALABLE CSS
Part 1 of 3: An origin Story.
1

Overview
4 The Early Days
4 Uncovering the Possibilities of CSS
4 Borrowing from OOP
...
4 Embracing the Global Namespace
4 Embracing Killing the Global Namespace
2

Before CSS
4 ~1960
4 1989
4 1991
4 1993
4

Before CSS
4 ~1960, OOP Principles are
founded.
4 1989
4 1991
4 1993
5

Before CSS
founded.
4 1989, The Web is born.
4 1991
4 1993
6

Before CSS
founded.
4 1991, The first Website goes live
4 1993
7

Before CSS
founded.
4 1991, The first website goes live.
4 1993, Mosaic web browser is
released.
8

No, Craigslist was not the first
website...
9

It's not a bug -- it's a rendering choice made by
the browser. As we kneel before the altar of the
"ha ha, you can't control what your documents
look like in HTML
...
In fact, it has been a constant source of delight
for me over the past year to get to continually
tell hordes(literally) of people who want to --
strap yourselves in, here it comes -- control
what their documents look like
...
Sorry, you're screwed.
Marc
11

The Arrival of CSS
4 1994
4 1996
12

The Arrival of CSS
4 1994, Hakon Wium Lie proposes
the idea of CSS while working
with Tim Berners-Lee.
4 1996
13

The Arrival of CSS
4 1994, Hakon Wium Lie proposes
the idea of CSS while working
with Tim Berners-Lee.
4 1996, The first CCS1 spec
becomes official.
14

“The CSS1 language is human
readable and writable, and expresses
style in common desktop publishing
terminology.” -- W3Org
15

Recap
4 CSS1 spec becomes official December 17, 1996.
4 CSS draws it's influence from desktop publishing
software. (Not OOP).
4 CSS is created out of the necessity to make things
look good.
16

Uncovering the Possibilities
of CSS
17

What is CSS Really Capable of?
4 2003
18

What is CSS Really Capable of?
4 2003, Dave Shea launches the
CSS Zen Garden
19

2004
O'Reilly Media popularizes the term Web 2.0
22

OOP Principles
4 DRY
4 Encapsulate what changes
4 Open Closed Design Principle
4 Single Responsibility Principle
(SRP)
25

#EditorSidePanel .tabs {
border-bottom: 1px solid #d2d5d6;
height: 45px;
display: flex;
align-items: stretch;
padding: 10px 0 0;
}
#EditorSidePanel .tabs span {
display: inline-block;
font-weight: 400;
text-decoration: none;
padding: 0 10px;
text-align: center;
color: #0086bf;
font-weight: 600;
border-bottom: 5px solid #0086bf;
}
#EditorSidePanel .tabs a {
display: inline-block;
font-weight: 400;
text-decoration: none;
padding: 0 10px;
flex: 1 0 85px;
text-align: center;
}
27

Tabs HTML
<div id="EditorSidePanel">
<div class="tabs">
<span>STEPS</span>
<a>DOCUMENTS</a>
<a>COMMENTS</a>
</div>
</div>
28

Tabs CSS
4 Is it DRY?
4 Is the functionality
encapsulated?
31

Tabs CSS
4 Is it DRY?
encapsulated?
4 Is it open for extension?
32

Tabs CSS
4 Is it DRY?
encapsulated?
4 Is it open for extension?
4 Does it serve a single
responsibility?
33

An object should look the same no matter where you put it
-- Nicole Sullivan
34

OOCSS
1. Separate Structure and Skin
2. Separate Container and Content
35

Tabs Challenge
4 Using the concepts of OOCSS
how might we refactor this
code?
4 What principles of OOP apply?
36

.pa-tabs {
border-bottom: 1px solid #d2d5d6;
height: 45px;
display: flex;
align-items: stretch;
padding: 10px 0 0;
}
.pa-tab {
font-weight: 400;
padding: 0 10px;
text-align: center;
}
.pa-tab-is-active {
color: #0086bf;
font-weight: 600;
border-bottom: 5px solid #0086bf;
}
37

The Rule of 3 does not apply to
Common UI Elements
38

Recap
4 Web 2.0 shifts the thinking from static to dynamic.
4 SASS extends the way CSS is written.
4 Modular CSS concepts begin to formalize.
39

Scalable CSS | An Origin Story. (Part 1 of 3)

More Related Content

Similar to Scalable CSS | An Origin Story. (Part 1 of 3) (20)

Recently uploaded (20)

Scalable CSS | An Origin Story. (Part 1 of 3)