BEMを書くときの個人的プラクティス
シングルクラスでmodifierを使う
element内でクラス名を格納するための this を定義し、modifier内で継承しています。
これにより、
class="block__element block__element--modifier"
と2つクラスを付けるようなところを
class="block__element--modifier"
の1つだけで済みます。
scss
.block { @at-root { &__element { $this: &; font-size: 20px; &--modifierA { @extend #{$this}; color: red; } &--modifierB { @extend #{$this}; color: green; } } } }
アウトプット
.block__element, .block__element--modifierB, .block__element--modifierA { font-size: 20px; } .block__element--modifierA { color: red; } .block__element--modifierB { color: green; }
stylusの場合
.block &__element this = selector() font-size 20px &--modifierA @extend {this} color red &--modifierB @extend {this} color green
【2020年8月】読了記事
CSS
- content-visibility: the new CSS property that boosts your rendering performance
- CSSを活用してHTMLのセマンティックエラーを指摘する方法 - ICS MEDIA
- JSからTSへの移行ツール、ts-migrateを試してみた - Qiita
JavaScript
- JavaScriptからletを絶滅させ、constのみにするためのレシピ集 - Qiita
- Making Sense of react-spring | CSS-Tricks
- The Making of: Netlify's Million Devs SVG Animation Site | CSS-Tricks
- 正式リリース前に総予習!! Vue3の変更点まとめ - Qiita
- フロントエンドから始めるアニメーション 最強のライブラリGSAP3を手に入れよう - ICS MEDIA
- Best of JavaScript
- TypeScript学習ロードマップ - Qiita
- JavaScript Data Types - DEV
- DenoにはWebAssemblyがある
- React v17 何が変わった? - Qiita
- JavaScriptで無限に再帰したい - Qiita
- 配列を征する者はJSを制す。JavaScriptのスマートな配列操作テクニック - ICS MEDIA
- 【JavaScript】本日未明、[ async - await ]さんが死体で発見され... - Qiita
- 2020年後半版Vue.jsを使ってる人には必ず知っていてほしいドキュメントに書かれていないComposition APIのコードの書き方とVuex vs provide/inject - Qiita
- JavaScriptのexport defaultアンチパターンについて、検証してみた - Qiita
- Improving website performance by eliminating render-blocking CSS and JavaScript - DEV
- 🎉32 Code Tutorials for Visual Learners 🖼 - DEV
- 5 full-stack projects to add to your portfolio before 2020 ends 🤯 - DEV
- Vue 2.xのOptions APIからVue 3.0のComposition APIへの移行で知っておくと便利なTips - ZOZO Technologies TECH BLOG
フロントエンドほか
- [サーバレス] Googleスプレッドシートでスクレイピング - Qiita
- 【2020】Reactパフォーマンスチューニング ~LightHouse Score 爆上げ物語~ - Qiita
- Can you get valid CSS property values from the browser? | CSS-Tricks
- 【Vue.js】負債を返却しながら機能追加しなければならない状況で実践したフロントエンドのコンポーネント設計 - クラウドワークス エンジニアブログ
- きっとこれから流行る関数型言語Elmを使えばHTML/CSS/JavaScriptを統一できるよ❗ - Qiita
- 既存のサイトにモダンな感じで React.js + TypeScript を導入する | webOpixel
ブラウザ
- Safariは危険なJavaScriptに対応しない - Qiita
- なぜMozillaはXULアドオンを廃止したのか?(翻訳) - Qiita
- 「Firefox 80」正式版リリース、同時にAndroid版Firefoxが大幅アップデート - GIGAZINE
- What's New In DevTools (Chrome 86) | Web | Google Developers
- New in Chrome 85 | Web | Google Developers
- Release Notes for Safari Technology Preview 112 | WebKit
- Web Content Accessibility Guidelines (WCAG) 2.2 Draft for Review | W3C Blog
Web系ほか
デザイン / UI / UX
- パワポっぽさを脱却する〈色彩編〉|PowerPoint+|note
- UIデザイン初学者の頃の自分に捧げたい、「勉強するならまずこれを読もう!」と思う読み物7選|ムツミ|note
- UXを評価するときに検討したい6つの指標 | UX MILK
- 4つの組織タイプから考えるデザインの始め方 : could
- 【図解入門】シンプルな図の作り方|櫻田潤🎨インフォグラフィック・エディター|note
PHP
Python
Go
開発 / インフラ / ツール
- どのウェブフレームワークが一番高速に動作するのかが一目で分かる「Web Framework Benchmarks」レビュー - GIGAZINE
- GitHubのコントリビューションやストリークをMacのメニューバーからチェックできるアプリ「Git Streaks」がリリース。 | AAPL Ch.
- VSCodeの拡張機能、なに使ってますか? はてなエンジニア世論調査 #2 - Hatena Developer Blog
- Googleアナリティクス代替として開発されたオープンソースの自己ホスト型Web分析ツール・「umami」 | かちびと.net
- Docker Hubがコンテナイメージの保存期間に加えてPull回数にも上限を設定すると発表 - GIGAZINE
SEO / マーケティング
- Core Web Vitals改善: 安定版Chromeで大きなCLSを発生させている要素を特定する | 海外SEO情報ブログ
- 【400社徹底分析】スタートアップのTwitter活用法|Mirei Takada | Plug and Play Japan|note
その他
- 糞コードは直すな。 - Qiita
- TypeScriptのWebサイトが新しくなり、ロゴも刷新。PlaygroundやHandbookのコンテンツなど充実へ - Publickey
- エンジニアの表現には気をつけろ!【エンジニアの意図と非エンジニアの解釈にはギャップがある】 | ふじもん
- 2020年が日本のデザイナー達に与える12のインパクト | デザイン会社 ビートラックス: ブログ freshtrax
- GitHubのREADMEをサクッと高品質で書けるサービス作ってみました。 - Qiita
- Qiitaコントリビューション数をGitHubのプロフィールに貼ってドヤれるサービスを作った - Qiita
- 無料でアカウント作成時に使える捨てメアドを自動生成して本来のメールアドレスを守る「Firefox Relay」レビュー - GIGAZINE
【2020年7月】読了記事
HTML
CSS
- CSSの小ネタ: 画像に枠線をつける際、borderよりもbox-shadowの方がより美しく実装できる | コリス
- Web制作の面倒な作業をラクにするCSS便利ツール59個まとめ - PhotoshopVIP
- 🚀 7 amazing CSS tips and tricks for linting your HTML 🔥 - DEV
- Displaying the Current Step with CSS Counters | CSS-Tricks
- CSS Painting Order | Woohoo
- 2020年、知っておくと便利なCSSのプロパティのまとめ | コリス
- CSSで美しいシャドウをつけるbox-shadowの古い書き方とこれからの書き方 | コリス
- あなたのCSS力の助けになってくれる素晴らしいWebサイト12選 - Qiita
JavaScript
- 今すぐ使いたいスプレッド構文、"Three-dots" Tip 集 - Qiita
- 「Angular 10」正式リリース。TypeScript 3.9サポート - Publickey
- TypeScriptのunion型はorです 〜union型、構造的部分型、余剰プロパティチェックの話〜 - Qiita
- 【JavaScript】本日未明、[ if - else ]さんが死体で発見され... - Qiita
- Vue.js ✕ CSS Modules のコンポーネントのつくり方 - Qiita
- [JavaScriptデバッグテクニック]メソッド実行中の変数の中とか見たくない? - Qiita
- What is Reactivity? 🤯 - DEV
- An Eleventy Starter with Tailwind CSS and Alpine.js | CSS-Tricks
- React、Angular、Vue対応、高性能なテーブルを実装できるシンプルで軽量のJavaScriptライブラリ -Grid.js | コリス
- 2020年にJavaScriptフレームワークをちゃんとはじめるために。|榊原昌彦|note
- TypeScript(の型システム)のみを使ってリバーシを作ってみる - Qiita
- 2020年後半版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips - Qiita
- エラーは出ないけど…何か変??Vue.jsでやりがちな「サイレント・ミス」(ロジック編) - ICS MEDIA
- Node.js でお手軽スクレイピング 2020 年夏 - Qiita
- React初心者がReactを学ぶために使用したサイトや書籍 │ Design Spice
- Javascript: Array.unshift(), Array.join(). - DEV
- Vue.js ユニットテストの基本まとめ - Qiita
- ESLintでTypeScriptの変数の名付け規則をチェックしよう! | Developers.IO
- ノンフレームワークなJavaScriptでもDOMとうまく付き合う方法 - Qiita
- what's the difference between () => {} and () => () - DEV
- セミコロンをつけ忘れただけなのに...【JavaScript】 - Qiita
- ES6 - Spread Operator - DEV
- Type checking your JavaScript with VS Code - the superpowers you didn't know you had - DEV
- 【VSCode】ES6記法スニペットのEmmet展開方法まとめ - Qiita
フロントエンドほか
- 現代開発者のためのCSS基礎技術 - Qiita
- 【GAS x Vue.js】JavaScript のみで今、家計簿をつくるとしたら【ハンズオン付き!】 - Qiita
- HTMLコーダーにとっての2020年。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
- 2020年の11の必見のフロントエンドトレンド - Qiita
- Getting the Most Out of Variable Fonts on Google Fonts | CSS-Tricks
ブラウザ
- 「Firefox 78」正式版リリース、「OS X」をサポートするのはこのバージョンが最後 - GIGAZINE
- Google Developers Japan: 2020 年の Chromium のブラウザ互換性の改善について
- Chromeの新機能CSS Overviewがすごく便利!ページに使用しているCSSの概要や未使用の宣言がすぐ分かる | コリス
- WebRTC - The technology that powers Google Meet/Hangout, Facebook Messenger and Discord - DEV
- ネイティブLazy-loadのしきい値をChromeが改良。ビューポートからの距離を短くし、遅延読み込みが適用されやすく | 海外SEO情報ブログ
- Chromium Blog: More secure and convenient Autofill coming to Chrome
- Chromium Blog: Chrome 85: Upload Streaming, Human Interface Devices, Custom Properties with Inheritance and More
- Firefox 79: The safe return of shared memory, new tooling, and platform updates - Mozilla Hacks - the Web developer blog
- Introducing the Storage Access API - Microsoft Edge Blog
Web系ほか
PHP
開発 / インフラ / ツール
- [サーバーサイドAPIデバッグ術]ブラウザのリクエストを簡単にリトライしてサーバーの挙動を見る方法 - Qiita
- DI って何でするのかわからない人向けに頑張って説明してみる「本来の意味」 - Qiita
- GitHubのTemplate Repository機能のすゝめ - Qiita
- いまこそ「良い仕様書」がチームの生産性の鍵となる。ので、仕様書に含めたい 14 のポイントについてまとめました。|Fritz | Product Manager @ Mercari|note
- 思わぬ事故防止!開発時やテスト時に使用するメアドのドメインは example.com に統一しよう - Qiita
デザイン / UI / UX
- 2020年版:ほんとに無料?高クオリティなフリーイラスト素材サイト20個まとめ【商用利用も】 | Web Design Trends
- 【前編】 自社企画のロゴ制作を通して学んだロゴデザインの作り方〜4989のロゴができるまで〜|STUDIO DETAILS "4989"|note
- ゲームから学べる学習ループUX : could
- あなたなら負け戦の案件で何をする? : could
- UXデザインプロセス入門 - 基本的な6ステップ | デザイン会社 ビートラックス: ブログ freshtrax
- #Illustrator でアイソメトリック風ボックスを作るスクリプト|宮澤聖二 | onthehead|note
- ペルソナの作り方とその活用法 | UX MILK
- UIデザイナーに聞いた!Appをいつもの100倍面白くみる観点|Blog|Goodpatch グッドパッチ
- グラフィックデザイナーが手元に置いておきたいデザイン本をジャンル別に24冊選びました|上司ニシグチ|note
- 商用利用無料、UIデザイン用のSVGアイコンが558種類!デザインに合わせたカスタマイズも簡単な優れもの | コリス
- デザイントレンドとしてのメンフィス を現代に蘇らせる方法とは?
- デザインは魅力ではないのかもしれない、という話|Yoritty|note
- 難易度が高いデザインの仕事で行き詰まらないために : could
- ミルクボーイの漫才で「UXライティング」を説明してみた|nao | UXライター / コピーライター|note
- Webデザインにおけるミニマルデザインとは | UX MILK
SEO / マーケティング
- ターゲティング広告をやめることでウェブサイト側の収益がアップする可能性がある - GIGAZINE
- 構造化データで複数アイテムをマークアップする際のガイドラインをGoogleが更新。ネストするか@idで関連付けする | 海外SEO情報ブログ
- 検索結果1位のクリック率は25%超。Google検索のCTR最新調査データ |SEO Japan by アイオイクス
その他
- NAVERまとめ サービス終了のお知らせ : NAVERまとめ公式ブログ
- pixiv の javascript のコメントが面白い - Dlog 隔離館
- 悲しいとき~ 悲しいとき~ Chrome をインストールするために Edge や IE を起動するとき~ - Qiita
- Qiitaを1年間ほぼ毎日投稿した話と転職の話 - Qiita
- やっていきは伝染する!デザイン改善の取り組みをチームで習慣化した話|mura24|note
- 秘密にしておきたかったんだけど、実はTwitterにはWebページを埋め込めるんだよね - Qiita
- SNSなどでアクセス権限を与えるために利用される「OAuth 2.0」はどのように動作しているのか? - GIGAZINE
- プログラミングを学びながら履歴書も改善できる10の素晴らしいプロジェクト - Qiita
- IT系上場企業の平均給与を業種別にみてみた 2020年版[前編] ~ ネットベンチャー、ゲーム、メディア系 - Publickey
- IT系上場企業の平均給与を業種別にみてみた 2020年版[後編] ~ パッケージソフトウェア系、SI/システム開発系、クラウド/キャリア系企業 - Publickey
- namae