Achieving consistency in large CSS projects — FullStackLX #2

André Luís
André LuísFrontend Engineering Manager at GitLab
Achievingconsistency
inlarge CSSprojects
@andr3
FullStackLX#2
Dec. 7th '2016
http://meet.andr3.net

me@andr3.net
OH HAI!
Achieving consistency in large CSS projects — FullStackLX #2
CONSISTENCY

CONSISTENCY

inlargeCSSprojects
consistent

(adj.) /kənˈsɪst(ə)nt/
acting or done in the same
way over time, especially so
as to be fair or accurate.
👀💻
code visuals
👀💻
code visuals
Maintainability

Predictability

Stability
👀💻
code visuals
Maintainability

Predictability

Stability
Usability

Branding

Personality
SharedResponsibility
👀💻
code visuals
CSSStats


http://cssstats.com

Gulp/Grunt (with PostCSS)
How can we measure?
How can we measure?How can we measure?
2016
2014Fixed layout.

Using SCSS.

Before redesign with consistency in mind.
Responsive/fixed layout (progressive redesign).

Using SCSS.

After redesign.

A lot more components, content, pages, etc.

From Fixed to Responsive (medium.com) ➡
seedrs.com
seedrs.com
cssstats.com
cssstats.com
How can we measure?How can we measure?
2016
2014
How can we measure?How can we measure?
43%
22%
31%
29%
29%
40%
57%
46%
8%
34% 55%
28%
2016
2014
How can we measure?How can we measure?
2016
2014
How?
Achieving consistency in large CSS projects — FullStackLX #2
1.TypographicScale
Achieving consistency in large CSS projects — FullStackLX #2
Robert Bringhurst
Don’tcompose
withoutascale
Robert Bringhurst
Don’tcompose
withoutascale
In the sixteenth century, a series of
common sizes developed among
European typographers, and the
series survived with little change
and few additions for 400 years. […]
Use the old familiar scale,
or use new scales of your
own devising, but limit
yourself, at first, to a
modest set of distinct and
related intervals.”



—

in The Elements of Typographic Style

by Robert Bringhurst
$type-scale-base: 1rem;
$type-scale-adjustments: (
extra-small: -0.25,
small: -0.125,
normal: 0,
medium: 0.125,
large: 0.5,
huge: 1,
extra-huge: 2,
extra-extra-huge: 3,
);
_config.scss
// Usually*:
// 12px
// 14px
// 16px
// 18px
// 24px
// 32px
// 48px
// 64px
@function type-scale($size) {
@if map-has-key($type-scale-adjustments, $size) {
$adjust: map-get($type-scale-adjustments, $size);
$actual-size: $type-scale-base + $adjust;
@return $actual-size;
} @else {
@return $type-scale-base;
}
}
_typography-mixins.scss
font-size: type-scale(extra-small);
font-size: type-scale(small);
font-size: type-scale(normal);
font-size: type-scale(medium);
…


// If you want, create a mixin for easier use: 

// @include type-scale(large);
Howtouseit:
font-size: type-scale(extra-small);
font-size: type-scale(small);
font-size: type-scale(normal);
font-size: type-scale(medium);
…


// If you want, create a mixin for easier use: 

// @include type-scale(large);
Howtouseit:
padding-top: type-scale(large);
Achieving consistency in large CSS projects — FullStackLX #2
2.Verticalspacing scale
Achieving consistency in large CSS projects — FullStackLX #2
Achieving consistency in large CSS projects — FullStackLX #2
Achieving consistency in large CSS projects — FullStackLX #2
Achieving consistency in large CSS projects — FullStackLX #2
Achieving consistency in large CSS projects — FullStackLX #2
before
after
before
after
margin
margin
before
after
margin
margin
padding
padding
$vertical-space-values: (
extra-small: 0.5,
small: 1,
medium: 1.5,
large: 2.5,
huge: 4,
extra-huge: 6
);
_config.scss
// In rems. Usually*:
// 8px
// 16px
// 24px
// 40px
// 64px
// 96px
@function vertical-space($space) {
$space-value: map-get($vertical-space-values, $space);
@return #{$space-value}rem;
}



@mixin before-padding($space) {
padding-top: vertical-space($space);
}

@mixin before-margin($space) {
margin-top: vertical-space($space);

}
_typography-mixins.scss
.example {
@include before-padding(small);
@include after-padding(small);
@include before-margin(large);
@include after-margin(large);
}



// For convenience, create mixins like: 

// @include before-and-after-padding(small);
// @include before-and-after-margin(large);
Howtouseit:
3.Container paddings(horizontal)
small screens large screens
$container-paddings: (
small: 1,
medium: 2,
large: 3
);
_config.scss
// in multiples
// of gutters
@function container-padding($size) {
$multiplier: 1;
@if map-has-key($container-paddings, $size) {
$multiplier: map-get($container-paddings, $size);
}
@return $multiplier * gutter();
}
_grid-mixins.scss
@function container-padding($size) {
$multiplier: 1;
@if map-has-key($container-paddings, $size) {
$multiplier: map-get($container-paddings, $size);
}
@return $multiplier * gutter();
}
_grid-mixins.scss
varies depending

on the context

(small/large).
@mixin container-padding($size) {
$value: container-padding($size);
padding-left: $value;
padding-right: $value;
}
_grid-mixins.scss
.example {
@include container-paddings(small);
}
Howtouseit:
.another {
padding: vertical-spacing(huge) container-paddings(small);
}
Semi-manualchecks via bookmarklet
4.Colorpaletteswithalpha
Name your colors.
$color1
$primary-color
$color-red
http://chir.ag/projects/name-that-color/#4AA6FF
http://vmi.u7.xsl.pt
http://sipapp.io/
http://vmi.ud.xsl.pt
Achieving consistency in large CSS projects — FullStackLX #2
$palette: (
"celery-green": (
x-light: #e5f1d5,
light: #cce4ac,
mid-light: #b2d683,
base: #99c95a,
mid-dark: #7fbb30,
dark: #6fa32b,
x-dark: #5c8723
),
"dodger-blue": (
x-light: #e8f4ff,
light: #d1e8ff,
_colors.scss
@function color($hue, $tone: "base") {
$color: rgba(204, 255, 0, 0.2);

@if map-has-key($palette, $hue) {
$palette-color: map-get($palette, $hue);
@if map-has-key($palette-color, $tone) {
$color: map-get($palette-color, $tone);
}
}
@return $color;
}
_colors.scss
.example {
color: color(celery-green, x-dark);
}
Howtouseit:
$alpha-palette: (
"black": #000,
"white": #fff,
"corn-yellow": #edb800,
"sky-blue": #1d8fff
);
_colors.scss
$alpha-levels: (
"0": 0,
"10": 0.1,
"20": 0.2,
"40": 0.4,
"60": 0.6,
"80": 0.8,
"100": 1
);
@function alpha-color($hue, $alpha: "100") {
$color: rgba(204, 255, 0, 0.2);
@if map-has-key($alpha-palette, $hue) {
$palette-color: map-get($alpha-palette, $hue);
@if map-has-key($alpha-levels, $alpha) {
$color: rgba($palette-color, map-get($alpha-levels, $alpha));
}
}
@return $color;
}
_colors.scss
.example {
color: alpha-color(black, 80);
}
Howtouseit:
5.Namingconvention
2016
2014
.section {
.header {
.logo a {
…
}
.image {
…
}
}
…
}
Before
.Component {
…
}
.Component-logo {
…
}
.Component-coverImage {
…
}
After
BEM
SUIT
block element modifier
.block
.block__element
.block__element--modifier
.Component
.Component-subComponent
.Component--modifier

.is-transientState

.u-tilityClasses
BEM
SUIT style… for ui… tools… you know.
block element modifier
.block
.block__element
.block__element--modifier
.Component
.Component-subComponent
.Component--modifier

.is-transientState

.u-tilityClasses
Whichisbest?
Itdepends.

But use one that lowers specificity.
This next one should go
without saying but…
6.LintyourSCSS/less/css
That’sprettymuchit,
lintit.Noexcuses.
That’sprettymuchit,
lintit.Noexcuses.
Exceptions must be

followed by a reason.
// scss-lint:disable NestingDepth
// Reason: This rule depends on the
// state of the previous item. No way
// to minimize depth here.
CONSISTENCY

inlargeCSSprojects
In conclusion...
“We shape our buildings
and afterward our
buildings shape us."

—

Winston Churchill
We become what we
behold. First we
shape our tools,
thereafter they
shape us.



—

Marshall McLuhan
"SHAPEY0’SELVES."
BeforeIgo...
THANKYOU
Achievingconsistency
inlarge CSSprojects
@andr3
FullStackLX#2
Dec. 7th '2016
http://meet.andr3.net

me@andr3.net
http://talks.andr3.net/2016/consistency.pdf
cbna
http://codepen.io/andr3pt/pen/pNVVdG
Lalezar, SuperClarendon & Fira Code
1 of 76

Recommended

"InfiniteD, sem óculos" Transmedia por Jorge Oliveira // Upload Lisboa 2012 by
"InfiniteD, sem óculos" Transmedia por Jorge Oliveira // Upload Lisboa 2012"InfiniteD, sem óculos" Transmedia por Jorge Oliveira // Upload Lisboa 2012
"InfiniteD, sem óculos" Transmedia por Jorge Oliveira // Upload Lisboa 2012Active Media
1K views30 slides
The Secret Life of Forms by
The Secret Life of FormsThe Secret Life of Forms
The Secret Life of FormsIvan Wilson
23.7K views101 slides
[Brazil] guia internet_marketing (1) by
[Brazil] guia internet_marketing (1)[Brazil] guia internet_marketing (1)
[Brazil] guia internet_marketing (1)Ricardo Belchior
466 views32 slides
Set n'match by
Set n'matchSet n'match
Set n'matchPedro Santos
676 views19 slides
Customer Development - Entrepreneurs Break by
Customer Development - Entrepreneurs BreakCustomer Development - Entrepreneurs Break
Customer Development - Entrepreneurs BreakPedro Oliveira
2.5K views44 slides
Comportamento do Consumidor by
Comportamento do ConsumidorComportamento do Consumidor
Comportamento do ConsumidorMaycom Soares
713 views4 slides

More Related Content

Viewers also liked

Beta start @ beside by
Beta start @ besideBeta start @ beside
Beta start @ besideSofia Pessanha
363 views34 slides
Apresentação Grão Torrado by
Apresentação Grão TorradoApresentação Grão Torrado
Apresentação Grão TorradoMiguel Monteiro
542 views34 slides
Delivering presentations - dicas de apresentação (not!) by
Delivering presentations - dicas de apresentação (not!)Delivering presentations - dicas de apresentação (not!)
Delivering presentations - dicas de apresentação (not!)Pedro Moura
337 views26 slides
Business Model Canvas at Fim de semana de empreendedorismo AEFEUP by
Business Model Canvas at Fim de semana de empreendedorismo AEFEUPBusiness Model Canvas at Fim de semana de empreendedorismo AEFEUP
Business Model Canvas at Fim de semana de empreendedorismo AEFEUPRafael Pires
1.1K views46 slides
Prosolvers CH by
Prosolvers CHProsolvers CH
Prosolvers CHMarta Oliveira
198 views2 slides
Pt precisa saber sobre FI by
Pt precisa saber sobre FIPt precisa saber sobre FI
Pt precisa saber sobre FIMário Valente
326 views14 slides

Viewers also liked(19)

Delivering presentations - dicas de apresentação (not!) by Pedro Moura
Delivering presentations - dicas de apresentação (not!)Delivering presentations - dicas de apresentação (not!)
Delivering presentations - dicas de apresentação (not!)
Pedro Moura337 views
Business Model Canvas at Fim de semana de empreendedorismo AEFEUP by Rafael Pires
Business Model Canvas at Fim de semana de empreendedorismo AEFEUPBusiness Model Canvas at Fim de semana de empreendedorismo AEFEUP
Business Model Canvas at Fim de semana de empreendedorismo AEFEUP
Rafael Pires1.1K views
TEDxMatosinhos - À Bolina by Last2ticket
TEDxMatosinhos - À BolinaTEDxMatosinhos - À Bolina
TEDxMatosinhos - À Bolina
Last2ticket341 views
Funding ideas in a globally connected world – a social approach by Tomé Duarte
Funding ideas in a globally connected world – a social approachFunding ideas in a globally connected world – a social approach
Funding ideas in a globally connected world – a social approach
Tomé Duarte392 views
Novas Regras Domínios .PT 2014 - DNS.PT by Teotonio Leiras
Novas Regras Domínios .PT 2014 - DNS.PTNovas Regras Domínios .PT 2014 - DNS.PT
Novas Regras Domínios .PT 2014 - DNS.PT
Teotonio Leiras1.2K views
Talk ja ye-nuno_freitas_1set2012 by Nuno Freitas
Talk ja ye-nuno_freitas_1set2012Talk ja ye-nuno_freitas_1set2012
Talk ja ye-nuno_freitas_1set2012
Nuno Freitas548 views
Como produzir um artigo de referencia para a wikipedia (manuel de sousa) by Manuel de Sousa
Como produzir um artigo de referencia para a wikipedia (manuel de sousa)Como produzir um artigo de referencia para a wikipedia (manuel de sousa)
Como produzir um artigo de referencia para a wikipedia (manuel de sousa)
Manuel de Sousa436 views
LawRD(PortuguêS) by Luís Vaz
LawRD(PortuguêS)LawRD(PortuguêS)
LawRD(PortuguêS)
Luís Vaz323 views
Pitch Like a Boss by Inês Silva
Pitch Like a BossPitch Like a Boss
Pitch Like a Boss
Inês Silva816 views

Similar to Achieving consistency in large CSS projects — FullStackLX #2

SASS is more than LESS by
SASS is more than LESSSASS is more than LESS
SASS is more than LESSItai Koren
1.2K views32 slides
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}} by
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}Eric Carlisle
2.6K views41 slides
SASS, Compass, Gulp, Greensock by
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockMarco Pinheiro
1.3K views43 slides
Houdini - What lies ahead by
Houdini - What lies aheadHoudini - What lies ahead
Houdini - What lies aheadArun Michael Dsouza
136 views67 slides
Responsive with SASS and compass by
Responsive with SASS and compassResponsive with SASS and compass
Responsive with SASS and compassDavid Malinowicz
1.4K views22 slides
Bridging the gap between designers and developers at the Guardian by
Bridging the gap between designers and developers at the GuardianBridging the gap between designers and developers at the Guardian
Bridging the gap between designers and developers at the GuardianKaelig Deloumeau-Prigent
10.7K views85 slides

Similar to Achieving consistency in large CSS projects — FullStackLX #2(20)

SASS is more than LESS by Itai Koren
SASS is more than LESSSASS is more than LESS
SASS is more than LESS
Itai Koren1.2K views
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}} by Eric Carlisle
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
Eric Carlisle2.6K views
SASS, Compass, Gulp, Greensock by Marco Pinheiro
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
Marco Pinheiro1.3K views
Bridging the gap between designers and developers at the Guardian by Kaelig Deloumeau-Prigent
Bridging the gap between designers and developers at the GuardianBridging the gap between designers and developers at the Guardian
Bridging the gap between designers and developers at the Guardian
Dallas Drupal Days 2012 - Introduction to less sass-compass by Chris Lee
Dallas Drupal Days 2012  - Introduction to less sass-compassDallas Drupal Days 2012  - Introduction to less sass-compass
Dallas Drupal Days 2012 - Introduction to less sass-compass
Chris Lee2K views
Advanced Technology for Web Application Design by Bryce Kerley
Advanced Technology for Web Application DesignAdvanced Technology for Web Application Design
Advanced Technology for Web Application Design
Bryce Kerley728 views
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass by Claudina Sarahe
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassBringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Claudina Sarahe3K views
Hardboiled Front End Development — Found.ation by Spiros Martzoukos
Hardboiled Front End Development — Found.ationHardboiled Front End Development — Found.ation
Hardboiled Front End Development — Found.ation
Spiros Martzoukos7.6K views
CSS Workflow. Pre & Post by Anton Dosov
CSS Workflow. Pre & PostCSS Workflow. Pre & Post
CSS Workflow. Pre & Post
Anton Dosov273 views
Scss talk CSS Meetup by Caleb Yang
Scss talk CSS Meetup Scss talk CSS Meetup
Scss talk CSS Meetup
Caleb Yang85 views
How Sass Can Simplify Responsive Design by alanhogan
How Sass Can Simplify Responsive DesignHow Sass Can Simplify Responsive Design
How Sass Can Simplify Responsive Design
alanhogan1.1K views
CSS Extenders by Idan Gazit
CSS ExtendersCSS Extenders
CSS Extenders
Idan Gazit4.6K views
LESS(CSS Pre Processor) introduction by rushi7567
LESS(CSS Pre Processor) introductionLESS(CSS Pre Processor) introduction
LESS(CSS Pre Processor) introduction
rushi7567242 views
Less(CSS Pre Processor) Introduction by rushi7567
Less(CSS Pre Processor) IntroductionLess(CSS Pre Processor) Introduction
Less(CSS Pre Processor) Introduction
rushi756758 views

More from André Luís

Designers & Developers by
Designers & DevelopersDesigners & Developers
Designers & DevelopersAndré Luís
1.2K views50 slides
Responsive Web Design: Uma História das Trincheiras (sapo.pt) by
Responsive Web Design: Uma História das Trincheiras (sapo.pt)Responsive Web Design: Uma História das Trincheiras (sapo.pt)
Responsive Web Design: Uma História das Trincheiras (sapo.pt)André Luís
2.9K views142 slides
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT by
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PTLições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PTAndré Luís
1.9K views98 slides
Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivas by
Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivasDr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivas
Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivasAndré Luís
1.7K views80 slides
We're not designing posters, here! by
We're not designing posters, here!We're not designing posters, here!
We're not designing posters, here!André Luís
1.9K views88 slides
Dr. © - How I learned to stop worrying and love fair-use licenses by
Dr. © - How I learned to stop worrying and love fair-use licensesDr. © - How I learned to stop worrying and love fair-use licenses
Dr. © - How I learned to stop worrying and love fair-use licensesAndré Luís
1.4K views87 slides

More from André Luís(11)

Designers & Developers by André Luís
Designers & DevelopersDesigners & Developers
Designers & Developers
André Luís1.2K views
Responsive Web Design: Uma História das Trincheiras (sapo.pt) by André Luís
Responsive Web Design: Uma História das Trincheiras (sapo.pt)Responsive Web Design: Uma História das Trincheiras (sapo.pt)
Responsive Web Design: Uma História das Trincheiras (sapo.pt)
André Luís2.9K views
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT by André Luís
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PTLições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
André Luís1.9K views
Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivas by André Luís
Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivasDr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivas
Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivas
André Luís1.7K views
We're not designing posters, here! by André Luís
We're not designing posters, here!We're not designing posters, here!
We're not designing posters, here!
André Luís1.9K views
Dr. © - How I learned to stop worrying and love fair-use licenses by André Luís
Dr. © - How I learned to stop worrying and love fair-use licensesDr. © - How I learned to stop worrying and love fair-use licenses
Dr. © - How I learned to stop worrying and love fair-use licenses
André Luís1.4K views
HTML5 - A nova era da Web by André Luís
HTML5 - A nova era da WebHTML5 - A nova era da Web
HTML5 - A nova era da Web
André Luís3.3K views
Microformatos - 2009 - Juntando as Peças do Puzzle by André Luís
Microformatos - 2009 - Juntando as Peças do PuzzleMicroformatos - 2009 - Juntando as Peças do Puzzle
Microformatos - 2009 - Juntando as Peças do Puzzle
André Luís7.3K views
Javascript, Done Right by André Luís
Javascript, Done RightJavascript, Done Right
Javascript, Done Right
André Luís1.3K views
Microformatos - juntando as peças do puzzle by André Luís
Microformatos - juntando as peças do puzzleMicroformatos - juntando as peças do puzzle
Microformatos - juntando as peças do puzzle
André Luís1.4K views
Microformatos - pequenas peças do puzzle by André Luís
Microformatos - pequenas peças do puzzleMicroformatos - pequenas peças do puzzle
Microformatos - pequenas peças do puzzle
André Luís1.5K views

Recently uploaded

The Dark Web : Hidden Services by
The Dark Web : Hidden ServicesThe Dark Web : Hidden Services
The Dark Web : Hidden ServicesAnshu Singh
14 views24 slides
Affiliate Marketing by
Affiliate MarketingAffiliate Marketing
Affiliate MarketingNavin Dhanuka
17 views30 slides
How to think like a threat actor for Kubernetes.pptx by
How to think like a threat actor for Kubernetes.pptxHow to think like a threat actor for Kubernetes.pptx
How to think like a threat actor for Kubernetes.pptxLibbySchulze1
5 views33 slides
Marketing and Community Building in Web3 by
Marketing and Community Building in Web3Marketing and Community Building in Web3
Marketing and Community Building in Web3Federico Ast
14 views64 slides
ATPMOUSE_융합2조.pptx by
ATPMOUSE_융합2조.pptxATPMOUSE_융합2조.pptx
ATPMOUSE_융합2조.pptxkts120898
35 views70 slides
Building trust in our information ecosystem: who do we trust in an emergency by
Building trust in our information ecosystem: who do we trust in an emergencyBuilding trust in our information ecosystem: who do we trust in an emergency
Building trust in our information ecosystem: who do we trust in an emergencyTina Purnat
110 views18 slides

Recently uploaded(9)

The Dark Web : Hidden Services by Anshu Singh
The Dark Web : Hidden ServicesThe Dark Web : Hidden Services
The Dark Web : Hidden Services
Anshu Singh14 views
How to think like a threat actor for Kubernetes.pptx by LibbySchulze1
How to think like a threat actor for Kubernetes.pptxHow to think like a threat actor for Kubernetes.pptx
How to think like a threat actor for Kubernetes.pptx
LibbySchulze15 views
Marketing and Community Building in Web3 by Federico Ast
Marketing and Community Building in Web3Marketing and Community Building in Web3
Marketing and Community Building in Web3
Federico Ast14 views
ATPMOUSE_융합2조.pptx by kts120898
ATPMOUSE_융합2조.pptxATPMOUSE_융합2조.pptx
ATPMOUSE_융합2조.pptx
kts12089835 views
Building trust in our information ecosystem: who do we trust in an emergency by Tina Purnat
Building trust in our information ecosystem: who do we trust in an emergencyBuilding trust in our information ecosystem: who do we trust in an emergency
Building trust in our information ecosystem: who do we trust in an emergency
Tina Purnat110 views
IETF 118: Starlink Protocol Performance by APNIC
IETF 118: Starlink Protocol PerformanceIETF 118: Starlink Protocol Performance
IETF 118: Starlink Protocol Performance
APNIC414 views

Achieving consistency in large CSS projects — FullStackLX #2