Part of the CSS Cleanup: http://drupal.org/node/1089868

Overview of Goals

  1. Make it easy to remove unwanted design assumptions in the theme layer, while maintaining critical functionality (such as functional JavaScript widgets).
  2. Prevent uneeded administrative styles from loading on the front end.
  3. Give modules the ability to include a generic design implementation with their module, without burdening themers.
  4. Make CSS and related markup more efficient and less intrusive to improve the themer experience.

The CSS Clean-up Process

Use the following guidelines when writing patches for the core issues listed below.

  1. Put CSS is in the appropriate file: CSS should be moved to separate files, using the following
    name spacing conventions based on their purpose:
    module.base.css
    Should hold structural and behavior related styling. CSS should be coded against the Stark theme. The absolute bare minimum CSS required for the module to function should go here. If there is no CSS required, this file should be omitted.
    module.theme.css
    Should hold generic design-related styles that could be used with Stark and other themes. It's where all design assumptions like backgrounds, borders, colors, fonts, margins, padding, etc, would go.
    module.admin.css
    Should hold styles that are only applicable to administrative pages.

    To see an example of this in practice, look at Drupal's system module.

  2. Remove Assumptions: Styles that make too many assumptions, introduce superflous margins, padding and add things like font settings are not necessary and don't belong in core module CSS files. In cases where core themes depend on these properties, they should be moved to the CSS stylesheet of the respective theme.
  3. Reduce Selector Specificity: CSS code that resides in modules should be written in a way that's easily overridable in the theme layer. To improve the Themer Experience and make core CSS more efficient, CSS selectors should be made as general and short as possible. For example:
    • Use .style {} over div.style {} where possible.
    • Use .module .style {} over div.module div.somenestedelement .style where possible.
  4. Don't use IDs in selectors: Use of ID's in core CSS selectors requires more specificity in the theme layer, making it harder and more annoying to deal with. It makes achieveing consistency in complex design implementations much harder than it needs to be. We need to stop making life hard for theme developers.
  5. Don't be afraid to change markup: There's lots of overlap between using proper and semantic markup and doing CSS right. If you come across a case where CSS is being applied where using a more semantic elements would solve the problem, then change the markup in your patch to make it right. For more information, see the Drupal 8 Markup Gate rules.
  6. Start with Stark and cross-browser test.
    1. "Design" markup and CSS for the Stark theme.
    2. If applicable, adapt the styles to match the core themes afterward.
    3. Finally, test the changes in all supported browsers and ensure no regressions are introduced.
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

karschsp’s picture

Can you provide a little more guidance on this? Currently, the CSS for tracker is:

.page-tracker td.replies {
  text-align: center;
}
.page-tracker table {
  width: 100%;
}
jyve’s picture

Assigned: Unassigned » jyve
Status: Active » Needs review
FileSize
903 bytes

The css in this tracker seems useless to me, so I would simply remove it entirely. Patch attached does just that.

Jacine’s picture

I completely agree. Both Bartik & Seven add the 100% width for tables, so there's no difference there. Do you think we should add the center alignment of the replies column to the core themes? I'm learning towards no, but I'm curious what others think.

jyve’s picture

I don't think anyone would want to add this 'center' alignment if it weren't there, so I don't see a reason to keep it since it was put there in the past. Just my 50 cents :)

xjm’s picture

Status: Needs review » Needs work
Issue tags: +Novice

I agree with #4.

Note that we need a reroll in this on account of #22336: Move all core Drupal files under a /core folder to improve usability and upgrades. Tagging as novice for that.

I think this is RTBC once it is rerolled.

jyve’s picture

Status: Needs work » Needs review
FileSize
938 bytes

Patch rerolled for the new folder structure.

xjm’s picture

Status: Needs review » Reviewed & tested by the community

Thanks!

Jacine’s picture

Awesome. Another one bites the dust!! :D

catch’s picture

I completely agree. Both Bartik & Seven add the 100% width for tables, so there's no difference there.

Stark doesn't - does this make a lot of difference to how the tracker looks in stark? As long as it's still legible I'm happy committing this but it'd be good to know.

karschsp’s picture

Here are some before and after screenshots.

Before

tracker-no-css-stark-before.png

After

tracker-no-css-stark-after.png

catch’s picture

Status: Reviewed & tested by the community » Fixed

Thanks for the screenshots. I love that 'clean up' means 'remove the entire file' in this case. Committed and pushed to 8.x.

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

Issue summary: View changes

Updated issue summary.