社内Sass勉強会を開催しました

こんにちは、クレイの亀井です。もうすっかり秋ですね！コンビニやケーキ屋さんに芋栗南瓜のスイーツがもりだくさんでテンション上がりっぱなしです

さて本題に入ります。先日9月30日にクレイ社内で Sass 勉強会を開催し、CSS 設計について発表しました。そのことについて今回はブログに書こうと思います。

開催することになった経緯

数ヶ月前から社員のキャリアアップのため、『クレイ社員補完計画』が開始しました。週に4時間まで自分の好きなことを勉強する時間をとれ、2ヶ月に一度ブログや勉強会などの場で成果を発表します。

私ははじめ別のテーマにしていたのですが、いまいちモチベーションが上がらず、相談した結果 Sass をテーマに勉強会を開催することになりました。

社会人になってから2年半、スライドを制作して発表をするという経験がなかったのですが、いつか外部の勉強会で LT などしてみたいと思っていたためいい機会だと思い開催に踏み切りました……！

発表テーマ

テーマはクレイメンバーのリクエストにより、「メジャーな CSS 設計の紹介と DocBase のCSS について」になりました。

はじめてのスライド作成

Keynote を使いました。エンジニアだとだいたい Keynote でスライド作成するんでしょうか？ググっても意外と情報がなくて困りました。

せっかくなのでテーマも自作してみました。

勉強会当日

ピザを注文して、会社の会議室で発表しました。

参加者はクレイのメンバーだけだったので思っていたほど緊張もせず、Keynote が落ちるなどのトラブルもなく無事終えることができました。

終わったあとは質疑応答をしたり、私が「git grep で単語を検索している」といった発言から各メンバーがどういう方法で検索をするかという話に広がり、最後はなぜかエディタの話になりました。（戦争が起こりそうな一言が投下されましたが一瞬で鎮火しました。）

スライド

発表したスライドはこちらです。

※補足

• 普段 Haml と Sass で書いているのでスライドでもその記法で書いています
• 29ページで BEM の Modifier について書いていますが、スライド中の書き方は MindBEMding という記法で、BEM 本家の書き方ではありません。 MindBEMding のほうがメジャーであること、エンジニア向けの勉強会だったのもあってスライドでは省略しました。

質疑応答

Q. Sass だったら SASS 記法と SCSS 記法どっちを使うのがいいか?

A. あまり CSS が得意でない人や、後々のメンテナンスを誰かに引き継ぐ可能性が高い場合は SCSS 記法。Haml や Slim、CoofeeScript に慣れている人、閉じカッコ書くのが面倒だと思う人は SASS 記法がおすすめ

私自身は SASS 記法で書いています。が、開発メンバーや環境にもよると思うので SCSS 記法と SASS 記法両方のメリット・デメリットを考えてみます。

SCSS 記法のメリット

• 普通の CSS と似た記法なので導入する障壁が低い
• SCSS-Lint が対応してる
• 世の主流は SCSS 記法なので、SASS 記法よりも情報が多い

SCSS 記法のデメリット

• セレクタの入れ子をしてると閉じ括弧の対応がよくわからなくなる
• インデントめちゃくちゃでも動く
  • Formatter とかで整形すればいい話なんですが

SASS 記法のメリット

• インデントがちゃんとしてないとエラーになるので、自然とコードがきれいになる
• SCSS 記法だとブロックの閉じ括弧がどこに対応してるのかわからなくなることがあるけど、SASS 記法は書かなくていいのでその煩わしさから解放される
• ブロックを波括弧で囲まなくてよい、行末のセミコロンが不要など、SCSS 記法より簡略化されているので早く書ける

SASS 記法のデメリット

• 世の流れがSCSS 記法に向いているのでつらい
  • SCSS-Lint など、SASS 記法では対応してないツールがある
  • みんな SASS 記法で書こう？
• リスト（配列）とマップ（連想配列）書くのがつらい
  • 項目ごとに改行したいけど、改行するとエラーになるので全部1行で書くしかない

Q. 実際のプロジェクトで使ったことある CSS 設計は?

A.

• BEM
• SUIT CSS
• スライドには載っていないけど、FLOCSS

スライド中にある OOCSS と SMACCS を使っていないのは、以下の理由からです。

OOCSS

• 実際のプロジェクトだとデザインカンプ1,2枚の状態からコーディングが始まることが多く、要素のコンポーネント化の判断がしづらくて使ったことがない

SMACSS

• 以前はレイアウトルールがよくわからなかったので。（今回の勉強会で調べる過程でやっと理解した……）

Q. 現時点で一番いいと思う CSS 設計は？

A. 個人的には SUIT CSS

• モダンなかんじがする
• js フレームワークと相性がいい
• BEM っぽいけど BEM よりクラス名が短くなる

ですが、もちろん制作するサイトの性質によります。

Q. 初心者が使いやすい CSS 設計は？

BEM だと思います。他のメジャーな CSS 設計よりルールがシンプルなので

スライドについてのフィードバック

• スライド1枚あたりの文字が多い・文字が小さい。今回は狭い会議室でやるからいいけど、大きな会場でやるならもっとフォントサイズを大きく&太いフォントで。
• スライドとスライドの間は少し話す間を開けたほうがいい

おわりに

普段はバックエンドの人と CSS とか Sass のことはあまり話をすることがなかったので、彼らの CSS の考え方について聞くことができてよかったです。

宣伝

情報共有サービス DocBase を本リリースしました。
https://docbase.io

DocBaseとは

小さく始める・みんなで育てる・適切に伝える・安心して伝えるをコンセプトにした情報共有サービスです。
メモという形で小さく始められる、エンジニア以外のメンバーでも使いやすい仕組み、情報をまとめて整理できる、柔軟な権限設定で様々なプロジェクトで使えるなど、積極的な情報共有と業務の効率化を実現し、チームの成長を促します。

詳しくはこちらから。
https://kray.jp/products/docbase/