Beta-Blue B. Gone

Question

I've written a Code Review design using Userscripts and CSS.

It works by fetching the CSS from my GitHub repo, and using the built in gm_addStyle function to add it to the page.

The CSS that's fetched is minimised, also.

This is what it looks like:

I was looking at some of the other Stack Exchange sites for inspiration, namely Physics, Arqade, Stack Overflow and SciFi.

I had a few questions/issues that I was looking at refactoring, in particular:

• Am I abusing the CSS selectors?
• Would it be better to provide the icons as Base64 in the CSS instead of image links?
• Usage of the Dark colour scheme, does it visually 'work'?
• Am I [ab|mis]using the @match scheme? Would a regex @include be better?
• I had the url check explictly type out the colon to check if the site was Meta or not. I would've used .contains('meta'), but then in the off-chance a question had the word 'meta' in the title, it wouldn't render as a meta question. For example, a title like 'Timetable generator'. Could this be improved?

This is also on GitHub.

JavaScript:

// ==UserScript==
// @name        CodeReview dark theme
// @namespace   https://github.com/The-Quill/Code-Review-Design
// @version     1.0
// @description A new Code Review theme.
// @author      Quill
// @match       *://codereview.stackexchange.com
// @match       *://codereview.stackexchange.com/*
// @match       *://meta.codereview.stackexchange.com
// @match       *://meta.codereview.stackexchange.com/*
// @grant       GM_addStyle
// @grant       GM_getResourceText
// @resource    theme     https://raw.githubusercontent.com/The-Quill/Code-Review-Design/master/resources/min.design.css
// @resource    main_skin https://raw.githubusercontent.com/The-Quill/Code-Review-Design/master/resources/min.main.css
// @resource    meta_skin https://raw.githubusercontent.com/The-Quill/Code-Review-Design/master/resources/min.meta.css
// ==/UserScript==

GM_addStyle(GM_getResourceText('theme'));

GM_addStyle(
    GM_getResourceText(
        (window.location.href.contains('://meta.codereview')
        ? 'meta'
        : 'main') + '_skin')
);

main.css:

#hlogo a {
    background: transparent url(https://raw.githubusercontent.com/The-Quill/Code-Review-Design/master/resources/images/main-logo.png) no-repeat left top;
    width: 400px;
    margin-top: 5px;
    height: 164px;
    background-size: 87% 50%;
    font-size: 0;
}
.youarehere {
    color: #FF6700;
}
#tabs a:hover,
.tabs a:hover,
.nav ul a:hover,
#tabs a.youarehere,
.tabs a.youarehere,
.nav li.youarehere a,
.nav ul .youarehere a {
    color: #FF6700;
    border-bottom: 2px solid #FF6700;
}

meta.css:

#hlogo a {
    background: transparent url(https://raw.githubusercontent.com/The-Quill/Code-Review-Design/master/resources/images/meta-logo.png) no-repeat left top;
    width: 400px;
    margin-top: 5px;
    height: 164px;
    background-size: 87% 50%;
    font-size: 0;
}
.youarehere {
    color: black;
}
#tabs a:hover,
.tabs a:hover,
.nav ul a:hover,
#tabs a.youarehere,
.tabs a.youarehere,
.nav li.youarehere a,
.nav ul .youarehere a {
    color: black;
    border-bottom: 2px solid black;
}

design.css:

body {
    background-color: #5A5A5A;
}
#hlogo {
    margin: 0px 0 0 0;
}
#header {
    height: 165px;
}
.container {
    box-shadow: #404040 0 120px 0 inset;
}
#footer {
    background-color: #404040;
}
.tagged-interesting {
    background-color: rgba(255, 245, 222, 0.4);
}
.question-summary {
    border-bottom: 0px;
}
.footerwrap {
    padding: 15px 10px 70px 10px;
    background: rgba(0, 0, 0, 0) url(https://raw.githubusercontent.com/The-Quill/Code-Review-Design/master/resources/images/footer.png) no-repeat center bottom;
}
#tabs a.youarehere,
.tabs a.youarehere {
    font-weight: bold;
}

#svnrev,
#copyright,
#footer #svnrev,
#footer #copyright,
#footer #additional-notices {
    text-align: left;
    color: #FFF;
}

#footer,
.footer a,
#footer th,
#footer-sites a,
#footer #svnrev a,
.top-footer-links a,
#footer #copyright a,
#footer #footer-sites a,
#footer #svnrev a:visited,
.nav li:not(.youarehere) a,
#footer #copyright a:visited,
#footer #additional-notices a,
#footer #footer-sites a:visited,
#footer #additional-notices a:visited {
    color: #FFF;
}

This is influenced by the designs from this Meta post

Answer 1

// @resource    theme     https://raw.githubusercontent.com

Github isn't a CDN so availability might be a problem if you want to share this to people. Github can go down any time due to maintenance or attack response.

Suggesting you have a high-availability, low-latency server somewhere. On every update of a code, it kicks off a CI serve build. After a successful build, it deploys it to the server for everyone to enjoy. Something like Travis+Heroku.

Additionally, you might want to bust caches after each update. Not sure how to do that in a user script, but the idea is you want to cache the styles when there's no change, yet update it when there is.

#footer,
.footer a,
#footer th,
#footer-sites a,
#footer #svnrev a,
.top-footer-links a,
#footer #copyright a,
#footer #footer-sites a,
#footer #svnrev a:visited,
.nav li:not(.youarehere) a,
#footer #copyright a:visited,
#footer #additional-notices a,
#footer #footer-sites a:visited,
#footer #additional-notices a:visited {
    color: #FFF;
}

This can be simplified using CSS pre-processors with the help of mixins. You can define the style once, and have all these anchor "include" that white style. Suggesting SCSS. For compilation, a build step (suggested above) would do it for you.

Additionally, you have double IDs on your selector. IDs are assumed to be unique on the page. Thus you can safely "root" your selector to that later ID instead. In this case, you can drop #footer from most of the selectors above.

As for your questions:

Am I abusing the CSS selectors?

I believe so. But this can be solved by SCSS to reduce the actual CSS you touch. Additionally, I believe SE sites run off the same framework. If you can just get that right selector that changes everything (like the selector that gets everything colored peach), then that would greatly shorten your styles.

Would it be better to provide the icons as Base64 in the CSS instead of image links?

Base64 strings are often 2-3 times larger than their raw counterparts. I think an extra HTTP request wouldn't hurt. Additionally, if you have multiple images, you can use sprites to reduce it to one HTTP request.

Usage of the Dark colour scheme, does it visually 'work'?

It's just another one of those "light-over-dark vs dark-over-light" debates. Really depends. Any, as long as I can still review code, I guess.

Am I [ab|mis]using the @match scheme? Would a regex @include be better?

I had the url check explictly type out the colon to check if the site was Meta or not.

No comment. Not much userscript experience.

As for the theme in general, that question is more on-topic over at Meta since meta sites are for talking about it's parent site. Not sure who gets to decide on the theme once the site graduates. But then again, orange on black... Looks good.