GETTING NOWHERE WITH

CSS BEST PRACTICES

@heydonworks

BEST PRACTICE

• ultimate procedure
• unbeatable action
  
• exceptional method

Anything can not be best practice

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)
  

h1 {
   font-family: Asshole Script, cursive;
}

TESTS PASSED ✔ 

BEST?

Readability

(B) NAMING CONVENTIONS

ie. "SEMANTICS"

What Makes For A Semantic Class Name?

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”

HTML IS THE INTERFACE
CSS IS JUST THE BRANDING

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

GENUINELY SEMANTIC;
PERTAINS TO SPEC/DICTIONARY

[role="tab"] {
    background-color: purple;
    color: white;
}

[role="tab"][aria-selected] {
    background-color: white;
    color: black;
}

.tabs-blue {}
.tabs-black {}
.tabs-orange {}

W3C Best Practice

“Tie CSS display property to WAI-ARIA hidden state”

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

Supported since IE1

EFFICIENCY

FAST SELECTORS
ARE BEST PRACTICE

<a class="topcoat-button">Button</a>

“RAZOR FOCUSED ON PERFORMANCE”

CONCURRENT ANIMATIONS?

YOU ARE FINE
EVERYTHING IS FINE

MAINTAINABILITY

(modularity)

OUR BIGGEST PREOCCUPATION = MANAGING COMPLEXITY

• pre-processors
• OOCSS
• BEM etc.
• In-house code QA etc.
  

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