GETTING NOWHERE WITH
CSS BEST PRACTICES
@heydonworks
BEST PRACTICE
- ultimate procedure
- unbeatable action
- exceptional method
Anything can not be best practice
BEST PRACTICE = QUALITY
CSS BEST PRACTICE TOPICS
-
readability
- efficiency
- maintainability
Readability
(a) AGREED formatting
h1 {
font-family: headings, serif;
color: black; font-size: 2.5em; }
Readability
(a) AGREED formatting
h1 {
font-family: headings, serif;
color: black; font-size: 2.5em; }
meanwhile, in dev tools...
h1 { line 06 main.css
color: #000000;
font-family: headings, serif;
font-size: 2.5em;
}
OR
ONE DAY
YOU WILL
DIE
THIS COULD BREAK A BUILD:
BUT THIS MOST LIKELY WON'T:
<div class="button">click me, baby</div>
MORE THINGS THAT COULD BREAK A BUILD
- Using ID selectors
- Concatenating classes
- Using a unit on a zero value
- Using !important
-
Qualifying headings (using descendant selectors)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heydon/images/479307/gofuck.png)
h1 {
font-family: Asshole Script, cursive;
}
TESTS PASSED ✔
BEST?
Readability
(B) NAMING CONVENTIONS
ie. "SEMANTICS"
What Makes For A Semantic Class Name?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heydon/images/475586/coyier.png)
109 COMMENTS
“I never considered whether class 'left' or 'right' was semantic or not, but I suppose it is not. I feel like my world is falling down around me”
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heydon/images/707714/left_right_4.png)
HTML IS THE INTERFACE
CSS IS JUST THE BRANDING
“SEMANTIC” CLASSES ARE FOR DEVELOPERS
SEMANTIC HTML IS FOR USERS
THE ENDLESS DEBATE...
- .nav ?
-
.menu ?
- .main-nav ?
- .menu-primary ?
-
.nav-primary ?
.nav--primary ?
YOU'RE LOOKING FOR...
✔<nav>
✔role="navigation"
AAAAND YOU STYLE THEM WITH...
✔nav
✔[role="navigation"]
THE !IMPORTANT PART
PRESENT: [role="navigation"] in the CSS
NOT PRESENT: role="navigation" in the HTML
- home
- about
- shop
- contact
States
“A state is something that augments and overrides all other styles. For example, an accordion section may be in a collapsed or expanded state.”
SMACSS
ACTIVE TABS IN SMACSS
.tab {
background-color: purple;
color: white;
}
.is-tab-active {
background-color: white;
color: black;
}
ACTIVE TABS IN SMACSS
.tab {
background-color: purple;
color: white;
}
.is-tab-active {
background-color: white;
color: black;
}
Classes only define appearance of state
ASSISTive TECH USERS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heydon/images/658222/philosophy_tab.jpg)
GENUINELY SEMANTIC;
PERTAINS TO SPEC/DICTIONARY
[role="tab"] {
background-color: purple;
color: white;
}
[role="tab"][aria-selected] {
background-color: white;
color: black;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heydon/images/660252/tabsies.png)
.tabs-blue {}
.tabs-black {}
.tabs-orange {}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heydon/images/479742/tab_styles.png)
On the same page???
W3C Best Practice
“Tie CSS display property to WAI-ARIA hidden state”
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heydon/images/479357/W3C.jpg)
WAI-ARIA Authoring Practices
ACTUALLY BEST PRACTICE
[aria-hidden="true"] { display: none; }
Complete list of states
- aria-busy
- aria-grabbed
-
aria-invalid
- aria-checked
- aria-disabled
- aria-expanded
- aria-hidden
- aria-invalid
- aria-pressed
- aria-selected
...WITH EASY TO REMEMBER SELECTORS
- [aria-busy]
- [aria-grabbed]
-
[aria-invalid]
- [aria-checked]
- [aria-disabled]
- [aria-expanded]
- [aria-hidden]
- [aria-invalid]
- [aria-pressed]
- [aria-selected]
STATE VERSUS TYPE
“But my application has 20 different button types.
How do I differentiate all of those
without classes??”
WITH TEXT
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heydon/images/490493/buttons.png)
Supported since IE1
EFFICIENCY
FAST SELECTORS
ARE BEST PRACTICE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heydon/images/679265/orly_owl.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heydon/images/684586/topcoat.png)
<a class="topcoat-button">Button</a>
“RAZOR FOCUSED ON PERFORMANCE”
CONCURRENT ANIMATIONS?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heydon/images/533333/concurrent.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heydon/images/662411/dennis.png)
YOU ARE FINE
EVERYTHING IS FINE
MAINTAINABILITY
(modularity)
OUR BIGGEST PREOCCUPATION = MANAGING COMPLEXITY
- pre-processors
- OOCSS
- BEM etc.
- In-house code QA etc.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heydon/images/673647/web_new_animation.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heydon/images/469901/client.png)
GOOD JOB, SON!
WHICH IS BETTER?
“WEB DESIGNER”
↓
“FRONT-END
DEVELOPER”
A Front-end Developer asks
HOW SHOULD I DO THIS?
A Designer asks
HOW
SHOULD I DO THIS?
424 LINKS
ALL PART OF BEST PRACTICES
YET DOING NOTHING WOULD
HAVE BEEN BETTER
Not part of best practices
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heydon/images/685078/tab.jpg)
Getting Nowhere with CSS Best Practices
By heydon
Getting Nowhere with CSS Best Practices
A look at the conventions and processes we incorporate into making web content presentable and how little they affect users of our products.
- 21,935