僕とCSSとCSSの生きる道

この記事が2014年最後のものになる。年の瀬だし、今年1年を振り返って軽くポエむ。 CSSとの出会い CSSとの出会いはちょうど1年前くらいだと思う。約3年前からプログラミングを初めて、その頃からなんとなくCSSも書いていたけど、作っているWebアプリの見た目…

2014-12-07

CSSのプリプロセスとポストプロセス、そしてReworkとPostCSS

この投稿はFrontrend Advent Calendar 2014の7日目の記事です。 CSSプリプロセッサーとポストプロセッサー、そしてそれらをビルドするツールであるReworkとPostCSSについて。 CSSプリプロセッサー、ポストプロセッサーまずは用語の定義を確認する。CSSプリ…

2014-12-02

YACP: よりオブジェクト指向なCSS設計のためのプリプロセッサー

この投稿はCSS Architecture Advent Calendar 2014の2日目の記事です。よりオブジェクト指向なCSSの記述を助ける、YACPというCSSプリプロセッサーを作っています。具体的な、セレクタの命名規則やディレクトリ構成の話ではないです。 Object Oriented CSS …

2014-11-28

CSSプリプロセッサーの`extend`の悪いところ

why CSS preprocessors `extend` feature is wrong : http://t.co/oRl0rlh2Az— bloodyowl.jsx (@bloodyowl) 2014, 11月 27 extendが悪いというより、HTMLに複数のclass属性値書いてスタイル当てることが悪いっていう例だと思う— Masaaki Morishita (@m0rishi…

2014-11-09

CSSオジサン #0に行ってきた

昨日大阪で開催された、CSSオジサンっていうCSSの勉強会に行ってきたのでその雑感。CSSオジサンってだけに若者は少なかった。女性の人が思ったよりいた印象ある。発表は、最初がCSS設計の教科書の著者である@hilokiさん。@hilokiさんと言えばCSS設計。「メ…

2014-11-07

機能が行動を誘発する

自作しているCSSプリプロセッサー、YACPにcss-whitespaceというライブラリを導入した。css-whitespaceがどのようなものかというと、例えば form button border-radius: 5px padding: 5px 10px @media print body padding: 0 button border-radius: 0 width: …

2014-09-12

AltCSSビルドツール「Alchemia」

Alchemiaという、AltCSS（CSSのメタ言語 or プリプロセッサー or ポストプロセッサー）をビルドするツールを作った。 CSS pre- vs. post-processing 似ているツールとして、ReworkとPostCSSがある。Reworkはプリプロセッサーをビルドするツールで、PostCSSは…

2014-08-06

デザイナーのいないチームでのCSSの書き方

スタートアップや少人数のチームでは、デザイナー（最終的なデザインの決定権を持つ人）がいないことも少なくないと思う。また、エンジニアだけで何かサービスを作ることも多いだろう。僕自身、そのような環境でよく開発をする。僕はCSSはそこそこ書ける…

2014-07-28

CSSのマルチクラス設計の問題点

CSSのルールセットを細かく（classセレクタで）定義し、HTMLに複数のclass属性値を書いてスタイルをあてるような設計をマルチクラス設計と言ったりする。マルチクラスにすることで冗長な記述が減り、ファイル容量が減り、ルールセットの再利用性が高くなり…

2014-07-09

CSSポストプロセッサーの必要性

（postcss嫌いだけど）— CSSきれいに書くマン (@m0rishitter) 2014, 7月 8 @m0rishitter why you hates PostCSS? :)— Andrey Sitnik (@andreysitnik) 2014, 7月 8 PostCSSというかCSSのポストプロセッサーにいろいろ思うところがあったのでツイートしたら、…

2014-06-23

CSSセレクタの名前を付けるときに考えていること

idを使うときも同じだけど、話をわかりやすくするためにclassに統一するということで。個人的にはセレクタにidは使わない派です。先日、@cssradarさんが「自分の仕事はclass名を決めた時点で8割終了している」みたいなことを言ってて、僕も概ね同意してい…

2014-06-04

スタイルガイドジェネレータを自作した

Cheatahというスタイルガイドジェネレータを作った。スタイルガイドというのはスタイルシートの仕様書みたいなもので、HTMLにどのようなclass属性（またはid）を書くとどのようなスタイルが適用されるのかが書かれているもの。例えば、GitHubのStyleGuideや…

2014-05-26

さくらVPSを解約した

先日、2年弱ぐらい利用していたさくらVPS（メモリ1GBのやつ）を解約した。支払い分が残っているので、6/20（？）まではまだ使えるらしい。今VPSで動いてるのは、もう1つのブログとプログラミングを初めた頃に作った黒歴史ぐらいだ。別に何かちょっとした…

2014-05-07

ゴールデンウィークで作ったもの

mizchiさんの記事に触発されて書いた。ゴールデンウィーク中は、Nodeのモジュールを4つほど勢いで作って遊んでた。つくったもの grunt-yacp https://github.com/morishitter/grunt-yacp 前に作ったCSSプリプロセッサーをコンパイルするGruntプラグイン。 m…

2014-05-02

スキルのステ振り

あと約11ヶ月で長かったモラトリアム期間が終了し、晴れてTOKYOでエンジニアをすることになる。今までは何も知らなかったからいろいろとがむしゃら勉強してきたけど、ここいらで一度今後のステ振りについて考えてみた。少し前までは企画からマケからデザイ…

2014-04-07

世の中のCSSプリプロセッサーがどれもクソだから自作したった

タイトルは釣りです。Stylusは最高だと思うし、Sassはいつも使っています。Lessは…うん、いい感じだと思います。 Yet Another CSS Preprocessor YACP(Yet Another CSS Preprocessor)という、CSSプリプロセッサーを作った。名前は考えるのめんどうだったので…

2014-04-04

CSSのカスケーディングを禁止する

rework-rule-bindingという、CSSのカスケーディングを禁止する構文を追加するReworkプラグインを書いた。 Rework Reworkは、@tjholowaychukや@necolasらが立ち上げているプロジェクト。Reworkのプラグインを書くことによって、開発者は独自のCSSのプリプロセ…