Opened 13 years ago
Closed 13 years ago
#21379 closed enhancement (fixed)
Twenty Twelve: CSS and markup improvements for better child theme support
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | 3.5 | Priority: | normal |
Severity: | normal | Version: | |
Component: | Bundled Theme | Keywords: | |
Focuses: | Cc: |
Description
- 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).
- Simplify selectors to be less specific overall (things like
nav.main-navigation
become.main-navigation
). (From matiasventura.) - 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 othernav
elements inside the content container. (From matiasventura.) - Add inline comments next to each calculated rule with rem units and line heights, like
/* 12 / 24 */
. (From drewstrojny.) - 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)
#2
@
13 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 r21326
I'm on board with the other three points, and have nothing to add.
#3
@
13 years ago
- Cc xoodrew@… added
#1: I've read up on this quite a bit and the consensus tends to be split.
- The Sass users like to use the @media 'bubbling' inline because it outputs directly below that style (mixed).
- 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.
#5
@
13 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.
#8
@
13 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
#9
follow-up:
↓ 11
@
13 years ago
@lancewillett: Are styles for hr, big, del, ins and the comment form button on your radar?
#12
in reply to:
↑ description
@
13 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.
- 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.
- 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.
In [21326]: