完全体となったContainer Queriesの所感の雑記 - Qiita

2023/02/13 6 users 使い物 Style 関数 前々 Qiita

Chrome 111 betaでついに、Style Container Queriesが対応されました。 Chrome 111 beta - Chrome Developers 今まではサイズのみ対応で、Container Queriesとして使い物になりませんでした。 しかし今回のベータ版のアップデートで style() 関数の対応しています。 前々からContainer Queriesは、CSS設計を変革させる機... 続きを読む

CSS設計って最近こういう感じだと思うんですけどどうですか

2022/07/29 203 users 感じ BEM doc CSS Modules https

CSS設計って最近こういう感じだと思うんですけどどうですかという話です。BEM、CSS Modules、CSS in JS、Tailwind CSSとか色々ありますがどういうふうに捉えればよいのだろうという内容でした。 フォローアップ https://paper.dropbox.com/doc/CSS-pXvOHW14FJ4gqJb60mnyI 続きを読む

CSS設計における、すべてがコンポーネントであるという誤謬

2022/06/11 74 users 誤謬 コンポーネント コンポーネントベース BEM すべて

BEMによってもたらされた、コンポーネントベースのアプローチでは、「ページはコンポーネントの集合によって表現されるべきであり、ページに含まれるのはすべてがコンポーネントである」と考える。しかしこれまでCSSを書いてきた経験から、これではデザイン意図を的確に表現することができないと感じるようになってきた... 続きを読む

明日から使えるCSS設計【PDFLOCSS】

2022/03/07 164 users 本書 コリ ルール ルール通り コード

CSS設計で本当に難しいのは「ルールを理解すること」ではなく「ルール通りに自分でコードを書くこと」だと思います。 実際にコードを書いていると「あれ、ここってどうすればいいんだろう？」「こういう場合はどうすべき？」といったことが頻発し、結局よくわからないまま勘でゴリ押すということがよくあります。 本書は... 続きを読む

今までのCSS本とはかなり異なる！ 現在主流の実装・設計・管理方法を徹底解説した良書 -ざっくりつかむ CSS設計

2021/12/24 195 users CSS 良書 最適解 アプローチ たくさん

CSSの解説書はたくさんありますが、今までのCSS本とはかなり異なる面にフォーカスされたCSS設計についての解説書を紹介します。 かなり実践的な解説書です、CSSの何に気をつけて、CSSをどのように書き、CSSをどのように管理するとよいか、現在主流の実装・設計・管理方法について、最適解となるためのアプローチや思考プ... 続きを読む

ITCSSを採用して共同開発しやすいCSS設計をZOZOTOWNに導入した話 - ZOZO Technologies TECH BLOG

2021/08/13 125 users ZOZOTOWN デザイ 菊地 リニューアル ウェブ

こんにちは。ZOZOTOWN部フロントエンドチームの菊地（@hiro0218）です。 2021年3月、ZOZOTOWNは10年ぶりのリニューアルをしました。この記事では、そのリニューアルで再考したCSS設計について紹介します。 背景 今回のリニューアルでは、ウェブとアプリが部分的に共通のデザインになりました。 アプリ ウェブ このデザイ... 続きを読む

Scoped CSSにおけるCSS設計手法 - ICS MEDIA

2020/05/15 34 users ICS MEDIA CSS設計手法 ICS CSS 手法

Vue.jsでCSSを利用する際にScoped CSSやCSS Modules、CSS-in-JSなどの手法があります。とくにScoped CSSは気軽に利用できるため、利用する機会も多くなって来るかと思います。 Scoped CSSがあればCSS設計を使わなくてもよいという意見もありますがはたして本当なのでしょうか？ ICSではScoped CSSにおけるCSS設計に関す... 続きを読む

開発体制に合わせたCSS設計 | 吉川ウェブ

2018/11/25 131 users 吉川ウェブ 開発体制 scalable articles 単価

Predictable 予測しやすい Reusable 再利用しやすい Maintainable 保守しやすい Scalable 拡張しやすい 参考：https://philipwalton.com/articles/css-architecture/ CSS設計の必要性 コスト削減 実装者の単価を減らせる 実装工数を減らせる 既存のコンポーネントを使うことで工数を減らせる デグレが起きる確率が減り改... 続きを読む

CSS in JSはCSSの書き方をどのように変えるのか - yuhei blog

2018/11/22 235 users CSS yuhei blog セレクタ CSS in JS

CSSの難しさの根源はセレクタにある。CSS設計のための方法論ではどのようにしてセレクタと関わるべきかについて語られる。 その関わり方がCSSのみで実現できなければならないという制約を捨てたのがいわゆるCSS in JSの類（定義的に微妙なやつも全部ひっくるめて）だ。可能性は一気に広がり無数のライブラリが生み出され... 続きを読む

宣言ブロックのCSS設計｜Web Design KOJIKA17

2017/07/18 682 users Web Design KOJIKA17 セレクタ CSS

日本語で「CSS設計」を検索すると、記事やつぶやきなどでセレクタの命名規則に関する話題が多いです。 CSSを設計する上で、命名規則は重要な要素でしょう。 簡単なセレクタ名だと他のスタイルと重複する可能性もあります。他のスタイルと重複しないようにセレクタの子孫数を増やしてしまうと、今度はスタイルの取り回しが悪くなります。 またデザインをコンポーネントに分ける粒度について紹介されていますが、命名規則の... 続きを読む

「Web Componentsが来る！CSS設計はどうなる？」―CSSのエキスパートに聞いてみた！ | HTML5Experts.jp

2017/04/17 149 users CSS エキスパート ＣＴＯ Web Components

榊原昌彦 一般社団法人リレーションデザイン研究所 代表理事、一般社団法人エリア・イノベーション・アライアンス CTO こんにちは、編集長の白石です。 Safari 10.1からCustom Elementsが使える ようになったり、 Microsoft EdgeもWeb Componentsの実装を約束していたり と、Web Componentsの足音は刻一刻と迫ってきています。 そんな時代に、W... 続きを読む

FLOCSSを扱いきれないあなたに贈る、スリムなCSS設計の話 | WebNAUT

2017/04/07 79 users WebNAUT FLOCSS あなた

Webの開発をやったことのある方なら誰しも、「CSSって結局どう書くのがベストなの？」という悩みを感じたことがあるでしょう。 一見簡単なCSSですが、一度書き始めるとそのあまりの自由さに、まるで 大海原に放り出された赤子のような気分 になってしまいますよね。 人生何事も、ある程度制約があったほうがやりやすいものです。 そんなわけで今日はCSSの設計について考えてみましょう。 目次 どんな設計がある... 続きを読む

CSSが破綻する4つの理由 - Qiita

2015/04/30 566 users JSON Qiita 当人 CSS フォーマット

前回の「破綻しにくいCSS設計の法則 15」は思いがけず大変なご好評をいただきました。ただ書いた当人としては、まとまりに欠けていたように思えましたので、今回はもう少し本質的なところを書いてみたいと思います。 CSSとは実際のところ何か CSSが破綻する理由 破綻しないCSS設計とは 1. CSSとは実際のところ何か CSSはJSONと同様にシンプルなフォーマットで、基本的には以下のような構造になっ... 続きを読む

破綻しにくいCSS設計の法則 15 - Qiita

2015/04/17 666 users Qiita 法則

ブラウザスタイルは平坦化しておく リセットCSSはオプトアウト可能にしておく 登場頻度の高い組合せはplaceholderとして登録してから利用する 可能な限り画像はスプライト生成してから利用する それ以上分解不可能なコンポーネントは要素のように扱う コンポーネントは自己完結型のものを使う BEMはDRYになるよう粒度を下げる 可能な限り@extendは利用しない レスポンシブでない場所では、Ut... 続きを読む

昨今のCSS設計事情からみるCSS設計のあり方とは | HTML5Experts.jp

2015/04/15 466 users 昨今 補足 HTML5Experts.jp セッション 連載

連載： HTML5 Conference 2015 特集 (5)本記事は2015年1月に開催されたHTML5 Conferenceでお話させていただいた、 「Beyond CSS Architecture」というCSS設計のセッションをフォローアップする記事です。 本記事では、このセッションの概要と補足、またセッション中に説明できなかった点などについて書いていきます。 ※当日のセッションの動画・ス... 続きを読む

【生放送】CSS設計を学んで、拡張性と保守性に強いCSSを書こう！基礎〜実践導入 - 無料動画学習｜schoo（スクー）

2015/01/24 33 users schoo スクー 保守性 拡張性 生放送

※WEB教室の不具合には「ブラウザの更新」をお試しください。なお利用推奨環境以外では正常に作動しないことがありますのでご了承ください。 続きを読む

本当のCSS設計、もしくはWebページのデザインプロセス - morishitter blog

2015/01/05 61 users morishitter blog CSS デザインプロセス

2015-01-05 本当のCSS設計、もしくはWebページのデザインプロセス CSSの設計 = セレクタ名をどう付けるか、って思っている人が多いので、年も明けたしここらで一度「CSSを設計する」とはどういうことか、考えていることをまとめてみる。 セレクタ名をどう付けるか CSSのルールセットは現状全てグローバル定義なので、上手いセレクタ名を付けることで衝突を回避する必要がある。 そのための手法と... 続きを読む

神獄のヴァルハラゲートのCSS設計 - I'm kubosho_

2014/12/09 192 users ヴァルハラゲート I'm kubosho 神獄 アプリ ところ

2014-12-09 神獄のヴァルハラゲートのCSS設計 CSS Advent Calendar CSS Architecture Advent Calendar 2014 9日目の記事になります。 神獄のヴァルハラゲートのCSS設計方法について振り返りつつ、こうしているということや、上手くいったところ、改善したいところを書いていこうと思います。 アプリの規模 ASP.NET MVCを使っていて、... 続きを読む

Web制作者のためのCSS設計の教科書を読んだ - satococoa's blog

2014/12/08 84 users satococoa's blog 教科書 CSS View

2014-12-08 Web制作者のためのCSS設計の教科書を読んだ 読書 css 久しぶりに仕事で Web 側の view を作っていて web のフロントエンドの技術からだいぶ遅れてしまっていたことを実感したので、キャッチアップするために以下の本を読みました。 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法作者: 谷拓樹出版社/メーカー: ... 続きを読む

今年のネーミングルール #CSS設計 - < /gecko >

2014/12/01 74 users BEM Gecko CodeGrid CSS ハイフン

CSS Architecture Advent Calendar 2014 1日目の記事です。 CSSの設計をしていく上で大事なネーミングルール。 今年僕が関わったプロジェクトでのネーミングルールをゆるく紹介したいと思います。 こうやって名前をつけてました。 基本となる設計思想はBEMです。 BEMについては、 CodeGrid を御覧ください。 ネーミングルールを決めるとき、区切り文字をハイフン... 続きを読む

書籍『Web制作者のためのCSS設計の教科書』と出版記念イベント『CSSオジサン #0』のお話。 | よしぱんblog

2014/11/11 54 users hiloki Blog 書籍 教科書 出版記念イベント

先週の土曜日、2014年11月10日に谷 拓樹（@hiloki）さんの著書『Web制作者のためのCSS設計の教科書』出版記念イベント『CSSオジサン先週の土曜日、2014年11月10日に谷 拓樹（@hiloki）さんの著書『Web制作者のためのCSS設計の教科書』出版記念イベント『CSSオジサン #0』に行ってきました！ 2週間程前にUPした記事「今秋はWeb系セミナー（in関西）がいっぱいあるよ... 続きを読む

CSSオジサン #0に行ってきた - morishitter blog

2014/11/09 173 users フル CSS hilokiさん 著者 若者

2014-11-09 CSSオジサン #0に行ってきた 昨日大阪で開催された、CSSオジサンっていうCSSの勉強会に行ってきたのでその雑感。CSSオジサンってだけに若者は少なかった。女性の人が思ったよりいた印象ある。 発表は、最初がCSS設計の教科書の著者である@hilokiさん。@hilokiさんと言えばCSS設計。「メンテなブルであり続けるためのCSS設計」というタイトルの発表だった。CSSを... 続きを読む

修正しやすいCSSとは — MOL

2014/08/04 138 users hiloki 親交 MOL モダンCSS 石川

修正しやすいCSSとは 『CSS設計の教科書』はモダンCSSを探る最適なマップ @hilokiという男がいる。この男と初めて出会ったのは7年前だろうか、当時細々と石川でブログを書きながらWebデザイナーをしていた僕に初めて勉強会で声をかけてくれた人物である。 それ以来、当時彼が住んでいた大阪の勉強会と石川の勉強会で互いに参加しあったりして親交を深めていった。ついには2年という短い間ではあったが、某... 続きを読む

Web製作者のためのCSS設計の教科書 書評 | 1000ch.net

2014/08/04 46 users 書評 1000ch.net hiloki 教科書 有識

Web製作者のためのCSS設計の教科書 書評 ( •́谷•̀)「CSSの本書いたよーヽ(=´▽`=)ﾉ」 ということで@hilokiさんから頂きました。ありがとうございます。 著者（@hiloki）について 前著も有名で、私から改めて紹介するまでもないかもしれませんが、カンファレンスや様々な勉強会でCSSについての講演を数多く行ってきており、 CSSが持つ弱点を理解し、設計の重要性を訴えてきた有識... 続きを読む

CSSの基本から理解を深め一つ上のスキルを身につける、他書とはひと味もふた味も異なるオススメの本 -CSS設計の教科書 | コリス

2014/07/31 114 users 良書 コリス ゴール CSS Googleエンジニア

その場限りのCSSを使うのではなく、CSSの基本からしっかりと理解を深め、運用期間が長くても安心して使えるCSS、大規模なサイトでも管理できるCSSを身につけたい人に役立つ一冊を紹介します。 単にコードを書くだけではなく、設計・管理・運用を考えた『ちゃんとしたCSS』が徹底的に解説された良書です。 GoogleエンジニアのPhilip Walton氏によると、より良いCSSのゴールとして次の4つの... 続きを読む