プログラマが楽にCSSを書いて管理する。

2016-01-15

最近わたしが幸せになっているCSSのやっていき方を書きます。

Bootstrapなどのフレームワークを使う場合と使わない場合に特に区別はありません。

前提

• SASSなどAlt CSSを使う
• 自分の楽さ優先

個人的感想

幸せを感じるところ

• 見栄えを変更する時はCSSのみ編集
• 読みやすい

ダメそうなところ

• ファイルサイズ大きい
• 描画速度に影響がある？

HTML

HTMLのclassには、表示内容ではなく、自分がなんであるかを書きます。

<table class="memo-index index">
  <thead>
    <tr>
      <th class="memo-index title"></th>
      <th class="memo-index description"></th>
      <th class="memo-index link"></th>
    </tr>
  </thead>
  <tbody>
    <!-- 略 -->
  </tbody>
</table>

SASS

SASSでは、よく使う表示内容や、フレームワークから提供されるclassはextend要素として使用します。

HTMLに書いた「なんであるか」を表すclassに、それらを挿入します。

@import "./bootstrap/bootstrap"

$medium-font-size: 16px 

%min-cell
	width: 1px
	white-space: nowrap

.memo-index
	&.index
		@extend .table
		@extend .table-bordered
		@extend .table-striped
	&.link
		@extend %min-cell
	&.title,
	&.description
		width: 50%

なぜ.memo-index.indexなどといった複数classにしているのか

SASSが読みやすい+管理しやすいので。

Bootstrapの例などから感じる不幸せ感

BootstrapのPaperというテーマが大好きで常用しているのですが、Bootstrapの例のように、表示内容をそのまま書くと、以下のような感じになります。

<table class="table table-bordered table-striped">
  <!-- 略 -->
</table>

このデザインを変更しようとすると、CSSを変更した後に、HTML側でclassをつけたり足したりしなければならない場合があります。これはとてもめんどくさい。

ここ数ヶ月ほどReactをさわっていてJSXを書いていると、「デザインが変更になったのでclassName変えといてよ」という話が発生するととってもだるいな〜という思いが強くなり、見栄えの変更はCSS側で完結したほうが幸せであるという気持ちが強くなりました。

Qiita:Coatのような@include前提の設計をしているCSSフレームワークを使えば、全面的に幸せになれるかもしれません。使ったことはありません。