"Web" design has changed. Now is the time to stop and rethink our best practices. Which are the new, better practices and tools that will help us keep our sanity while scaling big projects?
Slides from UpNorth Conference in Athens, Greece.
XXLCSSHow to scale CSS and keep your sanity@sugarenia
View Slide
I’m Sugar.
I’m a designer.
I’m happy.
Web design is awesome!
Web design is awesome!...sometimes
The problem
Maintainability
OOCSS
OOCSSSMACSS
OOCSSSMACSSSass
OOCSSSMACSSSassBootstrap & Foundation
The goals
GOAL #1Don’t start from scratchevery time
GOAL #2Markup standards,especially for large teams
GOAL #3Don’t bug your designersabout ALL THE THINGS
GOALS #4, #5 & #6FlexibilitySpeedPerformance
GOAL #7Own the code
Best practices
Avoid classitis
Avoid extra markup
Non-semantic class names
Use descendant selectors
No.
Better practices
Developers know better
Developers know betterAbstraction
Developers know betterAbstractionObject orientation
Developers know betterAbstractionObject orientationPerformance first
Developers know betterAbstractionObject orientationPerformance firstDRY
Developers know betterAbstractionObject orientationPerformance firstDRYKISS
No IDs in CSS please
#header#footer
#header#footer#footer { background-color: #000; }
#header#footer#footer { background-color: #000; }#footer a { color: #fff; }
#header#footer.twitter#footer { background-color: #000; }#footer a { color: #fff; }
#header#footer.twitter#footer { background-color: #000; }#footer a { color: #fff; }.twitter { background-color: #fff; }
#header#footer.twitter#footer { background-color: #000; }#footer a { color: #fff; }.twitter { background-color: #fff; }.twitter a { color: #000; }
Semantic?
Semantic? Pragmatic.
Big headingSidebar headingFooter heading
Big headingSidebar headingFooter headingh1 { font-size: 3em; }h2 { font-size: 2.4em; }h3 { font-size: 2em; }h4 { font-size: 1.6em; }
Big headingSidebar headingFooter headingh1 { font-size: 3em; }h2,.footer h4 { font-size: 2.4em; }h3 { font-size: 2em; }h4 { font-size: 1.6em; }
Big headingSidebar headingFooter headingh1, .alpha { font-size: 3em; }h2, .beta { font-size: 2.4em; }h3, .gamma { font-size: 2em; }h4, .delta { font-size: 1.6em; }
Style classes aretotally OK, dude
Classes work much better when we use themto represent visual semantics, rather thankeeping them tied to content.— Nicole Sullivan (@stubbornella)
...
Descendant selectorscan bite you
This is the box header
This is the box header.box {background-color: #fff;border: 1px solid #ccc;}.box h3 {text-transform: uppercase;color: #333;}
This is the box header.box {background-color: #fff;border: 1px solid #ccc;}.box h3, .box h4 {text-transform: uppercase;color: #333;}
This is the box header.box {background-color: #fff;border: 1px solid #ccc;}.box-header {text-transform: uppercase;color: #333;}
Modularize
Stop overdesigning
Stop thinking in pages
Everything is a module
Lorem ipsum dolor sit amet,consectetur adipiscing elit.Donec a posuere velit.
@Stubbornella 14 minutes ago
.media, .bd { overflow:hidden; }.media .img { float:left; margin-right: 10px; }.media .img img { display:block; }.media .imgExt { float:right; margin-left: 10px; }
Do one thingand one thing only
Combine modulesfor fun and profit
Modules should beoblivious of their context
Toolbox
Preprocessors
PreprocessorsSass, that is.
CSS Frameworks
...or UI Toolkits?
The time saved using a css framework isspent looking up how to work with thatframework.— Jesse Shawl (@jshawl)
Updating is hell
MY ADVICERoll your own framework
Living style guides
http://style.codeforamerica.org
http://patterns.alistapart.com
Better collaboration
Avoid code duplication
Easy device testing
http://vinspee.me/style-guide-guide/
Do try this at home.
Thanks!You rock.@sugarenia
sugarenia
uxevents
hirokazu_oda
thebloggart
cyberagentdevelopers
onf
ashapiro
hik0107
uxaustralia
solmetts
sakito
uxaustralia
kaminashi
chrisshort
marktimemedia
stephaniewalter
eileencodes
garrettdimon
revolveconf
searls
bkeepers
danielanewman
samanthasiow
tenderlove
holman