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
CSS
Search
James Shedden
June 24, 2015
Technology
1
85
CSS
How I make cool & maintainable stuff, fast.
James Shedden
June 24, 2015
Tweet
Share
More Decks by James Shedden
See All by James Shedden
Flexbox is cool and fun
jamesshedden
1
130
Other Decks in Technology
See All in Technology
試作とデモンストレーション / Prototyping and Demonstrations
ks91
PRO
0
160
QA経験のないエンジニアリング マネージャーがQAのカジュアル面談に出て 苦労していること・気づいたこと / scrum fest niigata 2024
yoshikiiida
2
660
社内での継続的な機械学習勉強会の開催のコツ
yudai00
2
390
技術力の伸ばし方を考える
khirata
0
140
RailsConf 2024 Keynote "Startups on Rails in 2024"
irinanazarova
0
800
1Q86
kawaguti
PRO
2
190
Databricksの生成AI戦略
taka_aki
1
370
LLM評価の落とし穴~開発者目線で気をつけるポイント~
rishigami
11
3.2k
エンジニアゼロの組織から内製開発の DX をどう実現したのか / How did we achieve DX in in-house development in an organization with zero engineers?
genkiogasawara
7
3k
Google Cloud Next '24 Recap in ZOZO AIにより変わる開発 運用/Development and operation changed by AI
gachimuchiengineer
0
190
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
37k
AWS CLIの起動が重くてつらいので aws-sdk-client-go を書いた / kamakura.go#6
fujiwara3
6
3k
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
How to Ace a Technical Interview
jacobian
273
22k
Infographics Made Easy
chrislema
238
18k
GraphQLの誤解/rethinking-graphql
sonatard
56
9.3k
A designer walks into a library…
pauljervisheath
201
23k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
A Tale of Four Properties
chriscoyier
153
22k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.7k
Git: the NoSQL Database
bkeepers
PRO
423
63k
Fireside Chat
paigeccino
22
2.7k
Transcript
CSS!
I want to...
I want to make cool stuff.
I want to make cool stuff, fast.
I want to make cool & maintainable stuff, fast.
Let’s make an app.
Let’s make our app look awesome.
Let’s make it easy to make our app look awesome.
/css /components /base /utilities main.css
The individual building blocks /components The fundamental rules /base Classes
for adjusting CSS within templates /utilities All the above imported main.css
Variables
SASS Variables $color-primary CSS Variables var(—-color-primary)
Pre-processing
SASS & LESS Pre-processors REWORK & POSTCSS Pre-processing plugin frameworks
Building, watching & reloading.
Let’s start making our app look cool.
Naming
BEM Block, Element, Modifier
Block block Element block__element Modifier block__element—-modifier
Cue human body analogy
Block block Element block__element Modifier block__element—-modifier
Block person Element person__arm Modifier person__arm—-left
Maybe not .person__arm__hand__finger Maybe .person .arm .hand__finger—-ring
HTML
HTML + CSS
HTML + CSS + JS
<div></div>
<div class=“person”> <div class=“person__arm person__arm—-left”> Left arm </div> <div class=“person__arm
person__arm—-right”> Right arm </div> </div>
<div class=“person”> <div class=“person__arm person__arm—-left”> Left arm </div> <div class=“person__arm
person__arm—-right”> Right arm </div> </div> /css/components/person.css .person {} .person__arm {} .person__arm—-left {}
<div class=“person”> <div class=“person__arm person__arm—-left”> Left arm </div> <div class=“person__arm
person__arm—-right u-margin-Tm”> Right arm </div> </div> /css/utilities/space.css .u-margin-Tm { margin-top: var(—-space-medium); }
Utilities
<div class=“u-display-block u-margin-Vm u-color-primary u-background-meta u- padding-Lm u-padding-Rs u-text-heading u-
text-m u-text-no-smoothing”> Forever alone </div>
<div class=“u-display-block u-margin-Vm u-color- primary u-background-meta u-padding-Lm u-padding- Rs u-text-heading
u-text-m u-text-no-smoothing”> Much CSS </div> <div class=“u-display-block u-margin-Vm u-color- primary u-background-meta u-padding-Lm u-padding- Rs u-text-heading u-text-m u-text-no-smoothing”> Very stylesheets </div> <div class=“u-display-block u-margin-Vm u-color- primary u-background-meta u-padding-Lm u-padding- Rs u-text-heading u-text-m u-text-no-smoothing”> Such utility class </div>
<div class=“my-cool-component”> Much CSS </div> <div class=“my-cool-component u-text-no-smoothing”> Very stylesheets
</div> <div class=“my-cool-component u-background-meta”> Such utility class </div>
Our app Lets us work quickly Easy to maintain Looks
awesome
Cheers!