Architecting CSS

E47e6ed7d8d33fee920bdd45973d0570?s=47 Chris Basham
August 25, 2014

Architecting CSS

Presented at IxDA Bloomington, Chris Basham discusses CSS best practices and workflows. Learn how class naming conventions and rigorous file organization can help teams understand and be quickly familiar with unfamiliar styles. Discover how to integrate pre-processors into your build process to increase productivity and prepare styles for production.

Mon, Aug 25, 2014

http://www.meetup.com/IxDA-Bloomington/events/198163982/

E47e6ed7d8d33fee920bdd45973d0570?s=128

Chris Basham

August 25, 2014
Tweet

Transcript

  1. Architecting CSS Chris Basham

  2. SPECIFICITY

  3. Specificity is how the browser prioritizes conflicting { property: values

    }
  4. Specificity is calculated by the type & quantity of each

    part of the selector
  5. http://specificity.keegan.st

  6. Some selectors are commonly misused !

  7. Some selectors are commonly misused ! Let’s investigate

  8. P R I O R I T Y O F

    S E L E C T O R T Y P E S 1 <inline styles=“”/> 2 #ids {} 3 .classes {} 4 elements {}
  9. P R I O R I T Y O F

    S E L E C T O R T Y P E S 1 <inline styles=“”/> − CSS embedded in HTML − no reuse !
  10. P R I O R I T Y O F

    S E L E C T O R T Y P E S 1 <inline styles=“”/> −2 2 #ids {} 3 .classes {} 4 elements {}
  11. P R I O R I T Y O F

    S E L E C T O R T Y P E S ! 2 #ids {} + no coupling − no reuse
  12. P R I O R I T Y O F

    S E L E C T O R T Y P E S 1 <inline styles=“”/> −2 2 #ids {} +0 3 .classes {} 4 elements {}
  13. P R I O R I T Y O F

    S E L E C T O R T Y P E S ! ! 3 .classes {} + no coupling + infinite reuse
  14. P R I O R I T Y O F

    S E L E C T O R T Y P E S 1 <inline styles=“”/> −2 2 #ids {} +0 3 .classes {} +2 4 elements {}
  15. P R I O R I T Y O F

    S E L E C T O R T Y P E S ! ! − CSS dictates HTML 4 elements {} ~ limited reuse
  16. P R I O R I T Y O F

    S E L E C T O R T Y P E S 1 <inline styles=“”/> −2 2 #ids {} +0 3 .classes {} +2 4 elements {} −0.5
  17. P R I O R I T Y O F

    S E L E C T O R T Y P E S 1 <inline styles=“”/> 2 #ids {} 3 .classes {} 4 elements {}
  18. Adore .classes Distrust #ids & elements Eradicate <inline styles=“”/>

  19. Using only .classes reduces specificity escalation ! !

  20. Using only .classes reduces specificity escalation ! But .nested .selectors

    > .are + .still ~ .problematic
  21. Never .nest .your .classes Rather, .flatten-your-classes ! !

  22. Never .nest .your .classes Rather, .flatten-your-classes ! Specificity escalation averted

  23. To practically use this .class-flattening-to-prevent- specificity-escalation method, we must practice

    rigor
  24. NAMING CONVENTION

  25. event name date (today) location

  26. .event .name .date .date.today .location

  27. .event .event .name .event .date .event .date.today .event .location

  28. .event .event-name .event-date .event-date--today .event-location

  29. IxDA event name date (today) location

  30. .ixda-event .ixda-event-name .ixda-event-date .ixda-event-date--today .ixda-event-location

  31. .ixda-Event .ixda-Event-name .ixda-Event-date .ixda-Event-date--today .ixda-Event-location

  32. .ixda-Event-date--today {}

  33. .ixda -Event -date --today {}

  34. .<namespace> -<Component> -<descendant> --<modifier> {}

  35. .<namespace> param-case -<Component> PascalCase -<descendant> camelCase --<modifier> {} camelCase

  36. .<namespace> suggested -<Component> required -<descendant> contextual --<modifier> {} contextual

  37. .ixda-Event {} .ixda-Event-date {} .ixda-Event-date--today {} .ixda-Event-location {} .ixda-Event-name {}

  38. B Y S M A R T LY U S

    I N G H Y P H E N S & C A S I N G : Selectors become more legible Relationships are better understood Styles feel self-contained & modular
  39. PRE-PROCESSORS

  40. Pre-processors extend the syntax & functionality of CSS

  41. Pre-processors compile these enhancements into CSS

  42. P O P U L A R P R E

    - P R O C E S S O R S Less Myth Rework Sass Stylus
  43. M Y P R E F E R E N

    C E Less ! ! Sass
  44. P R E - P R O C E S

    S O R B E N E F I T S Functions Importing Mixins Nesting & parent selectors Variables
  45. B E N E F I T S N E

    E D E D F O R T H I S T E C H N I Q U E ! Importing ! Nesting & parent selectors
  46. /* .css */ .ixda-Event {} .ixda-Event-date {} .ixda-Event-date--today {} .ixda-Event-location

    {} .ixda-Event-name {} !
  47. // .less or .scss .ixda-Event { &-date { &--today {}

    } &-location {} &-name {} }
  48. Nest with parent selectors (&) to keep styles D.R.Y. !

  49. Nest with parent selectors (&) to keep styles Don’t Repeat

    Yourself
  50. ORGANIZATION

  51. src/ core/ modules/ main.less ! !

  52. src/ core/ foundation modules/ main.less ! !

  53. src/ core/ foundation modules/ components main.less ! !

  54. src/ core/ foundation modules/ components main.less import everything ! !

  55. src/ core/ base.less mixins.less variables.less !

  56. src/ modules/ ixda/ Event.less util/ Grid.less

  57. src/main.less ! @import ‘core/base’; @import ‘core/mixins’; @import ‘core/variables’; @import ‘modules/ixda/Event’;

    @import ‘modules/util/Grid’;
  58. Pair naming convention <div class=“ixda-Event”/> ! with file organization src/modules/ixda/Event.less

  59. You’ll never forget where you put your .classy-Toys, again

  60. P.S.

  61. No { property: merits !important }

  62. Chris Basham @chrisbasham ! I X D A B L

    O O M I N G T O N 
 A U G U S T 2 0 1 4