$30 off During Our Annual Pro Sale. View Details »

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

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

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
3
430
Google Cloud を用いたソフトウェア開発の内製化組織の早期立ち上げの実現 / Rapid Establishment of In-House Software Development Teams Using Google Cloud
Avatar for Yuichi Goto yasaichi
1
1.6k
[EN] Robust and Scalable API Gateway Built on Effect
Avatar for Yuichi Goto yasaichi
3
380
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
Avatar for Yuichi Goto yasaichi
9
2.4k
あるRailsエンジニアがビジネスリーダーに転身するまで
Avatar for Yuichi Goto yasaichi
9
3.1k
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
470
Ruby on Railsの正体と向き合い方 / What is Ruby on Rails and how to deal with it?
Avatar for Yuichi Goto yasaichi
145
93k

Other Decks in Technology

See All in Technology
「Managed Instances」と「durable functions」で広がるAWS Lambdaのユースケース
Avatar for Lamaglama39 lamaglama39
0
320
Challenging Hardware Contests with Zephyr and Lessons Learned
Avatar for misoji engineer iotengineer22
0
220
Edge AI Performance on Zephyr Pico vs. Pico 2
Avatar for misoji engineer iotengineer22
0
160
評価駆動開発で不確実性を制御する - MLflow 3が支えるエージェント開発
Avatar for Databricks Japan databricksjapan
1
200
今からでも間に合う！速習Devin入門とその活用方法
Avatar for Izumu KUSUNOKI ismk
1
720
Database イノベーショントークを振り返る/reinvent-2025-database-innovation-talk-recap
Avatar for emi emiki
0
190
文字列の並び順 / Unicode Collation
Avatar for とみたまさひろ tmtms
3
590
[JAWS-UG 横浜支部 #91]DevOps Agent vs CloudWatch Investigations -比較と実践-
Avatar for sh_fk2 sh_fk2
2
260
Snowflakeでデータ基盤を もう一度作り直すなら / rebuilding-data-platform-with-snowflake
Avatar for pei0804 pei0804
6
1.6k
AWS re:Invent 2025で見たGrafana最新機能の紹介
Avatar for 濱田孝治 hamadakoji
0
390
【AWS re:Invent 2025速報】AIビルダー向けアップデートをまとめて解説！
Avatar for みのるん minorun365
4
530
Oracle Cloud Infrastructure IaaS 新機能アップデート 2025/09 - 2025/11
Avatar for oracle4engineer oracle4engineer
PRO
0
140

Featured

See All Featured
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.4k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
1k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
76
5.2k

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. ͓ർΕ͞·Ͱͨ͠ʂ