Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Delightful Stylesheets - That Conference
Search
Aly Fluckey
August 06, 2018
Technology
0
84
Delightful Stylesheets - That Conference
Aly Fluckey
August 06, 2018
Tweet
Share
More Decks by Aly Fluckey
See All by Aly Fluckey
Delightful Stylesheets
wtfluckey
0
86
Design 101: Tips & Tricks
wtfluckey
0
180
Design Stuffs
wtfluckey
0
220
Risk & Happiness
wtfluckey
0
140
Neo Apprentices
wtfluckey
0
84
Other Decks in Technology
See All in Technology
SREには開発組織全体で向き合う
koh_naga
0
270
AWS re:Invent 2025で見たGrafana最新機能の紹介
hamadakoji
0
380
.NET 10の概要
tomokusaba
0
110
AWS Security Agentの紹介/introducing-aws-security-agent
tomoki10
0
240
[CMU-DB-2025FALL] Apache Fluss - A Streaming Storage for Real-Time Lakehouse
jark
0
120
IAMユーザーゼロの運用は果たして可能なのか
yama3133
1
280
ガバメントクラウド利用システムのライフサイクルについて
techniczna
0
190
AI 駆動開発勉強会 フロントエンド支部 #1 w/あずもば
1ftseabass
PRO
0
360
乗りこなせAI駆動開発の波
eltociear
1
1.1k
Jakarta Agentic AI Specification - Status and Future
reza_rahman
0
100
Reinforcement Fine-tuning 基礎〜実践まで
ch6noota
0
180
AI-DLCを現場にインストールしてみた:プロトタイプ開発で分かったこと・やめたこと
recruitengineers
PRO
2
130
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.8k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Visualization
eitanlees
150
16k
Building a Scalable Design System with Sketch
lauravandoore
463
34k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.3k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
1
100
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.8k
Transcript
None
None
DELIGHTFUL STYLESHEETS
''CSS IS HARD'' - ME, MANY TIMES - ALSO, THE
INTERNET
None
None
CSS IS HARD BUT IT DOESN'T HAVE TO BE
THE CASCADE (IT'S A FEATURE, NOT A )
THE CASCADE 1. SOURCE ORDER 2. SPECIFICITY 3. IMPORTANCE
1. SOURCE ORDER p { color: blue; } p {
color: red; }
2. SPECIFICITY
2. SPECIFICITY p.paragraph { color: blue; } p { color:
red; }
3. IMPORTANCE p { color: purple !important; }
!IMPORTANT
CSS IS HARD WHEN YOU IGNORE THE CASCADE
SO WHAT NOW? WHAT CAN WE DO TO SAVE US
FROM OURSELVES?
ORGANIZATION & COMPONENTIZATION
ORGANIZATION WITH ITCSS BY HARRY ROBERTS
INVERTED TRIANGLE CSS
PHILOSOPHY NOT A FRAMEWORK
None
None
VARIABLES CONTAIN FONTS, COLORS, MEASUREMENTS, ETC
TOOLS GLOBALLY USED MIXINS AND FUNCTIONS
GENERAL RESET AND/OR NORMALIZE STYLES, BOX-SIZING DEFINITION
BASE ELEMENTS STYLING FOR HTML ELEMENTS h1, a, p, input
COMPONENTS SPECIFIC COMPONENTS UNIQUE TO THE DESIGN .panel, .form
UTILITIES UTILITIES AND HELPER CLASSES WITH ABILITY TO OVERRIDE .is--hidden
None
WHAT DOES THIS BUY US?
REUSABE & SCALABLE
REDUCE SPECIFICITY
LESS WASTE, SMALLER FILES
MORE DELIGHTFUL
ORGANIZATION & COMPONENTIZATION
DISCRETE SELF-CONTAINED REUSABLE
None
SET UP BASE STYLES FIRST > fonts > colors >
sizing & measurements > layout
None
None
None
None
1. text components > section header > title & subtitle
2. entry components > entry > image > content > featured entry
None
None
Next is the entry components
None
None
None
ALMOST DONE! > Featured entry styling > Responsiveness
None
None
ORGANIZATION & COMPONENTIZATION
None
None
None
None
THANK YOU!
ALY FLUCKEY @WTFLUCKEY
None