Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
スタイル警察24時 / style police 24h
Search
otsuky
December 20, 2019
Technology
1
410
スタイル警察24時 / style police 24h
みんなでいいCSS書いていこうなって話
otsuky
December 20, 2019
Tweet
Share
Other Decks in Technology
See All in Technology
より快適なエラーログ監視を目指して
leveragestech
4
1.4k
AIで変わるテスト自動化:最新ツールの多様なアプローチ/ 20240910 Takahiro Kaneyama
shift_evolve
0
200
持続可能なソフトウェア開発を支える『GitHub CI/CD実践ガイド』
tmknom
4
280
Segment Anything Model 2
tenten0727
3
650
チームビルディングは"感性"で向き合おう / Team Building with Awareness
kohzas
0
160
AWS SAW を広めたい @四国クラウドお遍路
kazzpapa3
0
230
あなたの知らないiOS開発の世界
recruitengineers
PRO
3
130
OCI で始める!! Red Hat OpenShift / Get Started OpenShift on OCI
oracle4engineer
PRO
1
160
サーバレスでモバイルアプリ開発! NTTコム「ビジネスdアプリ」のアーキテクチャ / The architecture of business d app
nttcom
12
230
React Aria で実現する次世代のアクセシビリティ
ryo_manba
4
1.2k
PdMはどのように全てのスピードを上げられるか ~ 非連続進化のための具体的な取り組み ~
sansantech
PRO
3
930
スーパーマリオRPGのリメイク版の変更点からみるUX
nishiharatsubasa
1
340
Featured
See All Featured
Done Done
chrislema
180
16k
Practical Orchestrator
shlominoach
185
10k
Docker and Python
trallard
39
3k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.2k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
How GitHub Uses GitHub to Build GitHub
holman
472
290k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Designing for Performance
lara
604
68k
Building Flexible Design Systems
yeseniaperezcruz
325
37k
Why Our Code Smells
bkeepers
PRO
334
56k
KATA
mclloyd
27
13k
Transcript
ελΠϧܯ ࣌ ★ ★ ★ ★ ★ ★ ★ ★
2 େ݄ ༎Ղࢠ ࡀͰԦͷૉ࣭Λ։Ֆͤ͞Δͱ༧ݴΛड͚Δ ˔ ۙگ ˔ ͖ͳ$44ϧʔϧηοτ QPJOUFSFWFOUTOPOF QPTJUJPOTUJDLZ
@yukako_otsuki
3 ࠓಛʹ ৽͍͠͠·ͤΜ
4 $44ͷΛ͠·͢
5 ྑ͍ελΠϧͬͯ ͳΜͩΖ͏
6 ѱ͍ελΠϧͬͯ ͳΜͩΖ͏
7 ϨϏϡʔͷ࣌ʹେʹ͍ͯ͠Δ؍ ύϑΥʔϚϯε ։ൃޮ σβΠϯ࠶ݱੑ ύϑΥʔϚϯε
8 ։ൃޮ
9 The Goals of Good CSS Architecture ϝϯςφϯεੑ ˔ 1SFEJDUBCMF
ʜ༧ଌ͍͢͠ ˔ 3FVTBCMF ʜ࠶ར༻͍͢͠ ˔ .BJOUBJOBCMF ʜอक͍͢͠ ˔ 4DBMBCMF ʜ֦ு͍͢͠ https://philipwalton.com/articles/css-architecture/
10 Predictable ༧ଌ͍͢͠ “༧ଌՄೳͳ$44ɺϧʔϧ͕ظͲ͓Γʹಈ࡞͢Δ͜ͱΛҙຯ ͠·͢ɻ ϧʔϧΛՃ·ͨߋ৽͢Δ߹ɺҙਤ͠ͳ͍αΠτͷ෦ʹ ӨڹΛ༩͑ͯͳΓ·ͤΜɻ
11 Not predictableͳελΠϧ
12 Not predictableͳελΠϧ ˔ ελΠϧΛଧͪফ͍ͯ͠Δ ˔ ηϨΫλʹΫϥεͱλά͕ࠞࡏ͍ͯ͠Δ ˔ Ϋϥε໊ͱݟ͕ͨҰக͠ͳ͍ ˔
ηϨΫλͷৄࡉ͕ೖΓཚΕ͍ͯΔ
13 Reusable “$44ϧʔϧநతͰɺेʹ͞Ε͍ͯΔඞཁ͕͋Γ·͢ɻ ͜ΕʹΑΓɺطʹղܾͨ͠ύλʔϯΛ࠶ίʔσΟϯά͢ Δ͜ͱͳ͘ɺطଘͷύʔπ͔Β৽͍͠ίϯϙʔωϯτΛ͢ ͘ߏஙͰ͖·͢ɻ ࠶ར༻͍͢͠
14 Maintainable “αΠτͰ৽͍͠ίϯϙʔωϯτػೳΛՃɺߋ৽ɺ࠶ஔ͢ Δඞཁ͕͋Δ߹ɺطଘͷ$44ΛϦϑΝΫλϦϯά͢Δඞཁ͕ ͋Γ·ͤΜɻ ίϯϙʔωϯτ9ΛϖʔδʹՃͯ͠ɺͦͷଘࡏ͚ͩͰίϯ ϙʔωϯτ:͕յΕ͍͚ͯ·ͤΜɻ อक͍͢͠
15 Scalable “εέʔϥϒϧͳ$44ɺҰਓ·ͨେنͳΤϯδχΞ ϦϯάνʔϜ͕؆୯ʹཧͰ͖Δ͜ͱΛҙຯ͠·͢ɻ ·ͨɺେͳֶशۂઢΛඞཁͱͤͣʹɺαΠτͷ$44Ξ ʔΩςΫνϟʹ؆୯ʹΞΫηεͰ͖·͢ɻ ֦ு͍͢͠
16 ScalableͳελΠϧʹ͢ΔͨΊʹ ίϯϙʔωϯτઃܭʹΑΓ ؔ৺ͷɾΧϓηϧԽΛߦ͏ ˣ $44JO+4PS$44ઃܭख๏ΛऔΓೖΕΔ
17 σβΠϯ࠶ݱੑ
18 σβΠϯ࠶ݱੑ σβΠϯ௨Γͷݟͨʹͳ͍ͬͯΔ͔
19 σβΠϯ௨Γͷݟͨͱ ϝϯςφϯεੑ ˔ ΟϯυαΠζΛม͑ͨ࣌ ˔ ΟϯυͷॎԣදࣔΛม͑ͨ࣌ ˔ ಈతʹऔಘ͢ΔՕॴʹσβΠϯσʔλҎ֎ͷσʔλ͕ೖ ͖ͬͯͨ࣌
˔ $ISPNFҎ֎ͷϒϥβͰදࣔͨ࣌͠ ˔ ϒϥβͷػೳͰςΩεταΠζΛมߋͨ࣌͠ ˔ ֦େɾॖখදࣔͨ࣌͠
20 σβΠϯ௨Γͷݟͨͱ ϝϯςφϯεੑ ˔ ΟϯυαΠζΛม͑ͨ࣌ ˔ ΟϯυͷॎԣදࣔΛม͑ͨ࣌ ˔ ಈతʹऔಘ͢ΔՕॴʹσβΠϯσʔλҎ֎ͷσʔλ͕ೖ ͖ͬͯͨ࣌
˔ $ISPNFҎ֎ͷϒϥβͰදࣔͨ࣌͠ ˔ ϒϥβͷػೳͰςΩεταΠζΛมߋͨ࣌͠ ˔ ֦େɾॖখදࣔͨ࣌͠ ද่͕ࣔΕͳ͍͔ σβΠφʔ͞Μͷҙਤ͕͖ͪΜͱө͞Ε͍ͯΔ͔
21 ύϑΥʔϚϯε
22 ύϑΥʔϚϯεΛߟྀͨ͠ελΠϧ ϝϯςφϯεੑ ˔ %0.ΛඞཁҎ্ʹਂ͘ͳ͍ ʜϚονϯά͢ΔηϨΫλΛ૯ͨΓͰ୳͢ ˔ ແବͳελΠϧ͕ͳ͍ ʜελΠϧඞཁͳͱ͜Ζʹඞཁͳ͚ͩ ʜϕϯμʔϓϨϑΟοΫεͷ࠷దԽ
˔ ϨϯμϦϯάͷෛՙ͕ߟྀ͞Ε͍ͯΔ ʜϝσΟΞΫΤϦͷ࠷దԽ ʜ$44Ξχϝʔγϣϯͷ࠷దԽ ˔ ηϨΫλ͕࠷దԽ͞Ε͍ͯΔ ʜηϨΫλӈ͔Βࠨর߹͞ΕΔ ʜࢠଙɾؒɾશশηϨΫλͷଟ༻Λආ͚Δ
23 $44JO+4ʹΑΔ Ըܙ
24 $44JO+4ʹΑΔԸܙ ։ൃޮ ύϑΥʔϚϯε ਓ͕ؒࣗΒߟ͑ͳ͚Εͳͯ͘࠷ݶ୲อͰ͖ΔϨϕϧ্͕͕ͬͨ
25 Α͋͘Δ ୁัࣄҊ
26
27 JNQPSUBOU Λࢦఆ͍ͯ͠Δ
28 JNQPSUBOU Λࢦఆ͍ͯ͠Δ ! ৄࡉઃܭͷΧΦεԽ͕ଅਐͯ͠͠·͍·͢ Ͳ͏ͯ͠ͷ߹ίϝϯτʹཧ༝Λڙड़͠·͠ΐ͏
29 ෆཁͳελΠϧ͕ ଘࡏ͢Δ
30 ෆཁͳελΠϧ͕ ଘࡏ͢Δ ! σβΠϯσʔλ͔ΒίϐϖͨελΠϧΛ ͦͷ··͍͚ͬͯ·ͤΜ
31 ྫ֎GMFYCBTJT WBMVF͕zzͷͱ͖ʹ ୯Ґ͕ࢦఆ͞Ε͍ͯΔ
32 ྫ֎GMFYCBTJT WBMVF͕zzͷͱ͖ʹ ୯Ґ͕ࢦఆ͞Ε͍ͯΔ ! ෆཁͳͷॻ͔͔ͳ͍ͷ͕ݪଇͰ͢
33 MJOFIFJHIUʹ ୯Ґ͕ࢦఆ͞Ε͍ͯΔ
34 MJOFIFJHIUʹ ୯Ґ͕ࢦఆ͞Ε͍ͯΔ ! ϒϥβͷػೳͰจࣈΛେ͖ͨ࣌͘͠ʹද่͕ࣔΕ·͢
35 NBSHJO͕ ૬ࡴ͞Ε͍ͯΔ
36 NBSHJO͕ ૬ࡴ͞Ε͍ͯΔ ! मਖ਼ͨ͠Γ࠶ར༻ͨ͠Γ͢Δࡍʹ͏·͍͔͘ͳ͍ݪҼʹͳΓ·͢
37 ࣏҆ҡ࣋ͷ ৬࣭ ͷϧʔϧ
38 IFJHIU͕ܾΊଧͪͰ ࢦఆ͞Ε͍ͯΔ
39 ωΨςΟϒNBSHJO
40 qFYCPYҎ֎Ͱͷԣฒͼ PS(SJE-BZPVU
41 qFYCPYҎ֎Ͱ্Լதԝدͤ PS(SJE-BZPVU
42 BCTPMVUFΛࢦఆ͍ͯ͠Δ ཁૉͷલʹ SFMBUJWFͷཁૉ͕͍ͳ͍
43 ࣏҆ҡ࣋ʹ༗ޮͳ ϕετ ϓϥΫςΟε
44 NBSHJOͷ͖Λଗ͑Δ
45 GPOUTJ[Fͷ ୯ҐzSFNz
46 CPYTJ[JOHCPSEFSCPY Λࢦఆ͢Δ
47 πʔϧΛར༻͢Δ
48 ݸݸ ࡉ͔͍͜ͱ͚ͩͲ
49
50 ͏ʔΜ৮ͬͯͳ͍ϖʔδͷ ελΠϧ͕มΘͬͪΌͬͯΔΑ͓
51 ࣗ·ͩ·ͩ
52 ΈΜͳͰ͍͍$44 ॻ͍͍ͯ͜͏ͳʂ
53