[wp-meta] [Making WordPress.org] #1015: DevHub: Better sass structure

[Making WordPress.org]

#1015: DevHub: Better sass structure
---------------------------+----------------------------
 Reporter:  atimmer        |       Owner:  kevinwhoffman
     Type:  task           |      Status:  assigned
 Priority:  normal         |   Milestone:
Component:  Developer Hub  |  Resolution:
 Keywords:  needs-patch    |
---------------------------+----------------------------

Comment (by kevinwhoffman):

 My recommendation for the Sass structure is ITCSS (Inverted Triangle CSS).
 ITCSS is a sane, scalable, managed architecture for CSS that was put
 forward by Harry Roberts (a.k.a. [http://csswizardry.com/ csswizardry]).
 Below I have summarized Harry's presentation regarding structure, goals,
 theory, and outcomes of ITCSS. I also included additional resources if
 you'd like to learn more. Looking forward to hearing your feedback.

 == Structure ==

 1. Settings: Global variables, config switches.
 2. Tools: Default mixins and functions.
 3. Generic: Ground-zero styles (Normalize.css, resets, box-sizing).
 4. Base: Unclassed HTML elements (type selectors).
 5. Objects: Cosmetic-free design patterns.
 6. Components: Designed components, chunks of UI.
 7. Trumps: Helpers and overrides.

 Each level gets its own directory. Files within each directory are
 imported to main.scss. The end result is a main.scss file that is entirely
 composed of neatly organized partials.

 == Goals ==

 * A sane environment that is accessible to lots of people.
 * To tame and manage source order and the cascade.
 * To create a place for everything to live (new and old).
 * To reduce waste and redundancy.
 * To end the Specificity Wars.

 == Theory ==

 * Specificity slowly increases layer-by-layer.
 * We affect smaller and smaller bits of the DOM at a time.
 * Progressively adding styles; never undoing.

 == Outcomes ==

 * Everything has a place to live.
 * People know where to look to find types of rule.
 * A sane source oder.
 * Reduced waste/redundancy.
 * Increased scalability.
 * The Specificity Wars are over!


 == Additional Info ==

 * [https://www.youtube.com/watch?v=1OKZOV-iLj4 ITCSS Presentation]
 * [http://csswizardry.net/talks/2014/11/itcss-dafed.pdf ITCSS Slides]
 * [https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
 ITCSS in Practice]

--
Ticket URL: <https://meta.trac.wordpress.org/ticket/1015#comment:10>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org