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/

Transcript

1. Architecting CSS
   Chris Basham
   

   View Slide

2. SPECIFICITY
   

   View Slide

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

   View Slide

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

   View Slide

5. http://specificity.keegan.st
   

   View Slide

6. Some selectors
   are commonly misused
   !
   

   View Slide

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

   View Slide

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 
   2 #ids {}
   3 .classes {}
   4 elements {}
   

   View Slide

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 
   − CSS embedded in HTML
   − no reuse
   !
   

   View Slide

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  −2
    2 #ids {}
    3 .classes {}
    4 elements {}
    

    View Slide

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
    

    View Slide

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  −2
    2 #ids {} +0
    3 .classes {}
    4 elements {}
    

    View Slide

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
    

    View Slide

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  −2
    2 #ids {} +0
    3 .classes {} +2
    4 elements {}
    

    View Slide

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
    

    View Slide

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  −2
    2 #ids {} +0
    3 .classes {} +2
    4 elements {} −0.5
    

    View Slide

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 
    2 #ids {}
    3 .classes {}
    4 elements {}
    

    View Slide

18. Adore .classes
    Distrust #ids & elements
    Eradicate
    

    View Slide

19. Using only .classes reduces
    specificity escalation
    !
    !
    

    View Slide

20. Using only .classes reduces
    specificity escalation
    !
    But .nested .selectors > .are
    + .still ~ .problematic
    

    View Slide

21. Never .nest .your .classes
    Rather, .flatten-your-classes
    !
    !
    

    View Slide

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

    View Slide

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

    View Slide

24. NAMING CONVENTION
    

    View Slide

25. event
    name
    date
    (today)
    location
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. IxDA event
    name
    date
    (today)
    location
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

34. .
    -
    -
    -- {}
    

    View Slide

35. . param-case
    - PascalCase
    - camelCase
    -- {} camelCase
    

    View Slide

36. . suggested
    - required
    - contextual
    -- {} contextual
    

    View Slide

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

    View Slide

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
    

    View Slide

39. PRE-PROCESSORS
    

    View Slide

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

    View Slide

41. Pre-processors compile these
    enhancements into CSS
    

    View Slide

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
    

    View Slide

43. M Y P R E F E R E N C E
    Less
    !
    !
    Sass
    

    View Slide

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
    

    View Slide

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
    

    View Slide

46. /* .css */
    .ixda-Event {}
    .ixda-Event-date {}
    .ixda-Event-date--today {}
    .ixda-Event-location {}
    .ixda-Event-name {}
    !
    

    View Slide

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

    View Slide

48. Nest with parent selectors (&)
    to keep styles D.R.Y.
    !
    

    View Slide

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

    View Slide

50. ORGANIZATION
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

58. Pair naming convention
    
    !
    with file organization
    src/modules/ixda/Event.less
    

    View Slide

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

    View Slide

60. P.S.
    

    View Slide

61. No
    { property: merits !important }
    

    View Slide

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
    

    View Slide