読者です 読者をやめる 読者になる 読者になる

morishitterのCSSの書き方(2016年夏)

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

CSS Modules 所感

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

PostCSSとは何か

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

AtCSS: Annotation based CSS Processor

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

汎用クラスを使ったWebデザイン

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

OOCSSとEDJO、もしくはHTMLとCSSにおける命名

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

本当のCSS設計、もしくはWebページのデザインプロセス

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

僕とCSSとCSSの生きる道

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

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

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

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

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

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…

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

昨日大阪で開催された、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: …

AltCSSビルドツール「Alchemia」

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

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

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

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

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

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

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

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

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

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

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

さくらVPSを解約した

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

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

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

スキルのステ振り

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

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

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

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

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

初めてQiitaに投稿した話

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

エンジニアの生存戦略としてのブログ

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

RailsユーザーからRailsエンジニアへ

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

Ruby初心者がRailsとGrapeでREST APIを作る

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

テックトーーク

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

サービスを作る気力がなくなりつつある

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

「pplog」というサービスが面白い

最近、pplogというサービスがすごく面白い。 pplog(ププログ?ピーピーログ?読み方わからない)は、ゆるふわインターネットにポエムを投稿するサービス。 pplogの思想はデザイナーでもあるken_c_loさんのブログ記事を読むとよくわかる。 pplogを使いはじめ…

普通のやつらの上を行きたい

2014年になってまだCSSと気持ち程度のJavaScriptしか書いてないから危機感を覚えた。 最近、ハッカーと画家を再読して意識高まったし、春休みは「プログラミング」の勉強をしようと思う。 ハッカーと画家 コンピュータ時代の創造者たち作者: ポールグレアム,…

はてなアカウントを移行した

前のアカウント名(id:ikasama48)がちょっと嫌になったので、新しくアカウント作った。 旧アカウントのブックマークを今のブックマークにインポートしたので、手順をメモしておく。 とっても簡単、3ステップ。 1. ブックマークデータのエクスポート はてブ…