Beta-Blue B. Gone

Я написал проект Code Review, используя Usercripts и CSS.

Он работает, извлекая CSS из моего репозитория GitHub и используя встроенную функцию gm_addStyle, чтобы добавить его на страницу.

Выбранный CSS также минимизируется.

Это выглядит так:

main

Я искал некоторые из других сайтов Stack Exchange для вдохновения, а именно физики, Arqade, Stack Overflow и SciFi.

У меня было несколько вопросов /проблем, которые я искал рефакторинг, в частности:

  • Я злоупотребляю селекторами CSS?
  • Было бы лучше предоставить значки как Base64 в CSS вместо ссылок на изображения?
  • Использование схемы темного цвета, визуально ли это work ?
  • Как я [ab | mis], используя схему @match? Было бы лучше regex @include?
  • У меня была проверка URL-адреса, явно введите двоеточие, чтобы проверить, был ли сайт Meta или нет. Я бы использовал .contains('meta'), но затем в случайном случае у вопроса было слово 'meta' в заголовке, это не сделало бы сделать метафорой. Например, название типа «Ti meta . Может ли это быть улучшено?

Это также на 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;
}

На это влияют конструкции от этот метатест

37 голосов | спросил Quill 15 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 15 Sep 2015 17:31:06 +0300 2015, 17:31:06

1 ответ


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

Github не является CDN, поэтому доступность может быть проблемой, если вы хотите поделиться этим с людьми. Github может спуститься в любое время из-за ответа на обслуживание или атаки.

Предполагая, что у вас есть сервер с высокой степенью доступности, с низкой задержкой. При каждом обновлении кода он запускает сборку CI. После успешной сборки он развертывает его на сервере, чтобы все могли наслаждаться. Что-то вроде Travis + Heroku.

Кроме того, после каждого обновления может потребоваться сбой кэшей. Не уверен, как это сделать в пользовательском скрипте, но идея заключается в том, что вы хотите кэшировать стили, когда нет изменений, но обновляйте их, когда есть.

#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;
}

Это можно упростить с использованием предварительных процессоров CSS с помощью mixins. Вы можете определить стиль один раз, и все эти привязки «включают» этот белый стиль. Предлагаем SCSS. Для компиляции шаг сборки (предложенный выше) сделает это для вас.

Кроме того, у вас есть двойной идентификатор на вашем селекторе. Предполагается, что идентификаторы уникальны на странице. Таким образом, вы можете безопасно «root» вашего селектора для этого более позднего идентификатора. В этом случае вы можете удалить #footer из большинства вышеперечисленных селекторов.

Что касается ваших вопросов:

  

Я злоупотребляю селекторами CSS?

Я так считаю. Но это можно решить с помощью SCSS, чтобы уменьшить фактический CSS, который вы касаетесь. Кроме того, я считаю, что сайты SE работают в одной и той же структуре. Если вы можете просто получить этот правильный селектор, который меняет все (например, селектор, который получает все цветные персики), это значительно сократит ваши стили.

  

Было бы лучше предоставить иконки как Base64 в CSS вместо ссылок на изображения?

Строки Base64 часто в 2-3 раза больше, чем их исходные копии. Я думаю, что дополнительный HTTP-запрос не повредит. Кроме того, если у вас есть несколько изображений, вы можете использовать спрайты, чтобы уменьшить его до одного HTTP-запроса.

  

Использование схемы темного цвета, визуально ли это «работает»?

Это просто еще один из этих дебатов «свет-над-темный против темного света». Действительно зависит. Любой, до тех пор, пока я все еще могу просмотреть код, я думаю.

  

А я [ab | mis], используя схему @match? Будет ли regex @include лучше?

     

У меня была проверка URL-адреса, явно введите двоеточие, чтобы проверить, был ли сайт Meta или нет.

Без комментариев. Не очень много пользователей.

Что касается темы в целом, этот вопрос более подробно обсуждается в Meta, поскольку мета-сайты предназначены для разговора о его родительском сайте. Не уверен, кто получит решение по теме, как только выпускники сайта. Но опять же, оранжевый на черном ... Выглядит хорошо.

ответил Joseph 15 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 15 Sep 2015 20:42:48 +0300 2015, 20:42:48

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132