Twitter Top のコーディングをしてみた。

f:id:thleap:20130731113834p:plain

書いたコード

https://gist.github.com/thleap/6118871

Twitter トップをコーディングした。
twitter-top.html は173行目以降は tweet-item のコピーになるで特に見る必要ないです。

なぜコーディングしたかとか、作業時間とか

なぜコーディングしたのか

Scalable and Modular Architecture for CSS (日本語) を読み、内容は腹落ちできたと思ったので、じゃあ次は実践. ということでやってみた。

作業時間

かかった時間は8~10時間ほどで、日数的には日曜から火曜までかかった。

やっちまった事

CSSのプロパティについては、5分の1から4分の1はコピペになってる。これは、始めは余白だったり色を取ろうとしてたけど、途中めんどくさいと思ってセレクタに当てられてるプロパティを取ってきちゃったから。
また、クラス名等も「ダメだ。自分で考えなアカン。アカンで。」と思いながらも、特に変更理由ないなと思った所はそのまま使った。

反省（本題）

自分で気づいた点、レビューを受けて気づいた点があったのでまとめて反省しとく。

クラス名が良くない

ex) .account-name, .screen-name の区別が付きにくい
この付け方では、@ahahakun とあははっ君、どちらのことを指しているかわかりにくい。
.accout-name は、 .fullname とかでもよかったかも。

ex) .stream というクラス名
.stream というクラス名は悪くはないけれど、その部分を表している名前はよく timeline と呼ばれてる。特に意図もなければ、一般的に使われる命名をしたほうが良いと思った。

命名を見ただけで判断できるクラス名を心がける。

ex) .stream-items の下に .stream-item を置くこと
間違いではないと思うけど、単純にコードが見難い。.steam-items は .stream-list などでも良かったのではないかと思う。

ex) .avatar というクラス名
画像名、親の div のクラス名は avatar となっているが、img alt属性は”アイコン”としている。ここをつつかれて上手く返答できなかった。クラス名には avatar と使っているサイトをよく見かけるが、普段自分が表示されているこういう画像を指す言葉は”アイコン”だし他の人の表現もそうなので、そちらに合わせたほうがいいかもしれない。ここはまだどちらがいいかよくわかってないけど、どちらにせよ上記のようにクラスや画像と alt属性が異なっているのは変だ。

深いネストになってる

今後どうしても深いネストになってしまうことはあると思うけど、まずは div で囲うか、ul や p などの要素にクラスを振るか、その判断をどこで付けるかを自分で決めといたほうが良い。

アウトラインがあまりにひどい

アウトラインは絶対守る必要ではないかもしれないけど、今後 SEO にも関わってくることにもなりそうなので、できてないよりはしっかりしといたほうがいい。そのために隠しテキストとかを使って無理やりアウトラインを作るのは良いのか悪いのか.. いまは判断がつかない。

今回コーディングしたもののアウトラインは以下のようになってる。

<!-- HTML Outline -->
1. Twitter
  1. Who to follow
  2. Trends
  3. Tweets

Twitter は見出しなどのアウトラインに関わるものは隠しテキストにしてたりする。
アウトラインは大体以下のようになってる。

1. Twitter.com makes heavy use of browser cookies
2. Welcome to Twitter.
  1. New to Twitter? Sign up
  2.  1.
  3.  1. Go to a person's profile
       2. Retweet this to your followers?
       3. Are you sure you want to delete this Tweet?
       4. Keyboard shortcuts
       5. Are you sure you want to block this user?
  4. Add a location to your Tweets
  ...

詳細はHTML 5 Outlinerのサイト, または chrome の拡張で確認してちょ。

SMACSS のカテゴライズの使い分けが上手くできてない

特に layout と module のとこで、.module と .flex-module というのが、layout に入れようかどうか迷った。結局 module に含めたけど、合ってんのかな。あと .wrapper とかも迷った。

HTML5クックブックの内容が反映できてない

role属性を使うとか考えてたけどできてない。
他のこともそうだが、最後にやろうか. 程度で考えてると絶対やらないので、コーディング中にヤラないとダメだ。

state の内容が変

state.css ファイルに書いてる以下の内容、

.is-hidden {
  visibility: hidden;
}

使ってるのは tweet のアクショングループ（ Retweet など）なんだけど、これは tweet にマウスカーソルを hover したら表示されるコンテンツなので、hidden に状態変更するのではなくて show とか visible の命名で非表示から表示するようにしたほうがよかったかも。

最後

他にも反省すべきとこはたくさんあったけど忘れた。これ以上忘れないためにブログに残しとく。
次回プライベートでも会社でも一番気を付けなければいけないことは、「最後に」という考えを捨て、インデントや命名も含めてその場その場でしっかり決めていくことだと思った。

CHROMA

世の中の "当たり前" を確認する