WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#21379 closed enhancement (fixed)

Twenty Twelve: CSS and markup improvements for better child theme support

Reported by: lancewillett Owned by:
Milestone: 3.5 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords:
Focuses: Cc:

Description

  1. Move all @media queries to bottom of document. Better in one place at the bottom for both specificity reasons (last in the file) and for organization (easier to find and modify).
  2. Simplify selectors to be less specific overall (things like nav.main-navigation become .main-navigation). (From matiasventura.)
  3. Add classes like .site .site-content in addition to the set of IDs already present such as #page #main #primary #secondary #comments. This allows elements selected with #content nav to become .site-content nav -- making things much better for child themes to have things like other nav elements inside the content container. (From matiasventura.)
  4. Add inline comments next to each calculated rule with rem units and line heights, like /* 12 / 24 */. (From drewstrojny.)
  5. For bonus points: "with all the fonts rem based it’d be neat to see floated image margins match the text’s rem-based image margins." (From themeshaper.)

Change History (12)

comment:1 @lancewillett3 years ago

In [21326]:

Twenty Twelve: add explanatory notes to top of style.css for the use of rem and pixel units for font-size and line-height values, props drewstrojny. See #21379.

comment:2 @drewstrojny3 years ago

# 1. This is somewhat a personal preference issue, but in my experience I prefer to keep the queries with the original styles. I feel it fits better with the mobile first approach. This is obviously easier to manage when you are using Sass and have nice, clean modular stylesheets to work with, so I understand if folks would prefer moving them.

# 4. This should be resolved with #21326

I'm on board with the other three points, and have nothing to add.

Version 0, edited 3 years ago by drewstrojny (next)

comment:3 @DrewAPicture3 years ago

  • Cc xoodrew@… added

#1: I've read up on this quite a bit and the consensus tends to be split.

  1. The Sass users like to use the @media 'bubbling' inline because it outputs directly below that style (mixed).
  2. Others prefer to group them together to reduce taxing from all of the requests. On a SO thread I found reference to a new auditing tool in Canary that allows you to see how long it takes each selector to run. Might be worth a couple of runs to see which is more efficient.

Personally, I like it when they're all grouped together because I don't have to hunt all of them down.

comment:4 @obenland3 years ago

  • Cc konstantin@… added

comment:5 @lancewillett3 years ago

  • Keywords needs-patch removed

In [21401] Twenty Twelve: CSS and markup improvements for better child theme support, part 1. Move all media queries to bottom of document.

Last edited 3 years ago by SergeyBiryukov (previous) (diff)

comment:6 @lancewillett3 years ago

In [21402]:

Twenty Twelve: CSS and markup improvements for better child theme support, part 2. See #21379.

  • Allow image alignment to apply anywhere, not just entry content area
  • Remove unneeded hgroup header and nav selectors

comment:7 @lancewillett3 years ago

In [21404]:

Twenty Twelve: CSS and markup improvements for better child theme support, part 3. See #21379.

  • Add classes like .site and .site-content in addition to the set of IDs already present, making things much better for child themes to have more than one generic element like nav inside the content container.
  • Bump JS version after selector change.
  • Move image-attachment to post_class() output

More exhaustive notes in the ticket on each id and class change.

comment:8 @lancewillett3 years ago

Details on id and class changes for step 3, see r21404.

  • s/#main/.wrapper/
  • s/#site/.site/
  • s/#primary/.site-content/
  • s/#content/.main-content/
  • s/#comments/.comments-area/
  • s/#comments-title/.comments-title/
  • s/#secondary/.widget-area/
  • s/#secondary aside/.widget-area .widget/
  • s/.widget ul ul/.widget-area .widget ul ul/
  • s/#nav-single/.nav-single/
  • add .navigation class to all navigation elements except main navigation

comment:9 follow-up: @obenland3 years ago

@lancewillett: Are styles for hr, big, del, ins and the comment form button on your radar?

comment:10 @lancewillett3 years ago

In [21405] Twenty Twelve: fix navigation selectors as the change in r21404 broke the small navigation menu behavior.

comment:11 in reply to: ↑ 9 @lancewillett3 years ago

Replying to obenland:

@lancewillett: Are styles for hr, big, del, ins and the comment form button on your radar?

I think you posted a note on that to #21376, I can look at it as part of that ticket.

comment:12 in reply to: ↑ description @lancewillett3 years ago

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

This CSS cleanup is done, please open new issues in new tickets.

Replying to lancewillett:

1.
2.
3.

Done.

  1. Add inline comments next to each calculated rule with rem units and line heights, like /* 12 / 24 */. (From drewstrojny.)

Added to stylesheet as a note block in r21326.

  1. For bonus points: "with all the fonts rem based it’d be neat to see floated image margins match the text’s rem-based image margins." (From themeshaper.)

Going to punt on this one.

Note: See TracTickets for help on using tickets.