Enviar búsqueda
Cargar
グローバルなCSSコンポーネントを避ける
•
2 recomendaciones
•
2,914 vistas
Manabu Yasuda
Seguir
「CSS Talk Vol.4」の資料です。
Leer menos
Leer más
Ingeniería
Denunciar
Compartir
Denunciar
Compartir
1 de 32
Descargar ahora
Descargar para leer sin conexión
Recomendados
コンポーネント指向と余白の設計
コンポーネント指向と余白の設計
Manabu Yasuda
トランザクションスクリプトのすすめ
トランザクションスクリプトのすすめ
pospome
ユーザーストーリー駆動開発で行こう。
ユーザーストーリー駆動開発で行こう。
toshihiro ichitani
図解gitworkflows(7)
図解gitworkflows(7)
ktateish
継承やめろマジやめろ。 なぜイケないのか 解説する
継承やめろマジやめろ。 なぜイケないのか 解説する
TaishiYamada1
PHPerだってMicroservicesしたい!
PHPerだってMicroservicesしたい!
Shinichi Takahashi
ここがつらいよAws batch
ここがつらいよAws batch
Yu Yamada
どこに何を書くのか?
どこに何を書くのか?
pospome
Recomendados
コンポーネント指向と余白の設計
コンポーネント指向と余白の設計
Manabu Yasuda
トランザクションスクリプトのすすめ
トランザクションスクリプトのすすめ
pospome
ユーザーストーリー駆動開発で行こう。
ユーザーストーリー駆動開発で行こう。
toshihiro ichitani
図解gitworkflows(7)
図解gitworkflows(7)
ktateish
継承やめろマジやめろ。 なぜイケないのか 解説する
継承やめろマジやめろ。 なぜイケないのか 解説する
TaishiYamada1
PHPerだってMicroservicesしたい!
PHPerだってMicroservicesしたい!
Shinichi Takahashi
ここがつらいよAws batch
ここがつらいよAws batch
Yu Yamada
どこに何を書くのか?
どこに何を書くのか?
pospome
老害について
老害について
Ken SASAKI
MS Wordで論文を書くTips集
MS Wordで論文を書くTips集
Tomosuke Maeda
料理を楽しくする画像配信システム
料理を楽しくする画像配信システム
Issei Naruta
凡人の凡人による凡人のためのデザインパターン第一幕 Public
凡人の凡人による凡人のためのデザインパターン第一幕 Public
bonjin6770 Kurosawa
世界一わかりやすいClean Architecture release-preview
世界一わかりやすいClean Architecture release-preview
Atsushi Nakamura
NGK2023S ChatGPT
NGK2023S ChatGPT
陽平 山口
Go言語によるwebアプリの作り方
Go言語によるwebアプリの作り方
Yasutaka Kawamoto
スクラムパタン入門
スクラムパタン入門
Kiro Harada
リファクタリングで実装が○○分短縮した話
リファクタリングで実装が○○分短縮した話
infinite_loop
DDDオンライン勉強会#2 「集約・境界付けられたコンテキスト」
DDDオンライン勉強会#2 「集約・境界付けられたコンテキスト」
Koichiro Matsuoka
ChatGPT + LlamaIndex 0 .6 による チャットボット の実装
ChatGPT + LlamaIndex 0 .6 による チャットボット の実装
Takanari Tokuwa
cvpaper.challenge -CVの動向とこれからの問題を作るために- (東京大学講演)
cvpaper.challenge -CVの動向とこれからの問題を作るために- (東京大学講演)
cvpaper. challenge
深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで
深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで
Yahoo!デベロッパーネットワーク
Dangerでpull requestレビューの指摘事項を減らす
Dangerでpull requestレビューの指摘事項を減らす
Shunsuke Maeda
PostgreSQLコミュニティに飛び込もう
PostgreSQLコミュニティに飛び込もう
NTT DATA OSS Professional Services
Laravelでfacadeを使わない開発
Laravelでfacadeを使わない開発
Kenjiro Kubota
async/await不要論
async/await不要論
bleis tift
Design Sprint Process / デザインスプリントの実際のプロセスについて
Design Sprint Process / デザインスプリントの実際のプロセスについて
Takaaki Umada
PostgreSQLではじめるOSS開発@OSC 2014 Hiroshima
PostgreSQLではじめるOSS開発@OSC 2014 Hiroshima
Shigeru Hanada
あなたのスタートアップのアイデアの育てかた
あなたのスタートアップのアイデアの育てかた
Takaaki Umada
エンジニアとデザイナーとの距離
エンジニアとデザイナーとの距離
Manabu Yasuda
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
Más contenido relacionado
La actualidad más candente
老害について
老害について
Ken SASAKI
MS Wordで論文を書くTips集
MS Wordで論文を書くTips集
Tomosuke Maeda
料理を楽しくする画像配信システム
料理を楽しくする画像配信システム
Issei Naruta
凡人の凡人による凡人のためのデザインパターン第一幕 Public
凡人の凡人による凡人のためのデザインパターン第一幕 Public
bonjin6770 Kurosawa
世界一わかりやすいClean Architecture release-preview
世界一わかりやすいClean Architecture release-preview
Atsushi Nakamura
NGK2023S ChatGPT
NGK2023S ChatGPT
陽平 山口
Go言語によるwebアプリの作り方
Go言語によるwebアプリの作り方
Yasutaka Kawamoto
スクラムパタン入門
スクラムパタン入門
Kiro Harada
リファクタリングで実装が○○分短縮した話
リファクタリングで実装が○○分短縮した話
infinite_loop
DDDオンライン勉強会#2 「集約・境界付けられたコンテキスト」
DDDオンライン勉強会#2 「集約・境界付けられたコンテキスト」
Koichiro Matsuoka
ChatGPT + LlamaIndex 0 .6 による チャットボット の実装
ChatGPT + LlamaIndex 0 .6 による チャットボット の実装
Takanari Tokuwa
cvpaper.challenge -CVの動向とこれからの問題を作るために- (東京大学講演)
cvpaper.challenge -CVの動向とこれからの問題を作るために- (東京大学講演)
cvpaper. challenge
深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで
深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで
Yahoo!デベロッパーネットワーク
Dangerでpull requestレビューの指摘事項を減らす
Dangerでpull requestレビューの指摘事項を減らす
Shunsuke Maeda
PostgreSQLコミュニティに飛び込もう
PostgreSQLコミュニティに飛び込もう
NTT DATA OSS Professional Services
Laravelでfacadeを使わない開発
Laravelでfacadeを使わない開発
Kenjiro Kubota
async/await不要論
async/await不要論
bleis tift
Design Sprint Process / デザインスプリントの実際のプロセスについて
Design Sprint Process / デザインスプリントの実際のプロセスについて
Takaaki Umada
PostgreSQLではじめるOSS開発@OSC 2014 Hiroshima
PostgreSQLではじめるOSS開発@OSC 2014 Hiroshima
Shigeru Hanada
あなたのスタートアップのアイデアの育てかた
あなたのスタートアップのアイデアの育てかた
Takaaki Umada
La actualidad más candente
(20)
老害について
老害について
MS Wordで論文を書くTips集
MS Wordで論文を書くTips集
料理を楽しくする画像配信システム
料理を楽しくする画像配信システム
凡人の凡人による凡人のためのデザインパターン第一幕 Public
凡人の凡人による凡人のためのデザインパターン第一幕 Public
世界一わかりやすいClean Architecture release-preview
世界一わかりやすいClean Architecture release-preview
NGK2023S ChatGPT
NGK2023S ChatGPT
Go言語によるwebアプリの作り方
Go言語によるwebアプリの作り方
スクラムパタン入門
スクラムパタン入門
リファクタリングで実装が○○分短縮した話
リファクタリングで実装が○○分短縮した話
DDDオンライン勉強会#2 「集約・境界付けられたコンテキスト」
DDDオンライン勉強会#2 「集約・境界付けられたコンテキスト」
ChatGPT + LlamaIndex 0 .6 による チャットボット の実装
ChatGPT + LlamaIndex 0 .6 による チャットボット の実装
cvpaper.challenge -CVの動向とこれからの問題を作るために- (東京大学講演)
cvpaper.challenge -CVの動向とこれからの問題を作るために- (東京大学講演)
深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで
深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで
Dangerでpull requestレビューの指摘事項を減らす
Dangerでpull requestレビューの指摘事項を減らす
PostgreSQLコミュニティに飛び込もう
PostgreSQLコミュニティに飛び込もう
Laravelでfacadeを使わない開発
Laravelでfacadeを使わない開発
async/await不要論
async/await不要論
Design Sprint Process / デザインスプリントの実際のプロセスについて
Design Sprint Process / デザインスプリントの実際のプロセスについて
PostgreSQLではじめるOSS開発@OSC 2014 Hiroshima
PostgreSQLではじめるOSS開発@OSC 2014 Hiroshima
あなたのスタートアップのアイデアの育てかた
あなたのスタートアップのアイデアの育てかた
Similar a グローバルなCSSコンポーネントを避ける
エンジニアとデザイナーとの距離
エンジニアとデザイナーとの距離
Manabu Yasuda
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
Yasuhito Yabe
WordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えること
Web nist
CSS Nite in SAPPORO x a-blog cms
CSS Nite in SAPPORO x a-blog cms
Seiko Kuchida
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
あるマークアップエンジニアの初期制作時のテンプレ事情
あるマークアップエンジニアの初期制作時のテンプレ事情
Shingo Iwahori
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
優也 田島
SMACSS入門
SMACSS入門
iPride Co., Ltd.
Enduring CSS
Enduring CSS
Takazudo
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
Sou Lab
Web制作勉強会 #1
Web制作勉強会 #1
Moto Yan
a-sap 07セッション「Movable Typeとa-blog cmsの今」
a-sap 07セッション「Movable Typeとa-blog cmsの今」
Seiko Kuchida
Dreamweaver コードヒントHowTo
Dreamweaver コードヒントHowTo
Akira Maruyama
テーマ・プラグイン 公開のススメ WordCampTokyo2012
テーマ・プラグイン 公開のススメ WordCampTokyo2012
Hidekazu Ishikawa
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
Atushi Sugiyama
Word press初心者が 基本アーキテクチャを ざっくりと学ぶ
Word press初心者が 基本アーキテクチャを ざっくりと学ぶ
climbFrog
まだやれる Css preprocesser
まだやれる Css preprocesser
Shinya Sugo
超初心者のためのWordPressのサイトのデザインの微調整方法
超初心者のためのWordPressのサイトのデザインの微調整方法
Hidekazu Ishikawa
Similar a グローバルなCSSコンポーネントを避ける
(20)
エンジニアとデザイナーとの距離
エンジニアとデザイナーとの距離
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
WordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えること
CSS Nite in SAPPORO x a-blog cms
CSS Nite in SAPPORO x a-blog cms
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
あるマークアップエンジニアの初期制作時のテンプレ事情
あるマークアップエンジニアの初期制作時のテンプレ事情
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
SMACSS入門
SMACSS入門
Enduring CSS
Enduring CSS
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
Web制作勉強会 #1
Web制作勉強会 #1
a-sap 07セッション「Movable Typeとa-blog cmsの今」
a-sap 07セッション「Movable Typeとa-blog cmsの今」
Dreamweaver コードヒントHowTo
Dreamweaver コードヒントHowTo
テーマ・プラグイン 公開のススメ WordCampTokyo2012
テーマ・プラグイン 公開のススメ WordCampTokyo2012
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
Word press初心者が 基本アーキテクチャを ざっくりと学ぶ
Word press初心者が 基本アーキテクチャを ざっくりと学ぶ
まだやれる Css preprocesser
まだやれる Css preprocesser
超初心者のためのWordPressのサイトのデザインの微調整方法
超初心者のためのWordPressのサイトのデザインの微調整方法
グローバルなCSSコンポーネントを避ける
1.
CSS Talk vol.04
Manabu Yasuda グローバルな CSSコンポーネントを避ける
2.
このような会話 をしたことはありませんか?
3.
デザイナー ここだけ少し見せ方変えたいです。 コーダー このコンポーネントはサイト共通なので、 サイト内のすべてに反映されますがいいですか? …(見せ方をちょっと変えたいだけなんだけどなあ)。
4.
INTRODUCTION 自己紹介
5.
安田 学 (Yasuda
Manabu) 株式会社 TAM マークアップエンジニア https://github.com/manabuyasuda @ Gaku0318
6.
「ここだけ少しデザインを変えたい」 という要望があるときに、 コーディングには2つの選択肢があります。
7.
1. OOCSSのSkinや BEMのModifierで拡張する 2.
別のコンポーネントとして追加する
8.
拡張するのか、別のコンポーネントにするのか、 どちらが適切?
9.
拡張するパターンが増えてくると 適切な名前がつけられなくなってしまって 連番になってしまったりすることも。
10.
パっと見た感じでは、同じ見た目だけど 適切なルールセットが違う場合も。
11.
text-align: center;margin: 0
auto; or float or inline-block or table or flexbox
12.
グローバルなCSSコンポーネントは 迷うことが実は多い。
13.
グローバルなCSSコンポーネントは避けて ローカルなCSSコンポーネントを つくっていくのが、ベター。
14.
ローカルなCSSコンポーネントを つくる方法。
15.
名前空間(接頭辞・プレフィックス)をつ けて擬似ローカルスコープをつくる。
16.
FLOCSSをはじめとして コンポーネント名に名前空間をつけることが 一般的になってきています。
17.
・Layout - .l- ・Component
- .c- ・Project - .p- ・Utility - .u-
18.
でも、今必要なことは コンポーネントの役割を示すことではなく そのコンポーネントがどこで使われるのかを 示すこと。
19.
・HomePage - .home- ・TopPage
- .top- ・Products - .products-
20.
どのコンポーネントが どの範囲で共通化されているかを 共有・把握することができるようになります。
21.
このような会話 ができるようになります。
22.
デザイナー ここだけ少し見せ方変えたいです。 コーダー このコンポーネントは製品関連ページで 共通化しているので、 その中のすべてに反映されますがいいですか?
23.
ローカルなCSSコンポーネントは 影響範囲が把握できるようになります。
24.
もしくは
25.
デザイナー ありがとうございます! デザイン送りますね。 コーダー このコンポーネントは このページ専用にしているので大丈夫ですよ。
26.
無理に共通化しないことで、 円滑にデザインの変更ができるようになります。
27.
コンポーネントのスコープの 目安は?
28.
・ホームページ ・カテゴリートップページ ・カテゴリー詳細ページ ・採用情報ページ ・検索結果ページ ・サイトマップページ
29.
はじめにザックリと分けて、必要に応じて 細分化していく。 スコープの切り方は 案件の内容とデザイン次第で決めていく。
30.
CSSはデザインを実現するための ツールの1つ。 CSSがデザインのボトルネックに ならない工夫が必要。
31.
完璧なコードを目指すより いつでも柔軟に変更できるコードを 目指していきましょう。
32.
ありがとうございました。
Descargar ahora