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)



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



“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


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 {}


On the same page???



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


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.

  • 14,565
Loading comments...

More from heydon