Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSSモジュール ― 明るい未来へようこそ / techcamp02

Avatar for Yuichi Goto Yuichi Goto
August 14, 2016
Technology
0
220

CSSモジュール ― 明るい未来へようこそ / techcamp02

第2回開発合宿（2016/08/14）
Avatar for Yuichi Goto

Yuichi Goto

August 14, 2016
Tweet

More Decks by Yuichi Goto

See All by Yuichi Goto
[Teaser] Type-Safe Lightweight DDD with Effect Schema
Avatar for Yuichi Goto yasaichi
2
330
Google Cloud を用いたソフトウェア開発の内製化組織の早期立ち上げの実現 / Rapid Establishment of In-House Software Development Teams Using Google Cloud
Avatar for Yuichi Goto yasaichi
1
1.5k
[EN] Robust and Scalable API Gateway Built on Effect
Avatar for Yuichi Goto yasaichi
3
300
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
Avatar for Yuichi Goto yasaichi
9
2.3k
あるRailsエンジニアがビジネスリーダーに転身するまで
Avatar for Yuichi Goto yasaichi
8
3k
Active Recordから考える次の10年を見据えた技術選定 / Architecture decision for the next 10 years at PIXTA
Avatar for Yuichi Goto yasaichi
50
22k
Active Recordから考える次世代のRuby on Railsの方向性 / Directions for the next generation of Ruby on Rails: From the viewpoint of its Active Record
Avatar for Yuichi Goto yasaichi
38
21k
ピクスタのエンジニアリングとCircleCI / Software Engineering with CircleCI at PIXTA
Avatar for Yuichi Goto yasaichi
1
440
Ruby on Railsの正体と向き合い方 / What is Ruby on Rails and how to deal with it?
Avatar for Yuichi Goto yasaichi
144
92k

Other Decks in Technology

See All in Technology
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
Avatar for goldfinch3710 flyaahelpguide
0
230
CDK Vibe Coding Fes
Avatar for tomoki10 tomoki10
1
450
AIの全社活用を推進するための安全なレールを敷いた話
Avatar for ShoheiMitani shoheimitani
2
610
第４回Snowflake 金融ユーザー会 Snowflake summit recap
Avatar for Makoto tamaoki
1
330
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
Avatar for Nstock nstock
0
270
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
Avatar for markhor64456 airhelpsupport
0
390
Contributing to Rails? Start with the Gems You Already Use
Avatar for Yasuo Honda yahonda
2
120
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
Avatar for shotaTsuge shotatsuge
4
700
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
Avatar for Nobuto Murata nobutomurata
2
130
ポストコロナ時代の SaaS におけるコスト削減の意義
Avatar for izzii izzii
1
190
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
Avatar for watany watany
14
5.8k
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
Avatar for SansanTech sansantech
PRO
0
140

Featured

See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
281
13k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
86
4.7k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
5.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
830
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
181
54k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
8
700

Transcript

  1. CSSϞδϡʔϧ ― ໌Δ͍ະདྷ΁Α͏ͦ͜ ୈ2ճ։ൃ߹॓੒Ռൃදɹ@yasaichi

  2. ൃදߏ੒ 1. എܠͱ໨త 2. ख๏֓ཁ 3. ࣮ࡍʹ࢖ͬͯΈͨ 4. ॴײ

  3. എܠͱ໨త

  4. എܠ: CSS Modules • ҎԼΛಡΜͰCSS ModulesʹڵຯΛ࣋ͭ • State of React

    and CSS • CSSϞδϡʔϧ ― ໌Δ͍ະདྷ΁Α͏ͦ͜ ʢ͜ͷεϥΠυͷλΠτϧͷݩωλʣ • Modular CSS with React

  5. CSSʹରͯ͠ͷΞϯςφ͕
 ߴ·ͬͨঢ়ଶʹ

  6. എܠ: PostCSS • ͞ΒʹҎԼΛಡΜͰPostCSSͱ͍͏ಈ͖͕͋Δ ͜ͱΛ஌Δ • morishitterͷCSSͷॻ͖ํʢ2016೥Նʣ • [ৄղ] ϞμϯCSS:

    ه๏ɼελΠϧͷ؅ཧɼ PostCSSʢWEB+DB PRESS Vol.93ʣ

  7. ࠓճͷ߹॓ͷ໨త • ର৅ɿhttps://github.com/yasaichi/ minesweeper-reactjs • CSS ModulesΛ࢖ͬͯCSSΛॻ͍ͯΈΔ • PostCSSΛ࢖ͬͯCSSͷ "τϥϯεύΠϧ"

    ʢCSS to CSSʣΛମݧ͢Δ

  8. ख๏֓ཁ

  9. CSS Modules • CSSͷ৽͍͠ઃܭ֓೦ or ࢦ਑ • ϧʔϧηοτͷӨڹൣғΛίϯϙʔωϯτ
 ୯ҐͰดͯ͡͠·͓͏ͱ͍͏ͷ͕ओͳߟ͑ •

    BEMͳͲͷઃܭख๏Λ࢖Θͣʹࡶʹॻ͍ͯ΋ ·͋·͋ഁ୼͠ʹ͍͘CSS͕ಘΒΕΔ

  10. αϯϓϧ import React from 'react'; import styles from './style.css'; export

    default class Logo extends React.Component { render() { return <div className={styles.square} />; } }; /* style.css */ .square { width: 200px; height: 200px; }

  11. build͢Δͱ ._1uhuc_qi65HzMlHqmlWStu { width: 200px; height: 200px } <!DOCTYPE html>

    <html> <body> <div id="container"> <div data-reactroot="" class="_1uhuc_qi65HzMlHqmlWStu"></div> </div> </body> </html> React ComponentʹରԠ ͢Δclass͕ద༻͞ΕΔ άϩʔόϧۭؒͰҰҙͳ Ϋϥε໊ʹม׵͞ΕΔ

  12. PostCSS • "PostCSS is a tool for transforming styles with

    JS plugins"ʢGitHubͷϦϙδτϦΑΓʣ • ௒ͬ͘͟Γݴ͏ͱCSSʹ͓͚ΔBabel • Babelͱಉ༷ʹ͞·͟·ͳϓϥάΠϯ͕͋Δ
 ʢe.g. Autoprefixer, cssnext ͳͲʣ

  13. ࣮ࡍʹ࢖ͬͯΈͨ

  14. ߹॓Ҏલͷminesweeper • Ұ೥લ͘Β͍ʹReactͷษڧ͕ͯΒ࡞ͬͨ • React (0.13.3) • Gulp • Browserify

    • Radium

  15. σϞʢͦͷ1ʣ

  16. ߹॓ޙͷminesweeper • 2016೥ͬΆ͍ײ͡ʹΞοϓσʔτ • React (15.3.0) • npm-scripts • webpack

    • CSS Modules + cssnext + PostCSS

  17. σϞʢͦͷ2ʣ

  18. ॴײ

  19. ໌Δ͍ະདྷʁ • CSSͷʢະདྷͷʣඪ४͕ऑ͍ͷͰॻ͍͍ͯͯ
 ਏ͍৔໘͕͋Δʢe.g. eachతͳͷ࢖͍͍ͨʣ • σόοάͷͨΊͷ͍͍࢓૊Έ͕·ͩͳ͍ • ݪ୊͸”CSS Modules:

    Welcome to the Future” -> ະདྷ͕໌Δ͍ͱ͸Ұݴ΋ʢry

  20. ͓ർΕ͞·Ͱͨ͠ʂ