I know morten likes to complain about the CSS in Drupal core. And while he does love arguing, its much easier to change the CSS in core if we have useful metrics to show why the CSS is crappy.

Stubbornella (Nicole Sullivan) has been a long-time advocate of simple CSS to improve front-end performance. Complex selectors take more time for browsers to match against them. Needlessly-complex selectors lead to crazy cold-war-scenario specificity escalation as each rule tries to out-specify the more general rules.

She has also just released an open-source tool called csslint that we can use to test our current CSS rules.


There's bound to be some contentious rules in this lint tool (there always are in lint tools), but it gives us a starting point to measure.

[edit: 2011/06/17]
Here's the current list of Drupal 8 core’s stylesheets. As specific issues are created for each stylesheet, we can edit this list to point at the issues.


Subscribe. Agreed as good starting point.

Subscribe. Interested in seeing how this will be implemented.

Sidenote: Does this also mean that selectors (ids, classes etc) need to be altered too? Maybe interesting to look at additional ways to minify and cleanup the css code OOCSS for example. Or will that be a step too far for implementing in core.

... And after that we just need to move the entire Core CSS into a "Core Theme"... Please?!

Subscribing. Sounds good to have a guideline to follow, especially in the world of CSS.

Would be extremely nice to have a built-in patch checker for this at drupal.org. Like we currently have for PHP tests. Ideally one checks manually before uploading the patch, but it could automate part of the reviewing process.

+1 :)

+1 Sounds good to me!

Hopefully this will lead to applying OOCSS principles to Drupal.

I am all for this!

Cool, over the past year or so I've become a big fan of lint tools, so +1.

I don't think there is any problem getting buy-in on this issue - so maybe my initial question is scope. What I might suggest is we start running our CSS through these lint tools to get a documented list of issues - this will give us some scope and may well offer some inspiration on how we can improve on the current situation with core CSS.

What I might suggest is..

1. get a list of all core CSS
2. create a list of suitable lint tools
3. create a meta issue and break it down into separate issues per module/stylesheet
4. run the tests
5. collate the results and see what we come up with

Could even be a sprint.

3. create a meta issue and break it down into separate issues per module/stylesheet

I believe that's what this issue is. :-)

1. get a list of all core CSS

I've got one of those in Zen’s drupal7-reference.css file. (Assuming no one has changed the D8 list yet.) I went ahead and put this in the initial issue description above to make tracking the changes a bit easier.


Issue tags:+Front end

There's an initiative page for cleaning up CSS here. It'd be great to add some info about CSS Lint and the core stylesheets to that page. I'll do it if no one else gets to it first. I also think it'd be awesome to get it in our automated patch testing as @mverbaar mentioned. Tagging "Front end" to get this on the radar of people that are interested in helping out with this via @drupalfrontend.


The page I referred to in #12 was updated after the HTML5 Initiative meeting today. @johnvsc created all the issues and linked them in a table here for those interested in helping: http://drupal.org/node/1089868

Oh yes

I'm going to try to resurrect this issue.

Happy I found this issue.

I'm going to "explode" this issue to each of the stylesheets this weekend (Saturday) if it's still a good idea. For the most part, this effort is inline with the CSS cleanup efforts of the HTML5 initiative. using CSSLint at http://csslint.net provides a quick way to code-sniff our css and tweak styles until they pass the tests.

So, as I see it, what needs to be done is:

1. Create an issue for each of the stylesheets that are mentioned in the OP
2. For each stylesheet copy and paste the it into the online tool and test it.
3. Fix any warnings or errors
4. Create a patch and see if the patch passes Drupal's automated tests.
5. Debate about the changes.

Issue summary:View changes

added link to online css lint tool.

Issue summary:View changes

Updated issue summary.

Probably. If it's the exact same "robotic" changes just in lots of different files though, it might be easier to review/commit as a single patch. If we're talking a 500K+ patch, then probably not since the re-rolls alone would be really irritating.

Might as well try it and see what we end up with then go from there.

Thanks a lot for chiming in on this, webchick. I anticipate it will likely be a very large patch if all the changes a rolled into one. There has been a great deal of effort to clean things up (noted in the issue summary). But my guess is that css lint will still have a boat load of changes suggested.

Issue summary:View changes

Updated issue summary.

Title:Use csslint as a weapon to beat the crappy CSS out of Drupal coreMeta: Use csslint as a weapon to beat the crappy CSS out of Drupal core

I ran CSSLint through node, and this is the result.

Ahh. that's good.

There also a CSS Cleaup mission. Some of them are duplicated issue

Aren't we cleaning up the core themes CSS as well?

btw, here's how I roll: find core/modules/openid/ -type f -name *.css -exec csslint {} \;

Issue summary:View changes

Updated issue summary.

Issue summary:View changes

Updated issue summary.

Issue summary:View changes

removing openid issue - it's still valid in the contrib openid but not relevant for this core meta-issue.

I just created #2222049: Add a .csslintrc file that's in line with our CSS standards. It would be nice to get some opinions please