Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Part of the CSS Cleanup: http://drupal.org/node/1089868
Overview of Goals
- Make it easy to remove unwanted design assumptions in the theme layer, while maintaining critical functionality (such as functional JavaScript widgets).
- Prevent uneeded administrative styles from loading on the front end.
- Give modules the ability to include a generic design implementation with their module, without burdening themers.
- 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.
- 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.
- 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.
- 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 {}
overdiv.style {}
where possible. - Use
.module .style {}
overdiv.module div.somenestedelement .style
where possible.
- Use
- 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.
- 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.
- Start with Stark and cross-browser test.
- "Design" markup and CSS for the Stark theme.
- If applicable, adapt the styles to match the core themes afterward.
- Finally, test the changes in all supported browsers and ensure no regressions are introduced.
Comment | File | Size | Author |
---|---|---|---|
#8 | poll-css-8.patch | 6.51 KB | aspilicious |
#7 | poll-css-7.patch | 5.55 KB | aspilicious |
#5 | poll-css.patch | 5.48 KB | aspilicious |
#1 | 1217032-poll-separate-css-files.patch | 2.86 KB | tars16 |
Comments
Comment #1
tars16 CreditAttribution: tars16 commentedFirst attempt. Should we include the changes to the info file in these patches?
Did not do anything with the RTL styles.
Comment #2
tars16 CreditAttribution: tars16 commentedComment #3
TR CreditAttribution: TR commentedYes, the changes to .info should be in the patch.
Please read the Drupal CSS coding standards and use them in your patch: http://drupal.org/node/302199
Also, watch out for that "No newline at end of file" that you're putting in. Drupal coding standards say you should always have a newline at the end of the file.
Comment #4
bleen CreditAttribution: bleen commentednote that this and #1229442: Convert poll tpls and markup to HTML5 are going to bump heads ... no big deal, but which ever gets committed first will require a reroll of the other
Comment #5
aspilicious CreditAttribution: aspilicious commentedIt's possible this is incorrect as I'm a newb with creating command line patches
Comment #6
amateescu CreditAttribution: amateescu commentedpoll => Poll :) The same for every occurence.
Otherwise, tested the patch and it looks good to me.
Edit: Also needs a reroll to account for #1315616: A definition list for the poll results.
24 days to next Drupal core point release.
Comment #7
aspilicious CreditAttribution: aspilicious commentedSecond try
Comment #8
aspilicious CreditAttribution: aspilicious commentedBartik rtl love :)
Comment #9
amateescu CreditAttribution: amateescu commentedLooks good to me now.
Comment #10
webchickTagging for Jennifer.
Comment #11
jhodgdonIt doesn't look like any of the patches in the critical/major queue conflict with this, so I went ahead and committed it. Thanks!
Comment #12.0
(not verified) CreditAttribution: commentedUpdated issue summary.