Remove unused/unneeded selectors #129

silverwind · 2014-03-22T11:25:44Z

I'm sure that at least 20-30% of our selectors aren't used any more on GitHub's HTML. We'll have to cross-match our selectors to the GitHub stylesheets, and remove any which aren't used anymore by GitHub.

These are the current stylesheets they use:

https://github.global.ssl.fastly.net/assets/github2-f14002c8b8c821aeaeaf37b52de1d6c4d29dc214.css
https://github.global.ssl.fastly.net/assets/github-dd2e4ab77e94896e4418f4dd1d11ce1efb595fd1.css

This will probably break a few things like cases where we use .child and the original style uses .parent .child, but It'll be worth it in the long run.

The text was updated successfully, but these errors were encountered:

silverwind · 2014-03-22T11:27:56Z

css-parse might prove handy here.

Mottie · 2014-03-26T13:02:52Z

I was just thinking about this... just a quick Google search resulted in these finds:

Dust-Me Selectors (Firefox addon)
Chrome Dev Tools
CSS Scanner
LiquidCity
Helium-css
Deadweight (probably out-of-date)
CSSESS (Bookmarklet; doesn't work across multiple pages)

Other interesting finds:

TopStyle5 - allows adding comments to group selectors; but not paying $99 for it.

The Firefox addon might be the most promising... I'll try some when I get some free time.

silverwind · 2014-03-26T20:45:08Z

So you'd navigate through all pages and then compare the collected selectors to the style? That would be an approach I haven't though about yet, but It'll probably be the most efficient as it also weeds out any unused stuff in GH's stylesheet. Nice ;)

Mottie · 2014-04-06T02:23:10Z

This looks like an interesting article: Spring-cleaning unused css

silverwind · 2014-04-06T07:15:17Z

Sadly, I don't think that approach would work, as we don't have access to the templates which GH uses. Also, they probably set a ton of classes in JS, which only show up once certain conditions are met.

I still think some cross-matching between their .css sources and our .css might be our best bet.

Mottie · 2014-06-09T03:19:14Z

So, I'm going to be really really busy over the next few months, but I started work on "version 2" in which I basically scrapped 90% of the css and started over. I'll push the file github-dark-v2.css to the repo so you guys can mess around with it.

It needs A LOT of work still...

but essentially, I removed a bunch of selectors and replaced them all with .zzz as a placeholder. Then I slowly started adding stuff back and each new selector I added back now has a comment associated with it.

I've also combined a bunch of stuff and thought it would be easier to add exceptions instead of searching for all of something and changing it. For example this overall definition was added:

* {
    border-color: #444 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

And essentially all tables, articles, img, and spans (with exceptions) now have a transparent background:

/* === transparent background only === */
body > pre, #footer, table tr, img, div, table, article
, span:not(.mail-status):not([class*="color"]) /* all spans except issue label colors & top bar notification indicator & summary language color */
, .color-label span.name /* label @ https://github.com/StylishThemes/GitHub-Dark/issues */
, .drag-and-drop /* comment block (attach images by dragging & dropping) @ https://github.com/StylishThemes/GitHub-Dark/issues/### */
{
    background: transparent !important;
}

Notice that each line starts with a comma because it's easier than finding the end and adding it there when a new line is added. The selector is then followed by a comment about the selector and which page it is from.

This will likely make the css file much larger, but hopefully easier to maintain. And of course we can work on finding a way to compress the css, but leave in the userstyle variable comments.

I'm totally open to feedback/criticism or even just completely scrapping this idea and going at this from another direction.

silverwind · 2014-06-09T12:31:31Z

Haven't checked out all the changes yet, but:

This will likely make the css file much larger

Shouldn't the use of the universal selector reduce the code size (sans comments) a lot?

Mottie · 2014-06-09T12:32:56Z

Yeah, I meant the size would be larger because of the comments, not the css itself.

silverwind · 2014-06-09T13:28:36Z

We could do something like a pre-commit hook to run cssmin. Are you familiar with those?

Mottie · 2014-06-09T15:09:51Z

LOL no, I have no clue :P

silverwind · 2014-06-11T09:57:47Z

I like it, having each rule documented should make it easier to maintain in the long run.

I'll look into that pre-commit hook for minification.

Mottie · 2014-06-16T17:06:45Z

Ok, I think I'm getting close to being done with the v2 work. If any of you get a chance, please try it out and/or update it ;)

I made the default color orange just for testing - so I know which version I'm working on.

silverwind · 2014-06-16T17:18:06Z

The most tedious work will be getting all the text colors for <a>'s right. As you probably know, GitHub has a dedicated rule for any <a> which isn't blue. We should make sure to get most of them right (my guess is that v1 only gets about 80% of them right) before a release. It'll be worth it.

ddavison · 2014-06-16T17:21:49Z

including myself in the conversation to feel productive

silverwind · 2014-10-21T15:55:21Z

Revisiting this, I think a crude approach to remove dead style weight would be to start removing selectors on top of the selector list and fix what breaks.

To make this easier in the future, I'd suggest we always add new selectors to the end of a list instread of in-between.

Mottie · 2014-11-01T13:55:52Z

I had an idea about giving us a bit more space in the style to lessen our worry about hitting the size limit. I'm pretty sure that placeholder code doesn't count toward the 100k byte limit, so I could add another option on userstyles to include (default) or not include the language color styling section. It will basically replace the following block of css with a placeholder:

  /* custom language colors */
  .language-color[style$="#9DC3FF;"] {background-color: #ae8e00 !important}
  .language-color[style$="#6a40fd;"] {background-color: #00d7ae !important}
  .language-color[style$="#e3491a;"] {background-color: #bb8091 !important}
  .language-color[style$="#02f88c;"] {background-color: #ff6522 !important}
  .language-color[style$="#ca2afe;"] {background-color: #00a8bb !important}
  .language-color[style$="#bd79d1;"] {background-color: #d1d1d1 !important}
  .language-color[style$="#a67219;"] {background-color: #92bc82 !important}
  .language-color[style$="#6594b9;"] {background-color: #d1db00 !important}
  .language-color[style$="#36699B;"] {background-color: #d17d00 !important}
  .language-color[style$="#d4bec1;"] {background-color: #ffacd3 !important}
  .language-color[style$="#555555;"] {background-color: #ffbe74 !important}
  .language-color[style$="#5a25a2;"] {background-color: #c957ff !important}
  .language-color[style$="#f34b7d;"] {background-color: #ff0095 !important}
  .language-color[style$="#563d7c;"] {background-color: #7493bc !important}
  .language-color[style$="#3a81ad;"] {background-color: #ff8b78 !important}
  .language-color[style$="#db5855;"] {background-color: #00bdff !important}
  .language-color[style$="#244776;"] {background-color: #00b7e7 !important}
  .language-color[style$="#ed2cd6;"] {background-color: #869a00 !important}
  .language-color[style$="#3fb68b;"] {background-color: #a0bb50 !important}
  .language-color[style$="#fcd46d;"] {background-color: #ff00eb !important}
  .language-color[style$="#075ff1;"] {background-color: #ea9e84 !important}
  .language-color[style$="#98BAD6;"] {background-color: #ff6bb3 !important}
  .language-color[style$="#3ebc27;"] {background-color: #ff8da7 !important}
  .language-color[style$="#8a1267;"] {background-color: #00a4ff !important}
  .language-color[style$="#946d57;"] {background-color: #f48ddf !important}
  .language-color[style$="#6e4a7e;"] {background-color: #729c63 !important}
  .language-color[style$="#c065db;"] {background-color: #f29d55 !important}
  .language-color[style$="#0faf8d;"] {background-color: #e450ea !important}
  .language-color[style$="#b845fc;"] {background-color: #f64abe !important}
  .language-color[style$="#4d41b1;"] {background-color: #00b38e !important}
  .language-color[style$="#636746;"] {background-color: #c1af83 !important}
  .language-color[style$="#7b9db4;"] {background-color: #56a400 !important}
  .language-color[style$="#dbded5;"] {background-color: #ff4593 !important}
  .language-color[style$="#341708;"] {background-color: #a08f65 !important}
  .language-color[style$="#e4cc98;"] {background-color: #ffaaa5 !important}
  .language-color[style$="#a89b4d;"] {background-color: #9576ff !important}
  .language-color[style$="#82937f;"] {background-color: #cd7e37 !important}
  .language-color[style$="#e69f56;"] {background-color: #ff0041 !important}
  .language-color[style$="#29b544;"] {background-color: #f79c0d !important}
  .language-color[style$="#346d51;"] {background-color: #ff4169 !important}
  .language-color[style$="#a9188d;"] {background-color: #809b31 !important}
  .language-color[style$="#078193;"] {background-color: #00e0ff !important}
  .language-color[style$="#b07219;"] {background-color: #ee663a !important}
  .language-color[style$="#f7df1e;"] {background-color: #a0e700 !important}
  .language-color[style$="#a270ba;"] {background-color: #ff006b !important}
  .language-color[style$="#f5c800;"] {background-color: #3fbfdd !important}
  .language-color[style$="#004200;"] {background-color: #00d400 !important}
  .language-color[style$="#2584c3;"] {background-color: #c9a2de !important}
  .language-color[style$="#499886;"] {background-color: #008fff !important}
  .language-color[style$="#fa1fa1;"] {background-color: #b995ff !important}
  .language-color[style$="#bb92ac;"] {background-color: #ff97ff !important}
  .language-color[style$="#ce279c;"] {background-color: #00f824 !important}
  .language-color[style$="#c7a938;"] {background-color: #ccae53 !important}
  .language-color[style$="#0d3c6e;"] {background-color: #dd91ff !important}
  .language-color[style$="#ff2b2b;"] {background-color: #9d60ff !important}
  .language-color[style$="#37775b;"] {background-color: #ffa876 !important}
  .language-color[style$="#c9df40;"] {background-color: #00d400 !important}
  .language-color[style$="#3be133;"] {background-color: #00b5bb !important}
  .language-color[style$="#438eff;"] {background-color: #ff8a44 !important}
  .language-color[style$="#ff0c5a;"] {background-color: #d428ff !important}
  .language-color[style$="#cabbff;"] {background-color: #447cff !important}
  .language-color[style$="#5a63a3;"] {background-color: #d2ad00 !important}
  .language-color[style$="#6e03c1;"] {background-color: #95b3de !important}
  .language-color[style$="#f3ca0a;"] {background-color: #dda0b1 !important}
  .language-color[style$="#b0ce4e;"] {background-color: #7a9bff !important}
  .language-color[style$="#0298c3;"] {background-color: #00b261 !important}
  .language-color[style$="#066ab2;"] {background-color: #71a9ff !important}
  .language-color[style$="#d80074;"] {background-color: #ff6fe0 !important}
  .language-color[style$="#2779ab;"] {background-color: #ff6887 !important}
  .language-color[style$="#74283c;"] {background-color: #ffbfa4 !important}
  .language-color[style$="#cc5555;"] {background-color: #ff8618 !important}
  .language-color[style$="#91de79;"] {background-color: #f16600 !important}
  .language-color[style$="#3581ba;"] {background-color: #d16dbe !important}
  .language-color[style$="#44a51c;"] {background-color: #00b22b !important}
  .language-color[style$="#198ce7;"] {background-color: #00d54c !important}
  .language-color[style$="#ae17ff;"] {background-color: #ff3e00 !important}
  .language-color[style$="#ff9c2e;"] {background-color: #a9ba00 !important}
  .language-color[style$="#358a5b;"] {background-color: #ccc6ff !important}
  .language-color[style$="#cc0088;"] {background-color: #ed7aff !important}
  .language-color[style$="#701516;"] {background-color: #ff665a !important}
  .language-color[style$="#dea584;"] {background-color: #919191 !important}
  .language-color[style$="#7dd3b0;"] {background-color: #ff8757 !important}
  .language-color[style$="#1e4aec;"] {background-color: #a883bd !important}
  .language-color[style$="#0579aa;"] {background-color: #fbce00 !important}
  .language-color[style$="#5861ce;"] {background-color: #df6a92 !important}
  .language-color[style$="#007eff;"] {background-color: #ffb2ff !important}
  .language-color[style$="#596706;"] {background-color: #ff00bf !important}
  .language-color[style$="#dc566d;"] {background-color: #589d90 !important}
  .language-color[style$="#46390b;"] {background-color: #00b1ff !important}
  .language-color[style$="#e4cc98;"] {background-color: #68c64f !important}
  .language-color[style$="#45f715;"] {background-color: #b0b0b0 !important}
  .language-color[style$="#31859c;"] {background-color: #e96867 !important}
  .language-color[style$="#755223;"] {background-color: #c67f66 !important}
  .language-color[style$="#a54c4d;"] {background-color: #ba71ea !important}
  .language-color[style$="#543978;"] {background-color: #8886e9 !important}
  .language-color[style$="#ee7d06;"] {background-color: #a98e34 !important}
  .language-color[style$="#848bf3;"] {background-color: #ff0003 !important}
  .language-color[style$="#199c4b;"] {background-color: #a7bbff !important}
  .language-color[style$="#945db7;"] {background-color: #78bdb0 !important}
  .language-color[style$="#0098db;"] {background-color: #aaa5ff !important}
  .language-color[style$="#2700e2;"] {background-color: #87d6ff !important}
  .language-color[style$="#db5855;"] {background-color: #75c500 !important}
  .language-color[style$="#ffce3b;"] {background-color: #ffbd3a !important}
  .language-color[style$="#b0b77e;"] {background-color: #00d8dc !important}
  .language-color[style$="#7582D1;"] {background-color: #70e9a0 !important}
  .language-color[style$="#3a4040;"] {background-color: #44a42f !important}

I would then add the above css into a separate file so that the build process can add it more easily.

I'm hoping you guys are using the build process locally, if you aren't updating the style from userstyles.org.

This doesn't need to be done now. It's just an idea if the need arises.

silverwind · 2014-11-01T14:03:44Z

Could do that if the need arises, yes. Right now we still have plenty of space left after minifying, so to keep things simple (and so I can paste into Firefox's scratchpad straight from the source), I'd keep that block in there.

Mottie · 2014-11-01T14:28:15Z

In all honesty, it takes like 2 seconds to type in grunt and load the file it builds (or just use grunt watch); then copy & paste from the built file 😜

But yeah, we don't need to do it yet LOL

Mottie · 2014-11-13T04:19:56Z

Our code size was 100,517 one month ago.

Now we're up to 125,195 bytes uncompressed & 108,735 compressed! Where did we gain about 25k?

Mottie · 2014-11-13T05:03:14Z

Ok, I'm getting seriously frustrated here. I just moved the language colors block into a separate file - it will be added as an option on userstyles - and I got the file size down to 109,295 bytes compressed. How in the heck did it get 1k bigger after removing a huge chunk?!

Maybe we just need to add another style on userstyles and call it GitHub extra styling, or something.

Mottie · 2014-11-13T05:42:38Z

Ok, I got the minified size down to 101,175 bytes and just ran out of reasonable ideas... I'm getting really tired, and finally just got desperate, so I convert the following block:

  /* === Remove shadow === */
  h1, h2, h3, h4, pre, pre *, code, tt, li, p, input, a, th, .news, #footer ul.sosueme li.main, .more-repos, .button,
  .metabox em.placeholder, table.notifications, #download_button, .comment-count, em.date, input.search, #user-links,
  .upper_footer, .switcher > span:after, .upgrades td, .blog-feedback, .description, .nav-bar-tabs,
  .commit-ref, .pagination span, .mini-icon-advanced-search, .count, .select-menu-title, .sunken-menu a,
  .select-menu-button:after, #repo-message, .times, .sunken-menu, .sunken-menu-contents, .sunken-menu a .counter, .usage-bar dt,
  #user-links .name img, #common-issues, .upload-progress, .svg-tip, .meta, .flash, .flash-global, .ace_fold-widget,
  #files .file .meta .info span, .file-box .meta .info span, body#com #header, .search-filters, .usage-bar dd,
  .avatar-stack.multiple-avatars .avatar:last-child, .avatar-stack.multiple-avatars:before,
  .box-action, .file-diff-line, .file-code-lines, #adv_code_search .search-page-input, li.ssh-key .ssh-key-state-indicator.not-recent,
  #gist-form .gist-name-textbox, .labels .label, .octotree_views .octotree_view .octotree_view_header {
    text-shadow: none !important;
    box-shadow: none !important;
  }
  a, button, p, ul, li, dl.form label, .formbody label, .js-context-button, .footer-text, .octicon-mark-github,
  .minibutton span, span.name, .diff-line-code, .num, .user-list em, .diff-expander .octicon-unfold:hover,
  .select-menu-loading-overlay:before, .select-menu-item a, .minibutton, .mini-icon, .mini-icon:before, .list-tip:before,
  .line-num-content, .diff-expander .octicon-unfold, .minibutton i, .comment-header-author, .header, .gist .gist-file .gist-meta,
  .logo-placeholder, .branch-group-heading, .render-bar, .auth-form-header .octicon {
    text-shadow: none !important;
  }

into this

  * {
    text-shadow: none !important;
    box-shadow: none !important;
  }

and finally got the code under the limit on userstyles.

I have no idea what, or if I broke anything... I'll deal with it tomorrow.

silverwind · 2014-11-13T09:27:04Z

I'll write Jason to upgrade our size limit. I don't remember any recent change that would've added 20 kB right now.

silverwind · 2014-11-13T09:35:25Z

Hmm, I see around 96kB unminfied, 71kB minfied right now:

▕ -rw-r--r--▏37 sec │  88K│github-dark.css
▕ -rw-r--r--▏37 sec │ 7.7K│github-dark-language-colors.css
▕ -rw-r--r--▏<  sec │  71K│github-dark-userstyle.build.css

Mottie · 2014-11-13T13:18:44Z

I know, even the file size on the drive is 71Kb. I removed all the pygments styles and replaced it with the Ace editor styles which are even smaller. And I'm still not sure if that extra code is being counted towards that limit.

silverwind · 2014-11-13T16:57:03Z

The limit on userstyles was increased (to at least 200kB), so I'd say we include the highlights into the main style again!

silverwind · 2014-11-13T17:01:15Z

I'll try to revert these changes now.

Mottie · 2014-11-13T18:11:01Z

Sweet! thanks!... I'll start working on updating userstyles.

Mottie · 2015-03-24T15:22:18Z

GitHub has released their stylesheet!

https://github.com/primer/primer

I think we can use it as a reference to look for selectors and classes that have been removed.

silverwind · 2015-03-24T17:07:33Z

Woah, how unexpected of them, I've been asking for ages ;)

Not sure it's gonna help us with removing cruft, as Gist and company are still missing, but it's a start and will probably help us figure out updates more easily.

silverwind · 2015-10-18T13:19:28Z

uncss looks to be something worth investigating. We'd have to compile a huge list of all possible URLs for it to match our style against. I'm not sure it's really practical, as I don't see an authorization option where we could pass a GitHub session cookie, so it might be necessary to save alle html files locally. Still a lot of work to get right I assume, but it's the most promising tool I've found yet.

Mottie · 2015-10-18T13:42:06Z

I started a list of pages that I used to test against (getting lazy in my old age)... I haven't updated it in a while.

silverwind · 2015-10-18T13:45:04Z

That's a start, yes. But there's still a ton of special conditions that must be met so certain boxes appear and stuff. It's not something that should be done carelessly, and there's not real urge to it either ;)

Mottie · 2016-01-14T23:55:17Z

Has anyone tried css optimizer before? https://github.com/css/csso

It looks interesting.

silverwind · 2016-01-15T01:03:36Z

Quick test using the default options on each minifier, doesn't look like an improvement:

-rw-r--r--   1 silverwind users 102770 Jan 15 01:59 cleancss.css
-rw-r--r--   1 silverwind users 103208 Jan 15 01:59 csso.css
-rw-r--r--   1 silverwind users 130051 Jan 15 01:56 github-dark.css

silverwind · 2016-01-15T01:05:49Z

It does however run around 250% faster than cleancss.

File:       github-dark.css
Original:   130 050 bytes
Compressed: 103 208 bytes (79.36%)
Saving:     26 842 bytes (20.64%)
Time:       5261 ms
Memory:     14.726 MB

silverwind · 2016-01-15T01:20:34Z

Just confirmed that clean-css is in fact the best minifier for github-dark.css. 😉

Mottie · 2016-01-15T03:01:17Z

LOL thanks for checking!

silverwind · 2016-01-16T03:18:58Z

On the topic of tooling, I might implement https://github.com/stylelint/stylelint :)

Also fixed Stylelint quotes issue introduced earlier.

silverwind · 2017-05-24T17:28:40Z

Closing as this will be a non-issue with v2.

Mottie added a commit that referenced this issue Jun 9, 2014

v2.0-alpha proposal. See #129

6ce76dd

Mottie added the Planning label Jun 9, 2014

silverwind added GitHub and removed Repository Next labels Jul 30, 2014

silverwind removed the github label Jan 11, 2015

Mottie modified the milestone: testing milestone Jun 23, 2015

silverwind removed this from the testing milestone milestone Feb 4, 2016

ddavison mentioned this issue Feb 19, 2016

Overlapping sticky sidebar StylishThemes/GitHub-FixedHeader#1

Closed

Mottie added this to the testing milestone milestone Mar 26, 2016

Mottie referenced this issue Jul 19, 2016

Frontpage: Fix rss link color, better selector

e590fd0

Also fixed Stylelint quotes issue introduced earlier.

silverwind closed this as completed May 24, 2017

Remove unused/unneeded selectors #129

Remove unused/unneeded selectors #129

Comments

silverwind commented Mar 22, 2014

silverwind commented Mar 22, 2014

Mottie commented Mar 26, 2014

silverwind commented Mar 26, 2014

Mottie commented Apr 6, 2014

silverwind commented Apr 6, 2014

Mottie commented Jun 9, 2014

silverwind commented Jun 9, 2014

Mottie commented Jun 9, 2014

silverwind commented Jun 9, 2014

Mottie commented Jun 9, 2014

silverwind commented Jun 11, 2014

Mottie commented Jun 16, 2014

silverwind commented Jun 16, 2014

ddavison commented Jun 16, 2014

silverwind commented Oct 21, 2014

Mottie commented Nov 1, 2014

silverwind commented Nov 1, 2014

Mottie commented Nov 1, 2014

Mottie commented Nov 13, 2014

Mottie commented Nov 13, 2014

Mottie commented Nov 13, 2014

silverwind commented Nov 13, 2014

silverwind commented Nov 13, 2014

Mottie commented Nov 13, 2014

silverwind commented Nov 13, 2014

silverwind commented Nov 13, 2014

Mottie commented Nov 13, 2014

Mottie commented Mar 24, 2015

silverwind commented Mar 24, 2015

silverwind commented Oct 18, 2015

Mottie commented Oct 18, 2015

silverwind commented Oct 18, 2015

Mottie commented Jan 14, 2016

silverwind commented Jan 15, 2016

silverwind commented Jan 15, 2016

silverwind commented Jan 15, 2016

Mottie commented Jan 15, 2016

silverwind commented Jan 16, 2016

silverwind commented May 24, 2017