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