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
Pattern Placeholders
Search
Jaime Caballero
January 21, 2015
Programming
3
65
Pattern Placeholders
Thinking about the ways of using @extend and placeholders.
Jaime Caballero
January 21, 2015
Tweet
Share
Other Decks in Programming
See All in Programming
SIMD Parallel Programming with the Vector API
josepaumard
0
170
Hanami and htmx
bkuhlmann
0
210
ONE WEDGE_company_guide
1wedge_one
0
480
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
920
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
0
220
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
170
見た目から始める生産性向上
ikumatadokoro
7
840
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
650
Ruby Function Composition
bkuhlmann
1
330
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
Thoughts on Productivity
jonyablonski
58
3.8k
GraphQLとの向き合い方2022年版
quramy
32
12k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
Product Roadmaps are Hard
iamctodd
44
9.7k
Docker and Python
trallard
34
2.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
42k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Transcript
%Pattern Placeholders Jaime Caballero - LDN Sass #2 GIF Source:
giphy.com 21/01/2015
None
hi, I’m jaime
jamie james jiame jaime
None
None
• spanish • frontend architect • sass lover
None
None
None
this is me when I’m using Sass
None
this is me when somebody hands me over vanilla CSS
None
me gusta • SMACSS • OOCSS • DRYCSS • BEM
I worry a lot about keeping my CSS scalable and
organised
this is me going through my CSS workflow
None
let’s talk about @extend 1.
@extend combines selectors
.foo
.foo{ color: black; }
.another
.another{ color: black; }
.another{ @extend .foo; }
.another{ @extend .foo; background: white; }
.foo, .another{ color: black; } .another{ background: white; }
combining selectors means no repeating CSS chunks
this is me when I discovered @extend
None
BUT!
we can’t extend without a selector, can we?
.foo{ color: black; }
None
introducing placeholder selectors 2.
if you don’t @extend them, they will not be in
the CSS
.foo
%foo
%foo{ color: black; }
you can have anything in one place, ready to use
BUT!
i’m not here to say @extend FTW
None
all this has its limitations
you can’t extend in a @media query
%foo{ color: black; } @media (min-width: 20em){ .another{ @extend %foo;
} }
you can easily get loads of selectors
a.icon-listen-bl:hover, .event-related .box-title a:hover, .category-related .box-title a:hover, .readmore a:hover, .footer
a:hover, .pagination a:hover, .news a:hover, .latest-tweet .date a:hover, .feature .box-header .title a:hover, .caption .title a:hover, .full-agenda-link a:hover,
that was 46 selectors for 1 property
i like to call this aggressive extending
this is me when i see any of it
None
we are the problem 3.
people are complaining
None
BUT!
we are the ones extending the wrong way
we have to think outside the box
embrace these limitations
you can’t extend in a @media query?
but you can put a media query in a placeholder
%foo{ color: black; } @media (min-width: 20em){ .another{ @extend .foo;
} }
%foo{ }
%foo{ @media (min-width: 20em){ } }
%foo{ @media (min-width: 20em){ color: black; } }
%foo{ @media (min-width: 20em){ color: black; } } .another{ @extend
%foo; }
@media (min-width: 20em){ .another{ color: black; } }
implement placeholder patterns
%nav-fixed{…} %nav-offcanvas{…} %nav-footeranch{…} .nav{ @extend %nav-fixed; }
%nav-fixed{…} %nav-offcanvas{…} %nav-footeranch{…} .nav{ @extend %nav-offcanvas; }
%nav-fixed{…} %nav-offcanvas{…} %nav-footeranch{…} .nav{ @extend %nav-footeranch; }
placeholders for everything
%foo{…} %foo--good{…} %foo--bad{…}
combine them
.Foo.is-good{ @extend %foo; @extend %foo--good; }
separate them
.Foo{ @extend %foo; } .is-good{ @extend %foo--good; }
BEM? SUITCSS? whatever works
None
placeholder patterns add another abstraction layer
you can create naming-agnostic CSS systems
when you only use placeholders
it’s easier to notice a repeated/wrong pattern
.button--action{ @extend %btn; @extend %btn--big; @extend %bg--green; }
BUT!
what about agressive extending ?
agressive extending: fixed 4.
what if we could limit the amount of selectors
?
None
actually, we need to set a selector budget
a warning when we don’t extend properly
a weekend after (last weekend)
this is me after last weekend
None
jaicab.com/ext/
the ext(); mixin sets a selector budget and warns you
(@warn) when you are:
extending too much
extending the same pair (selector, placeholder) more than once
extending twice doesn’t affect your CSS, but it is a
bad organisation practise
this is how it works
&
html, .foo, .another
$selectors: &;
getting started
bower install ext
@import the _ext.scss file into your project
set your selector budget
$ext-budget: ( total: 15 );
it only works with placeholders
use ext(placeholder);
%foo{ color: black; } .another{ @include ext(foo); }
go nuts!
None
None
is @warn not enough?
enable debug mode
add ext-debug(); after all your @imports
None
None
set a targeted budget
$ext-budget: ( total: 15, heading: 12 );
want to see more? change the options
$ext-options: ( warn-over: true, warn-duplicates: true, over-only: true, show-all: true
);
None
there’s much more
but enough for today
None
go to github.com/jaicab/ext/
None
play with it open an issue send me a pull
request fire me a tweet
thank you! jaicab.com/ext/ @jaicab_ Links: http://bit.ly/1JeTmtr