Slide 1
Slide 1 text
KEYS TO FRONTEND
ARCHITECTURE
Some HTML and CSS going around here...
Slide 2
Slide 2 text
Nima, frontend architect
Freelance - Entrepreneur
@Nima_Izadi
OnTheRailsAgain
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
WEB
You like building apps?
But you’re more into backend than frontend?
Slide 5
Slide 5 text
HTML CSS
WEB
Slide 6
Slide 6 text
First things first
HTML
Let’s try to be a little semantic
Slide 7
Slide 7 text
HTML is not that simple
If you think so, then check the specs
(http://www.w3.org/TR/html5/)
W3C Team, May 2011
Don’t make them
work for nothing
Slide 8
Slide 8 text
HTML elements
There is not a bunch of them for nothing!
Slide 9
Slide 9 text
Bad habit
%div
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod.
%br
%br
Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Slide 10
Slide 10 text
Good habit
%p
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod.
%p
Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Slide 11
Slide 11 text
Bad habit
%div#menu.menu
%div.item Menu 1
%div.item Menu 2
...
%div#main-title.title
Main title
%div.paragraph
Lorem ipsum dolor
sit amet, consectetur adipisicing elit, sed do eiusmod
Slide 12
Slide 12 text
Good habit
%nav
%ul
%li Menu 1
%li Menu 2
%h1
Main title
%p
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod
Basic HTML tags
More semantic
More maintainable
Slide 13
Slide 13 text
Just to be clear
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This is a paragraph
THIS IS A TITLE
•Element A •Element B •Element C- This
- Is
- A
- List
Slide 14
Slide 14 text
Semantic? Maintainable?
Slide 15
Slide 15 text
Inputs
Basic ones
Slide 16
Slide 16 text
Inputs
Mobile optimized
Slide 17
Slide 17 text
Inputs
Mobile optimized
Slide 18
Slide 18 text
Inputs
Browser validations
Slide 19
Slide 19 text
Inputs
Default widgets
Slide 20
Slide 20 text
Inputs
Default widgets
Beautiful icon, isn’t it?
Slide 21
Slide 21 text
And lot more...
Inputs
Slide 22
Slide 22 text
By the way
IS FOR TABULAR DATA
NOT FOR
LAYOUT!
Slide 23
Slide 23 text
Have a doubt?
http://w3.org/TR
http://W3Fools.com
http://www.WebPlatform.org
http://developer.mozilla.org/docs
http://dev.opera.com
Slide 24
Slide 24 text
Don’t be afraid
CSS
Slide 25
Slide 25 text
You might be used to
DRY
Object Oriented
MVC
Conventions
Reusable Code
Agile
Slide 26
Slide 26 text
Y U NO Apply To
CSS?!
Slide 27
Slide 27 text
Maintainability
Reusability
Slide 28
Slide 28 text
Object Oriented CSS
Slide 29
Slide 29 text
NOT
PAGES!
COMPONENTS
THINK
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Component
Slide 32
Slide 32 text
Component
Component
Slide 33
Slide 33 text
Component
Component
Component
Slide 34
Slide 34 text
Component
Component
Component
Component
Slide 35
Slide 35 text
Component
Component
Component
Component
Component
Slide 36
Slide 36 text
Component
Component
Component
Component
Component
Component
Slide 37
Slide 37 text
structure
Separate
and
SKIN
Slide 38
Slide 38 text
Don’t rely on the semantics of HTML
Structure VS SKIN
![]()
Slide 39
Slide 39 text
.modal { margin: 1em; padding: 1em; width: auto; }
A class for Structure
A class for SKIN
.brand { color: $brand_color; background... }
Structure VS SKIN
Slide 40
Slide 40 text
Don't use classes for JavaScript
Structure VS SKIN
Instead of
Slide 41
Slide 41 text
container
Separate
and
content
Slide 42
Slide 42 text
Container VS Content
.an-object
h2
.an-object
h2.category
h2
h2.category
“An object should look the same no matter
where you put it”
Slide 43
Slide 43 text
Container VS Content
h2 { ... }! ! ! ! // General application header
h2.category { ... } !// Category header that can be reused
Describe your object
instead of being too specific
h2 { ... }
.myObject h2 { ... }
Slide 44
Slide 44 text
In practice
Slide 45
Slide 45 text
CSS Frameworks
Bootstrap
Slide 46
Slide 46 text
I’M SEING
BOOTSTRAP
EVERYWHERE...
Slide 47
Slide 47 text
CSS Frameworks
This is an awesome example of
what to do and how to do it!
Slide 48
Slide 48 text
Variables
Mixins
Inheritance
Nesting
Use SASS
Put some logic in your CSS!
Slide 49
Slide 49 text
SASS
How easily do you think they did that?
Slide 50
Slide 50 text
Variables
SASS
$white!
! ! ! ! : #EFEFEF;
$blue!! ! ! ! : #00A8DD;
$green!
! ! ! ! : #7cb848
$brand_color !
: $blue;
Slide 51
Slide 51 text
Variables
SASS
$white!
! ! ! ! : #EFEFEF;
$blue!! ! ! ! : #00A8DD;
$green!
! ! ! ! : #7cb848
$brand_color !
: $green;
Change your app design instantly!
Slide 52
Slide 52 text
Separate logic from CSS
_config.scss
// Typography
$font_size: 12;
$heading_1: 46;
$heading_2: 32;
$heading_3: 28;
$heading_4: 18;
$heading_5: 16;
$heading_6: 14;
$line: $font-size * 1.5;
// Etc.
Slide 53
Slide 53 text
Use .classes, not #IDs
Keep #IDs for JavaScript and be generic
Slide 54
Slide 54 text
.namespace your objects
Slide 55
Slide 55 text
Nesting you say?
Slide 56
Slide 56 text
First attempt
Nesting
body {
section
form {
.inline-group {
label {
display: inline-block;
}
}
}
}
}
It’s cool, but don’t overuse it!
You don’t want to use !important in the future
Slide 57
Slide 57 text
First attempt
Nesting
body {
section
form {
.inline-group {
label {
display: inline-block;
}
}
}
}
}
It’s cool, but don’t overuse it!
You don’t want to use !important in the future
Slide 58
Slide 58 text
Generated output
Nesting
body section form .inline-group label {
display: inline-block;
}
Slide 59
Slide 59 text
Really want to mimic? Indent.
Nesting
.search-panel {
...
}
.search-panel-header {
...
}
.search-panel-content {
...
}
.search-panel-label {
...
}
Slide 60
Slide 60 text
How do I organize my
stylesheets?
Slide 61
Slide 61 text
How you don’t do
!"" css
# !"" style.css (2483 lines)
Keeping all your CSS in one file is bad
This hurts my eyes
Slide 62
Slide 62 text
How you don’t do
!"" css
# !"" page_1.css
# !"" page_2.css
# !"" page_3.css
# !"" page_4.css
# !"" page_5.css
Having one file per page is not better
Slide 63
Slide 63 text
How you can do
!"" css/
# !"" partials/
# # !"" base/! ! // HEADINGS, links, ...
# # !"" generic/! // @mixins, resets, helpers, ...
# # !"" objects/! // .buttons, .breadcrumbs, ...
# !"" inuit.scss !
! // Import all the partials!
!"" _vars.scss ! ! ! // Did I mention it was the file for variables?
!"" _config.scss !
!"" your-project.scss
Slide 64
Slide 64 text
Inspirational sources
Harry Roberts – Breaking Good Habits
https://speakerdeck.com/u/csswizardry/p/breaking-good-habits-1
Harry Roberts – Big CSS
https://speakerdeck.com/u/csswizardry/p/big-css-1
David Demaree – Designing the Hi-DPI Web
https://speakerdeck.com/u/ddemaree/p/designing-the-hi-dpi-web
Chris Coyer – Writing Better HTML & CSS
https://speakerdeck.com/chriscoyier/writing-better-html-css
Slide 65
Slide 65 text
Inspirational sources
Dale Sande – Sass 3.2: Silent Classes
https://speakerdeck.com/anotheruiguy/sass-32-silent-classes
Dale Sande – Module design & UI Dev patterns
https://speakerdeck.com/anotheruiguy/module-design-ui-dev-patterns
Dale Sande – Clean out your Sass Junk-Drawer
https://speakerdeck.com/anotheruiguy/clean-out-your-sass-junk-drawer
Nicole Sullivan – What is Object Oriented CSS?
http://www.slideshare.net/stubbornella/what-is-object-oriented-css
Slide 66
Slide 66 text
NIMA IZADI
@Nima_Izadi
OnTheRailsAgain.com/Nima
SpeakerDeck.com/nima