WordPress.org

Making WordPress.org

Opened 3 years ago

Last modified 10 months ago

#1015 assigned task

DevHub: Better sass structure

Reported by: atimmer Owned by: kevinwhoffman
Milestone: Priority: normal
Component: Developer Hub Keywords: needs-patch
Cc:

Description

Currently all styles are in one file, it would be better to bring some structure to this.

I prefer to structure it like the php files, single-post.scss, single-parsable.scss, single-archive.scss, etc. With some mixins to get the responsiveness.

Attachments (1)

itcss-structure.png (41.1 KB) - added by kevinwhoffman 16 months ago.
ITCSS Structure

Download all attachments as: .zip

Change History (23)

#1 @atimmer
3 years ago

  • Component changed from General to developer.wordpress.org

#2 @atimmer
3 years ago

  • Type changed from defect to enhancement

#3 @Otto42
3 years ago

  • Resolution set to invalid
  • Status changed from new to closed

I believe that you're posting these in the wrong place. This is the meta.trac, we talk about various bits and components of the WordPress.org website itself here. If you have any core enhancements, you should use the core.trac instead.

#4 @atimmer
3 years ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

#5 @atimmer
3 years ago

Because I cannot change the ticket, more clarification here about the ticket:

This ticket is about the developer.wordpress.org theme that is located here: https://meta.trac.wordpress.org/browser/sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer

#6 @DrewAPicture
3 years ago

  • Summary changed from Better sass structure to DevHub: Better sass structure

This ticket was mentioned in Slack in #meta-devhub by drew. View the logs.


17 months ago

#8 @DrewAPicture
17 months ago

  • Owner set to kevinwhoffman
  • Status changed from reopened to assigned
  • Type changed from enhancement to task

This ticket was mentioned in Slack in #meta-devhub by drew. View the logs.


17 months ago

#10 @kevinwhoffman
16 months ago

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

@kevinwhoffman
16 months ago

ITCSS Structure

This ticket was mentioned in Slack in #meta-devhub by kevinwhoffman. View the logs.


16 months ago

This ticket was mentioned in Slack in #meta by kevinwhoffman. View the logs.


16 months ago

This ticket was mentioned in Slack in #meta-devhub by drew. View the logs.


16 months ago

This ticket was mentioned in Slack in #meta-devhub by kevinwhoffman. View the logs.


16 months ago

#15 @mapk
16 months ago

I am totally on board with this! I imagine that each level gets its own directory b/c it will be broken into separate files based on purpose or pattern.

Can we get some steps around this? Or a process for implementation?

@obenland created a structure for the new Plugin Directory here: (maybe we can utilize some of this in a more global way?) https://meta.trac.wordpress.org/browser/sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/styles

I'm getting ready to start styling the Support Forums and b/c these are separate themes, until this new structure gets implemented, I'm going to be duplicating a lot of sass/css and the grunt file stuff into the bbPress theme - which is just crazy BTW.

#16 @obenland
16 months ago

I'm happy to take a stab at a parent theme with grunt tasks to compile styles from child themes next week

#17 @obenland
16 months ago

In 3879:

WP.org Theme: Introduce a parent theme for future wp.org themes.

Allows us to bundle components in a central place for all themes to use.
CSS us built on Inverted Triangle CSS logic.

See #1015.

#18 @kevinwhoffman
16 months ago

@obenland Great work. What is the protocol for adding objects or components to the parent theme? Should we instruct developers to mimic this CSS architecture in the child themes, and then we can shift objects or components to the parent theme if they offer value to the other sites? As an example, a table-of-contents component that is currently in the DevHub theme could be leveraged in other sites.

#19 @obenland
16 months ago

I'd like to avoid setting up a protocol or guidelines for now and rather have it evolve organically.

The existing Gruntfile encourages a similar setup as in the parent theme, so I think that'll come automatically. Components probably shouldn't move up to the parent until they're used by at least one other site. The downside of being to liberal with globalized components is not only bloat but, more importantly, unforeseen style changes. See the wp4.css dilemma.
Once a component gets globalized, other child themes might have to be updated to exclude that component from their build tree.

With the parent theme in place now, would you be interested in rewriting the devhub theme to use it?

This ticket was mentioned in Slack in #meta-devhub by keesiemeijer. View the logs.


16 months ago

#21 @obenland
10 months ago

In 4879:

WPorg Theme: Add ES6 Promise polyfill for Postcss.

See #1015.

#22 @obenland
10 months ago

In 4880:

Learn: Update theme to be a child theme of wporg.

See #1015.

Note: See TracTickets for help on using tickets.