目次
- はじめに
- 最近よく聞くtailwindcss！実際のところみんな使ってる....??
- CSSどう書いてる？
- UIライブラリ編
- React, Vue編
- 命名規則編
- :has()編
- 意外と多かった、CSS嫌い!?
- さいごに
はじめに
今回はCSSについてみなさんとお話ししたく、「CSSどう書いてる？」というテーマでトークイベントを開催しました！
最近よく聞くtailwindcssの話題から、便利なUIライブラリ、馴染み深いBEMやFLOCCSなど....
CSSのあれやこれやを1時間たっぷり語り合いました！
今回のトークイベントでは、スピーカーとしていつもの運営メンバーに加え、新しくコミュニティーリーダーのみなさんが参加してくださいました！
コミュニティーリーダーはよりフロントエンドクラブを盛り上げるために募集した新しい試みです！
今回4人の方々がコミュニティリーダーに立候補してくださったので、こちらでも紹介させていただきます！
なんでもトークンさん
- 都内の広告系ベンチャー企業にてCTOとして活躍中
motitoriさん
- 都内の教育系のベンチャー企業でエンジニアとして活動中
Tomo Torano[虎野とも]さん
- 大阪在住
- 制作会社にてフロントエンドエンジニアとして活動中
Masaki Goさん
- 都内在住
- フリーランスエンジニアとして活動中
- 2月に法人化するとのこと！
また今後コミュニティリーダーを募集することがあると思いますので、もし興味がある場合はぜひ参加してくださると嬉しいです！
またフロントエンドクラブに参加してくださっている皆さんも一緒にこれからもっとフロントエンドクラブを盛り上げていきましょう〜！
そしていつもの運営メンバーの情報については以下のリンクから参照ください！
運営メンバーについてはこちらから
最近よく聞くtailwindcss！実際のところみんな使ってる....??
tailwindcssとは、マークアップ内で直接構成して任意のデザインを構築できる、ユーティリティ優先の CSS フレームワークです！ (https://tailwindcss.com/)
最近、フロントエンドクラブのdiscordでもちらほら話題に上がるtailwindcssですが、実際のところみなさんは活用しているのでしょうか？
44人の参加者中、24名の方が回答してくださいましたが、結果は以下の通りです！
使ってない→18人
使ってる→6人
私自身、tailwindcssについて全くの無知なので、discordでtailwindcssの話題が上がるたびにギクっとしていたのですが、意外と使っていない人が多くて安心しました、、、(笑)
ですが、tailwindcssを使っている人の意見を聞いてみると、tailwindcssを使うのと使わないのでは、断然tailwindcssを使った方が工数を削減できるとのことです！
以下、tailwindcssを使っている方々の意見を紹介します！
リスナーさん
tailwindcssありとなしでは工数が全然違う
クラス名を考える時間が短縮できる
息を吐くようにコーディングできます
また、tailwindcssを使ってみた上で、使わない派という意見もあったり、実際にtailwindcssを使っていた業務のエピソードを聞くこともできました！
リスナーさん
htmlが複雑になっちゃうのが嫌いで、tailwindcssは使ってないです〜
motitoriさん
最近引き継いだ業務が、最初に開発した方がtailwindcssを使って開発していたのですが、その後に引き継いだ方がtailwindcssが嫌いな方で、そこでぶつかっている形跡がたくさんあって。それを引き継いでしまって大変な思いをしているのですが、結局僕は普通にCSSを書いています(笑)
確かにtailwindcssの公式サイトをみるとわかりますが、htmlのclassの記載がごちゃごちゃしそうではありますね。
tailwindcssを使ったことのない私からすると、慣れれば使いやすそうだけど、慣れるまでがちょっと大変そうというのが正直な印象ですね。
案件のスピードや要件によっては、tailwindcssが好まれる状況、またはそうでない状況というのがはっきりしそうです。
CSSどうやって書いてる？
ではtailwindcssを使ってないと答えてくださったみなさんはどうやってCSSを書いているのでしょうか？
UIライブラリ編
まずはtailwindcss以外のUIライブラリを使っているというみなさんの意見から紹介します！
リスナーさん
Chakra UIなら...
Kuma UIとか使ってますよ
coppeさん
vanilla-extractとかもあるよね
これらのUIライブラリの概要を超簡単に以下にまとめてみました。参考になれば嬉しいです！
- Chakra UI → reactのコンポーネントライブラリ
- Kuma UI → CSS-In-JSのUIライブラリ。Next.jsと相性が良い
- vanilla-extract → TypeScriptの機能を利用したUIライブラリ
次にUIライブラリを使っていない方々がどうやってCSSを書いているのかご紹介します！
React, Vue編
お話しを進めていると、上記UIライブラリを使用していない方々も含めて、全体的にReactやVueを用いたフロントエンド開発を行っている方が多いようです。
基本的にReactやVueを用いた開発では、コンポーネント設計に基づいた開発を行うため、そもそも1つのファイルに長いCSSを書くこと自体が少なくなっているよねというお話もちらほら...
また、Reactを用いた開発ではcssの読み込み方にいくつか方法があり、お話を聞いていると、結構好みで分かれていることがわかりました。ただ基本的には以下の2つの方法のどちらかを使っている人がほとんどでした！
- CSS Modules → CSSを別ファイルで管理しimportする方法
- Styled-Component → タグとCSSを紐づけてコンポーネント化する方法
命名規則編
またSCSSや普通にCSSを書いている人も多く、そこで話題になったのはやはりクラスの命名規則についてです。
SCSSを使っている人はBEMの命名規則を使っている人がほとんどでしたが、BEM特有のネストをしてスタイルをつけていく書き方については否定的な意見が目立ちました。
リスナーさん
&__で書いちゃうとエディタの全文検索できなくなるので....
トシヤさん
僕もネストしない主義ですね。運用で検索できないのはキツいです。
ですが、以下のようなリスナーさんの意見も！
隣接セレクタ書くとくの& + &は便利
私も業務では運用のことを考えて、ネストをしないで書くことがほとんどです。
確かにそれだとSCSSの良さを100%生かせていないのかもしれないのですが、リスナーさんのいう通り、SCSS特有の便利な書き方って多いですよね。普段SCSSの書き方になれていて、急に生のCSSを書くとなると途端に難しく感じてしまいます。
また、BEMはクラス名が長くなりがちという短所もありますが、広く普及されているからこそ、誰がみても理解しやすいという長所もあります。個人的にはメンバーが多い案件などでは特にその長所を感じています。
これも案件の規模やメンバーに応じてうまく使っていくことが大事なのだと思いました！
ちなみに、私は業務で開発環境上FLOCSSの命名規則に則ってクラス名をつけることが多いのですが、フロントエンドクラブのみなさんに言わせればFLOCSSはもう古いそうです（笑）
:has()編
また、ふと話題に上がった:has()という擬似クラス、みなさんご存知だったでしょうか？私は今回のトークイベントで初めて知りました。
:has()は、条件をつけてスタイルをつけられる画期的な擬似クラスです。少数ではありましたが、使っている方の意見を聞くと、とても使いやすそうでした！
リスナーさん
:has()は子の状態を親が知れるのが強力だと思っています。
div:has(input:checked)よく使ってます。
body:has(:modal[open]){overflow:hidden}が革命なんだった。
確かに実際に使ってる方々の意見を聞くととても便利そうです。
特にパッと聞いて便利そうだと思ったのは、body:has(:modal[open]){overflow:hidden}です。モーダルの時にいつも苦労する背景固定......私も使ってみます！
ただ、:has()の使用に対しては少々否定的な意見も多かったです。それらの意見も紹介します！
kaminalyさん
:has()はちょっと危ない
リスナーさん
意図せず変わっちゃうことがありそうだし、その時の原因究明に時間かかりそう
グローバルにゴニョゴニョしちゃうとよくないかも
トシヤさん
コンポーネントで切り分けられてる前提で使えば問題ないのかな...
確かに考えなしに使ってしまうと、意図しない挙動を生み出す原因にもなりかねませんよね。使いこなすのにちょっと大変そう.... とはいえコンポーネントの中で限定して使ったり、明確に状況を設定した上で使うことができればとても便利そうです！
意外と多かった、CSS嫌い!?
イベントも終盤、みなさん気持ちがゆる〜くなってきた頃にポロッとリスナーさんから出た一言。
「正直CSS嫌いだなぁ」
この一言に大盛り賛同する方々多数いらっしゃいました。思っていた以上にCSSを嫌いという方々が多くて驚いたのですが、みなさんのCSSに対する向き合い方が面白かったのでここでご紹介します！
CSS嫌い
CSSエラー出してくれないからなー
苦手科目ではある...
CSS好きかなんて考えたこともなかった。。楽しい時よりツラい時の方が多いのは確か
CSS嫌いじゃないけど...
Safari対応しないなら好きです
CSSが嫌いなのではなくSafariが嫌いです
令和のIE、それはSafari
CSS好き！
書いてすぐに確認できるのいいですよね
なんの変哲もないボックスをコネコネして良い形に整えるの、ねんど遊びみたいな楽しさがある
display: flexをちゃんと理解し始めてからちゃんと反映されるなって思い始めた
皆さん、フロントエンドエンジニアたるもの当たり前にやらなくてはいけないCSSにこれほどいろんな思いを持って向き合っていたんですね....
個人的には、フロントエンドエンジニアでCSS嫌いって結構きついのでは...!?なんて思ったりもしたのですが、皆さんそれぞれの強みや楽しさがあってフロントエンドエンジニアとして活躍されているのかなと思うと、なぜ皆さんがフロントエンドエンジニアをやっているかも聞いてみたいですね...!!（次回のトークテーマ!?）
おわりに
今回はCSSについて、トークイベントを開催しましたが、正直1時間じゃまだ足りないという気持ちが強いです！
特に:has()に関するお話では、皆さんの便利な記述法を知ることができてとても興味深かったです！:has()以外にも、擬似要素・擬似クラスだけで1時間お話しできそうな気がします。
フロントエンドエンジニア全員が書かなくてはならないCSSだからこそ、十人十色な書き方があってとても面白いと思いました。
それぞれのCSSの書き方を共有し、より多様に学んでいくことで、状況に応じて最適なCSSの書き方を導くことができる、より強いフロントエンドエンジニアになれるのではないでしょうか。
皆で楽しくお話ししながら学び合える環境がある、それがフロントエンドクラブの魅力だと今回のトークイベントを通して再認識しました！
個人的にCSSに関してはまだまだ第二弾、第三弾とお話ししていきたいです！
2月もトークイベントを開催する予定ですので、ぜひ次回もご参加いただければ嬉しいです！
ではまた！
.png)
