l12a

白ウサギを追え

CSS

BEMの設計とコンポーネント設計の関係の話

同僚との雑談中に BEM の話題に至り、コンポーネント設計の中に現在も活かされている話をしました。 BEM 語られ尽くしたことと思いますが、いわゆる「 CSS 設計」の方法論の一つです。 他にもいくつかの有名な CSS 設計スタイルがありますが、僕は BEM を使…

ロボットのコックピットにありそうなかっこいいメーターを作りたい(Google Chromeのみ)

使用しているCSSプロパティの都合上、現在は Google Chrome のみで動作します。 そのため、実用的に使える状況はかなり限られますが、漢心をくすぐりそうなかっこいいメーターを作りました。 SFチックな円環状のメーター こういったグラフィックは無闇に多用…

stylelint-config-standard における no-descending-specificity ルール

CSS の linter として stylelint を採用し、ルールセットは stylelint-config-standard にしました。 初期導入時、僕のやり方と競合した no-descending-specificity ルールを結局無効化せずに自身を曲げた ことについて書きます。 no-descending-specificity…

Vue.js + Scss + Webpack + IntelliJ 環境で CSS を Lint しながらコードを書く

stylelint できるように環境を整えました。 なるべく薄く設定していきたいです。 この手の作業は、適用前のコードの状態によっては、変更差分がものすごい出るので、 なんかのついでにやらないでブランチを分けて作業することをお勧めしたいです。 各モジュ…

CSSで作るグラデーションを美しくする一手間

CSS

素晴らしい記事*1を見つけて真似してみたら地味なポイントだけどグッと見栄えがよくなりましたので、ぜひ試して欲しいな。 いつ使うのか 何が良くなったのか 改善前のグラデーション 改善後のグラデーション mixinや、グラデーションの細かい学び sass mixin…