今、自分がどうやってCSSを書いているのかについてまとめる。 CSSを書く前にすること 持論だが、「デザインの意図を正確に理解した上で書かれたCSSは破綻しない」と思っている。 しかし、自分ひとりでサービスを作るときような、デザインの決定権を持つ人とU…

CSS Modulesという、CSSの新しい設計概念・指針のようなものがある。 CSS Modulesチームの1人であるGlen Maddern氏が書いた「CSS Modules - Welcome to the Future」という記事の翻訳がバズっていたので、僕がCSS Modulesについて思ったことをまとてみる。「…

PostCSSというnode.js製のツールがある。 PostCSSのGitHubでのStar数は4000を超え、海外のブログではPostCSSについての記事をよく目にするようになった。しかしまだ日本では盛り上がりを感じていないので、日本語のPostCSSの記事を書くことにした。 PostCSS …

AtCSSという、プリプロセスに必要なメタデータをCSSファイルのコメントにアノテーションとして記述し、変換するツールを作った。 開発自体は約3ヶ月前から行っていたが、先日v1.0をリリースしたのでブログで紹介してみる。 ちなみに読み方は「アットシーエス…

CSSにおいて、以下のような単一プロパティで定義されたルールセットをUtility Classes、日本語で汎用クラスとかヘルパークラスだとか呼ばれる。 .text-center { text-align: center; } .font-sm { font-size: 10px; } .bg-blue { background-color: #0089ff;…

OOCSSの欠点とEvery Declaration Just Onceのもたらすもの hail2uさんのこの記事を読んで、EDJO (Every Declaration Just Once)というCSSの記述アプローチを知ったので、僕なりに考えたことをまとめてみる。 OOCSSとEDJO OOCSSとEDJOの違いは、 名前を付ける…

CSSの設計 = セレクタ名をどう付けるか、って思っている人が多いので、年も明けたしここらで一度「CSSを設計する」とはどういうことか、考えていることをまとめてみる。 セレクタ名をどう付けるか CSSのルールセットは現状全てグローバル定義なので、上手い…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

前に別のブログに書いた記事をQiitaに投稿してみた。 このブログはrootsっていう静的サイトジェネレーターで作って、借りているVPSでホスティングしている。まだまだ僕にはコンテンツ力がないので（？）、全然見てもらえていない。 その点Qiitaの方が見ても…

ブログを書き始めて、ブログを書いても、自分が本当に伝えたいことはなかなか相手には伝わっていないなと感じる。 自分や他の人が書いた記事の（ブックマーク）コメントやツイートを読んでも、その記事の本質とは異なるところで、共感や批判をされる。 そも…

最近、Railsを使い始めた。 前回のエントリーでも書いた通り、Railsはそこらのフルスタックフレームワークよりもフルスタックで、学習コストが高いと思う。 railsコマンドによるコードの自動生成や、多くのrakeタスク、存在価値がわからないViewHelperなど、…

Backbone.jsを使ったアプリケーションのバックエンドのAPIを作ることになった。普段サーバーサイドを書くときはPHPを使ってたけど、勉強も兼ねてRubyを使った。 Railsのお勉強 Rubyでアプリケーションを書くときはRailsを使うのが当たり前みたいになってると…

技術に関しての会話ないし議論（テックトーク）をするとき、どこまでの知識を当然の前提としていいのかわからない。 話題となる技術に関して相手の知識は自分と同等なのか、または多いのか少ないのかを考える。相手が誰であるのか（教授なのか上司なのか後輩…

Webサービスを作りきる気力がなくなってきてるなーって感じてしまった。 これはヤバいと思って、なんでこうなったのか考えてるといろんなことを思った。 サービスを作るのってすごく気力が必要で、まずどんなサービスを作るのか考えないといけないし、どうい…