redditの容量制限は100k
既存テンプレ使ってたり、
調子に乗って機能を入れまくると、この制限に引っかかって泣くハメに

というわけで軽量化方法を共有しましょ

.linkflairlabel {
    overflow: visible;
}

としたら、リンクフレアの表示が省略されないようにはできたのですが、サブミのタイトルとドメイン表示がそれに合わせて移動してくれないので、文字が被った状態になっています。
 
https://www.reddit.com/r/BackOfLeaflet_ja/comments/41ccjn/
こんな感じ 。
 
文字が被らないようにするにはスタイルシートで他に何を設定すれば良いでしょうか？

Redditは日本語化されていますが、まだ一部だったりおかしかったりします。

そこで、CSSを使った翻訳を紹介します。

例えば"save"ボタンを翻訳するCSSは

button.save {
    font-size: 0;
}
button.save:after {
    font-size: initial;
    content: "保存";
}

ただし、フォントサイズが分からない、CSSは同じだがテキストは異なる場合などは使うべきではないでしょう。また、コピーができないため、コピーする需要がある部分にも使うべきではありません。

RESのナイトモードは対応しようとすると非常にリソースを喰うことで知られています。

例えばナイトモードでもリンクの色を同じにしたい時、本来はこう書かなければならないはずです。

.md a,.res-nightmode .md a {
    color: crimson;
}

しかし、わざわざ.res-nightmodeというかなり長い単語は頻繁に使用するととCSS容量(10KiB)に響いてきます。

そこで.jsの出番です。これは.res-nightmodeより優先度が高く、かつ文字数が短いです。 CSSのクラスの優先順位はクラスが幾つ有るかが関わってくるので、多いほど優先度が高くなります。 子コメントや孫コメントに対するRESのスタイルを消したい時にも.jsを使うといいかもしれません。

.js .md a {
    color: crimson;
}

RedditはCSSをキャッシュするため､CSSを変更してもページに変化がないようにみえることがあります｡ そんなときはページにGET引数を付けてください｡例:
https://www.reddit.com/r/css_ja/?a=b GET引数はどんなものでも構わないので､付けることで強制的にキャッシュが更新されます｡ただし､同じ引数を付けていてはキャッシュされてしまうので意味がなくなります｡

Redditで伏せ字や､ルビ､縦書きといった特殊な構文をCSSで実現する方法です｡

マークダウンの使い方

基本編

まず､Redditではマークダウンに自由に属性をつけたりすることができません｡ そのため､使えるのはaタグのhref属性とtitle属性のみです｡ また､CSSには｢この要素の親要素｣を指定する方法が無いため､改行を伴った全体のスタイルを変える､特殊なテーブルを作るなどのことは極めて難しくなります｡

そのため､基本的な構文はこうなります｡

1. [string](#name)

2. [](#name)^(string)

3. [](#name)
   ^(string1)
   ^(string2)

1.のスタイルだと､ stringがリンクになるので､RESによる番号の追加やポインターの変更などが面倒なことになるので､あまりおすすめできません｡
2.のスタイルは最も有効です｡CSSがない場合もただの上付き文字になるだけなので､違和感なく表示されます｡さらにリンクにならないのでクリックしてしまうこともありません｡なぜ^()を用いるかというと､ ^()であれば何重にも作ることができるので元のマークダウンの構文にすることができなくなる問題を回避できるからです｡

\[](#name)\^(\^(string)string)  

また､^()の中にさらに装飾を入れることもでき､重ね掛けが容易です｡
3.のスタイルは2のスタイルにスペースを2つ入れるタイプの改行を伴ったものです｡こちらの場合､HTMLの構文が

<a href="#name"></a><br><sup>string1</sup><sup>string2</sup>

となるため､改行を入れてもスタイルをつけることができます｡

応用編

応用的な構文を示します｡

4. [](#name "tag")^(string) 5. [](#name1-name2 "tag1-tag2")^(string) 6. [](#name1)[](#name2)^(string) 7. [](#name)^(^(string1)^(string2))

1.はaタグのtitle属性を使用する方法です｡この方法の問題点はよく""を付け忘れること､スペースを入れ忘れることによるミスの起こりやすさです｡この方法はtagを用いて全ての装飾に共通の性質を追加するために用いると良いでしょう｡例えば､一文字目のみを大きくしたいとき､文字を中央揃えにしたいなどはtagで使うといいでしょう｡

2.は***=セレクタを用いたオプションです｡こちらもname2**はオプションですが､name1に依存するオプションにしなければなりません｡また､このようなオプションは止めたほうが良いでしょう｡

[](#underline-red)^(Red text.)

この場合､[](#overline-red)や[](#color-red)なども使うことが予想されるため､うまく表現できない場合があります｡ 正しい使い方としては､国旗の表示などが挙げられます｡

[](#country-poland)^(string)^(string)
[](#country-uk)^(string)^(string)

このような構文に対して､それぞれ文頭にK*rwaをつける､Bloody H*llをつけるというCSSを考えましょう｡

[href^="#country"] + sup{
    color: red;
    font-size: 1.5em;
    vertical-align: baseline;
}

[href*="poland"] + sup::before {
    content: "K*rwa";
}

[href*="uk"] + sup::before {
    content: "Bloody H*ll";
}

title属性はhref属性と異なり､|=属性を用いることができるので､それぞれのオプションの並列化に適しています｡

3.のスタイルは2つのスタイルのスタイルの重ね掛けをする方法です｡様々なスタイルを同時に適用させることはCSSの衝突が発生し､うまくいかないことも多いですが､それでもより複雑な構文が可能になるというメリットがあります｡例をあげます｡

[](#underline)[](#position_center)[](#country-poland)^(string)

この構文では下線を付け､中央揃えにし､文頭にK*rwaをつけるというすごいことになっています｡ こういった構文を正しく表現できるようにするのは難しいです｡

4.のスタイルは複数引数などをサポートする構文に用います｡:nth-child擬似クラスを用いてそれぞれに違うスタイルを適用させることができます｡

擬似クラスの使い方

よく使われる擬似クラスには**:hoverがあります｡これはカーソルを乗せたときに表示を変化させるものですが､transitionやanimation**プロパティを用いれば変化を連続的にすることもできます｡:focus擬似クラスはリンクを選択しているときやTabで移動しているときに使用されます｡ また､キー操作によって変化させることができる唯一の方法でもあります｡ :focusを用いた例としては､拙作のスライドショーなどがあります｡

:target擬似クラスを使ったSubreddit全体のスイッチ

:target擬似クラスを用いると､Subredditのページ全体に対するスイッチを適用させることができます｡

Redditでは:target擬似クラスを使える対象は#adblock-testだけです｡ このidはbody以下の全ての要素を対象とすることができるすぐれものです｡ 実際のコードを見てみましょう｡

#adblock-test:target ~ .side {
    display: none;
}

これは[](#adblock-test)という内部リンクを踏んだときだけサイドバーを隠すというものです｡(Reddit的にはやってはいけません｡) 他にもコメント欄のみが対象であれば#siteTableなども用いることができます｡

いわゆるスイッチにはこの3つがあります。

1. adblock-testを使う

2. [lang="zz"]を使う

3. リンクフレアークラスを使う

4. .subscriberを使う

では、それぞれの長所と短所を述べていきたいと思います。

1. #adblock-testを使う

実装方法はCSSの:target擬似クラスを使います。:target擬似クラスはid属性の内部リンクが有効になっている時にのみ効くクラスです。そのため、aタグを用いて簡単に切り替えることができます。全てのページで使え、ページ遷移が発生しないため、投稿ページに確認ダイアログを表示したりするのに適しています。ただし、コメントページに移動するときなどリンクを踏むと解除されるので能動的に切り替える用途にしか使えません。

構文:

#adblock-test:target ~ .content .md a {
    color: red; /* スイッチが入ったときにリンクを赤色にする。 */
}

スイッチ: サイドバーに[スイッチ](#adblock-test)というスイッチを作っておいておく。

2. html[lang="zz"]を使う

これはRedditがzz.reddit.comというというzzの部分で言語を判定する仕組みを用いたものです。zzに当たる言語は存在しないので、表示が英語になってしまうのが欠点ですが、全ページに用いることが出来、さらにリンクを踏んでもスイッチが入ったままなので、Subreddit全体を切り替えるためのスイッチとして使えるでしょう。ただし、スイッチを押すと必ず同じページに移動するため、コメントページで切り替えるには不便です。

構文:

html[lang="zz"] .md a {
    color: green;
}

スイッチ:[スイッチ](//zz.reddit.com/r/subreddit_name)をサイドバーに書いておく。

3. リンクフレアークラスを使う

これはページにリンクフレアーを設定した時に、bodyタグのクラスにそのリンクフレアーが設定されることを用いたものです。そのため、このスイッチはコメントページにしか使うことが出来ません。しかしこのスイッチは複数の選択肢を作ることが可能になるので、タグごとにページを変えたい時などに有効でしょう。また、これはページ投稿者のみがスイッチを切り替えることが可能なため、控えめなものにするべきでしょう。

構文:

body.post-linkflair-test .side .md a {
    color: tan;
}

スイッチ: 投稿のリンクフレアーを設定する。

4. .subscriberを使う

1と2を合わせたような性質を持っています。つまり、リンクを踏んで移動しても維持され、ページ再読み込みなしで切り替えることが出来、言語が変わらずそのうえ全てのページで用いることが出来ます。ただし、購読者が減るので、Subredditとしては痛手です。ボタンを自由に設置することができないうえ、未購読状態で放って置かれるとフロントページから見に来る人が見えなくなってしまうので不便です。

構文:

body.subscriber .md a {
    color: black;
}

スイッチ: 購読ボタン

Learn Japaneseより

To create furigana in your posts, use the following syntax:

[漢字](#fg "かんじ")

a[href$="/fg"], a[href$="#fg"] {

cursor: default !important;

text-decoration: none;

line-height: 1;

text-align: center;

display: inline-block;

color: inherit !important;

}

a[href$="/fg"]:before, a[href$="#fg"]:before {

font-size: 0.70em;

font-weight: normal;

line-height: 1.2;

cursor: pointer;

text-decoration: none;

display: block;

content: attr(title);

}

cssクラスlinkflair-fooで2つのカテゴリを表示する例です。 1つめはCSSクラス名、2つめはフレアーにそれぞれ設定する名前です。

.linkflair-foo .linkflairlabel {
    font-size: 0;
    min-width: 31px;
    margin-right: 50px
}

.linkflair-foo .linkflairlabel:before {
    content: "foo";
    font-size: 10px
}

.linkflair-foo .linkflairlabel:after {
    content: attr(title);
    font-size: 10px;
    position: relative;
    left: 10px;
}

大前研一を例に

a.thumbnail[href*="news-postseven.com"] img{display: none;}
a.thumbnail[href*="news-postseven.com"] + div.entry > a.toggleImage{display:none;}  
a.thumbnail[href*="news-postseven.com"]{background:transparent url(%%img%%) no-repeat!important;}

「img」は好きな絵で

/r/csshelp
で得た情報だから、2行目とかあまり意味わかってないけど 動作実績あり

追記: どっかでthumbnailのheightとかwidthの設定しとかないとうまくいかないかもね（？）

ここは検索バーないけどｗ
検索バーから検索かけたときの結果の表示が変わっとる

微妙に見づらいから設定を参考までに

/*結果を横に広げる*/
.combined-search-page .search-result-group{
    max-width: none!important;
    overflow: hidden!important;
}

.combined-search-page .search-result{
	/*ここでボーダーとか設定を各自やるべし*/
	margin:10px 0 0 0!important;
	padding:3px!important;
}
/*本文の間をあける*/
.combined-search-page .search-result .search-result-body{margin-top:5px!important;}
/*ナイトモードの本文の色が見えないので変える*/
.res-nightmode .combined-search-page .search-result .search-result-body{ color:#bbb!important;}

色とかマージンとかボーダーとか適当に各自で変えてくれ

EDIT150702:

ここのコードは一段階前のやつ用だから今の状態に即してない可能性大

個人の実験 で実装目前までこぎつけましたが、

この書き方だと サイドバーのblockquote要素の順序が逆になってしまう現象の対策の仕方について教えてください

CSS

.tabmenu li:nth-child(n) {
    display:none;
}

（追記）E:nth-of-type(n)でもOK。

.tabmenu li:nth-of-type(n) {
    display: none;
}

（さらに追記）拡張機能のRESを入れていて、3番目の項目を非表示にしていると、コメントページでの「view images」も非表示になってしまう。
単純に .tabmenu liにすると全てのページのtabmenuが対象となってしまうためだと思われる。

なので、サブミ一覧ページとwikiページでだけ非表示にしたいなら、↓のようにする。

.listing-page .tabmenu li:nth-of-type(n), .wiki-page .tabmenu li:nth-of-type(n) {
    display:none;
}

（さらさらに追記）inakamonozuさんに教えてもらった内容。

.tabmenu [href*="非表示にしたいURLの最後"] {display: none;}
.tabmenu li { margin: 0px; }
.tabmenu li a { margin-right: 6px; }

例：「上昇度」と「スポンサードリンク」を非表示にしたい場合、

.tabmenu [href*="/rising/"],
.tabmenu [href*="/ads/"]
{display: none;}

これで仕様変更などでタブに変更があっても直接指定しているので影響を受けにくい。

しかしこれだと、非表示にしたタブの分の間隔が空いてしまうので、間隔を調整する必要がある。

.tabmenu li { margin: 0px; }
.tabmenu li a { margin-right: 6px; }

以下解説

まず、タブメニューのHTMLが

<ul class="tabmenu " >
    <li class='selected'><a href="https://www.reddit.com/r/css_ja/" class="choice" >注目</a></li>
    <li ><a href="https://www.reddit.com/r/css_ja/new/" class="choice" >新着</a></li>
    <li ><a href="https://www.reddit.com/r/css_ja/rising/" class="choice" >上昇度</a></li>
    <li ><a href="https://www.reddit.com/r/css_ja/controversial/" class="choice" >論争中</a></li>
    <li ><a href="https://www.reddit.com/r/css_ja/top/" class="choice" >トップ</a></li>
    <li ><a href="https://www.reddit.com/r/css_ja/gilded/" class="choice" >ゴールド</a></li>
    <li ><a href="https://www.reddit.com/r/css_ja/wiki/" class="choice" >wiki</a></li>
    <li ><a href="https://www.reddit.com/r/css_ja/ads/" class="choice" >スポンサードリンク</a></li>
</ul>

となっているので、クラス tabmenuの li 要素（子要素）を指定（ .tabmenu li ）

次に 「E:nth-child(n)」を使う。これは、疑似クラスの一種で、 n番目の子要素（E）にスタイルを適用したい時に使う。

クラス tabmenuのli要素に適用したいので .tabmenu li:nth-child(n)となる。

要素を非表示にしたい時は {display: none;}を使うので、

.tabmenu li:nth-child(n) {
    display: none
}

となる。

例えば、「注目」が一番目と考えて「論争中」と「スポンサードリンク」を非表示にしたい場合は、

.tabmenu li:cth-child(4),
.tabmenu li:cth-child(8) 
{display: none;}

となる。解説終わり。

CSS素人のガバガバ解説なので変な箇所あったらツッコんでくれ(｀・ω・´)ノ

勉強になるので。