Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
A Modern Sass Architecture
Search
Stuart Robson
May 06, 2015
Design
7
440
A Modern Sass Architecture
A short talk I gave at the inaugural SassXSW in Bath on MAy 6th 2015
Stuart Robson
May 06, 2015
Tweet
Share
More Decks by Stuart Robson
See All by Stuart Robson
L-I-V-I-N
sturobson
2
630
A Modern Sass Artchitecture
sturobson
11
2k
Cutting Edge Sass - Sass Summit 2014
sturobson
5
360
100% Pure Sass
sturobson
1
280
Make Your Code Delicious - From the Front, Italy 2014
sturobson
4
1.2k
Freelancing: One year done.
sturobson
0
1.2k
Sass: a whistle stop tour
sturobson
1
790
Sass: An Introduction
sturobson
0
220
make your code delicious
sturobson
2
660
Other Decks in Design
See All in Design
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
3.7k
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
1
150
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
640
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
220
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
430
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
290
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
800
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
140
The Golden Whitney
ohtristanart
PRO
0
130
OLTA株式会社/デザイン紹介資料
taxy
0
120
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
400
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Site-Speed That Sticks
csswizardry
4
410
Scaling GitHub
holman
459
140k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
The Pragmatic Product Professional
lauravandoore
32
6.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Git: the NoSQL Database
bkeepers
PRO
428
65k
Speed Design
sergeychernyshev
27
810
Why Our Code Smells
bkeepers
PRO
336
57k
The Cult of Friendly URLs
andyhume
78
6.2k
Transcript
Modern Architecture
yo@sassnews.com
None
stuart.robson@sitepoint.com
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
What is a page?
We’re not building mom & pop shops anymore
OOCSS
BEM
SMACSS
ITCSS
None
Folders & Files - ageddon
7 folders, to rule them all
None
base/
base/ • where you put rudimentary defaults • a reset
file • basic typography settings • code for common HTML elements
None
layouts/
layouts/ • code that lays out the site • code
for the main ‘parts’ of your site • header • footer • main • aside
None
components/
components/ • smaller parts of the site • a carousel
(if they’re not evil, are they evil?) • accordian • tabs
None
pages/
pages/ • for ‘page specific’ code • files named after
the ‘page’ e.g. • _front-page.scss
None
themes/
themes/ • ‘big sites’ might need slight differences for different
states or themes
None
config/
config/ • code that doesn’t output CSS • tools and
helpers • mixins • variables • functions
None
vendor/
vendor/ • a good store for ‘not my code’ •
CSS from external libraries • jquery-ui.scss • bootstrap.scss
None
config/
|– config/ | |– _variables.scss | |– _functions.scss | |–
_mixins.scss | |– _helpers.scss
None
_variables.scss
866 lines of variables
None
// Default Variables // -------------------- $brand-color--primary: #C69; $brand-color--secondary: #699; $brand-color--tertiary:
#F2ECE4; ...
// Tabs Pattern // ------------------- $tabs-navigation-border-color: $brand-color--secondary; $tabs-navigation-text-color: $brand-color--tertiary; $tabs-main-background-color:
$white; ...
None
None
_shame.scss • somewhere to put something you’re not sure of
• should still have comments • should be emptied routinely, and quickly
None
file naming convention _b-reset.scss base files begin with _b- _c-tabs.scss
components begin with _c- _l-header.scss layout files begin with _l- _p-contact.scss page files begin with _p- _t-admin.scss theme files begin with _t- _v-neat.scss vendor files begin with _v-
@import - irasation
// config/ @import "config/_variables"; … // base/ @import "base/_reset"; ...
// components/ @import "components/_buttons"; ... // layout/ @import "layout/_navigation"; ... // pages/ @import "pages/_home"; ... // themes/ @import “themes/_logged-in“; ... // vendors/ @import "config/_jquery-ui"; ...
How To Write Your Sass?
.component { // extends // includes // variables // CSS
// parent selector items // media queries }
https://speakerdeck.com/onishiweb/taking-the-pain-out-of-refactoring-secwed-march
Never go four levels deep
http://sass-guidelin.es/
Modern Architecture
wrapping up • keep your Sass sane • use specific
folders for specific elements of a site • refactor when you can • add comments like a mad person