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
Delightful Stylesheets - That Conference
Search
Aly Fluckey
August 06, 2018
Technology
0
83
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
84
Design 101: Tips & Tricks
wtfluckey
0
180
Design Stuffs
wtfluckey
0
220
Risk & Happiness
wtfluckey
0
140
Neo Apprentices
wtfluckey
0
83
Other Decks in Technology
See All in Technology
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
180
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
140
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
100
Connect 100+を支える技術
kanyamaguc
0
140
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
AI専用のリンターを作る #yumemi_patch
bengo4com
1
360
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
0
100
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
210
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.2k
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
0
270
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
360
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
240
Featured
See All Featured
Designing for Performance
lara
609
69k
Raft: Consensus for Rubyists
vanstee
140
7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
We Have a Design System, Now What?
morganepeng
53
7.7k
Building an army of robots
kneath
306
45k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Making Projects Easy
brettharned
116
6.3k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
GitHub's CSS Performance
jonrohan
1031
460k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
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