ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈ ΡΠΎΡΠΌΡΠ»ΠΈΡΠΎΠ²ΠΊΠ° ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ
ΠΡ ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡΠ΄Ρ ΡΡΠΎΠ»ΠΊΠ½ΡΠ»ΠΈΡΡ Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ Π²ΡΠ±ΠΎΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ CSS-in-JS, Styled Components ΠΈ CSS Modules ΠΏΡΠΈ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ Π²Π°ΡΠ΅Π³ΠΎ React ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ? ΠΡΠ»ΠΈ Π΄Π°, ΡΠΎ Π²Ρ Π½Π΅ ΠΎΠ΄ΠΈΠ½ΠΎΠΊΠΈ. ΠΡΠΎΡ Π²ΠΎΠΏΡΠΎΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ Ρ ΠΌΠ½ΠΎΠ³ΠΈΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ², Π²Π΅Π΄Ρ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΡΡΠΈΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠ² ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΈ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ, ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΠΈ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ. ΠΡΠ±ΠΎΡ ΠΌΠΎΠΆΠ΅Ρ Π·Π°Π²ΠΈΡΠ΅ΡΡ ΠΎΡ ΠΌΠ½ΠΎΠ³ΠΈΡ ΡΠ°ΠΊΡΠΎΡΠΎΠ², Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΡ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°, ΠΊΠΎΠΌΠ°Π½Π΄Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ², ΡΡΠΎΠΊΠΈ ΠΈ Π±ΡΠ΄ΠΆΠ΅Ρ. Π ΡΡΠΎΠΌ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π΅ ΠΌΡ ΡΠ΄Π΅Π»Π°Π΅ΠΌ Π΄Π΅ΡΠ°Π»ΡΠ½ΡΠΉ Π°Π½Π°Π»ΠΈΠ· ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π°, ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΈΡ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΠΈ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ Π΄Π°Π΄ΠΈΠΌ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ ΠΏΠΎ Π²ΡΠ±ΠΎΡΡ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ Π±ΠΈΠ·Π½Π΅ΡΠ°.
Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ³ΡΡΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π»ΡΡΡΠΈΠ΅ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΈ
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΡΡΠΈΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠ². CSS-in-JS - ΡΡΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΌ CSS-ΠΊΠΎΠ΄ Π²ΡΡΡΠ°ΠΈΠ²Π°Π΅ΡΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π² JavaScript-ΠΊΠΎΠ΄. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅Π±Ρ ΠΈ ΡΡΠΈΠ»ΠΈ, ΠΈ Π»ΠΎΠ³ΠΈΠΊΡ ΡΠ°Π±ΠΎΡΡ, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΠΈΡ Π±ΠΎΠ»Π΅Π΅ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΡΠΌΠΈ ΠΈ ΠΏΠ΅ΡΠ΅ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΌΠΈ. ΠΠ΄Π½Π°ΠΊΠΎ, ΡΡΠΎΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΌΠΎΠΆΠ΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠΎΠ΄ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΠΌ ΠΈ ΡΡΡΠ΄Π½ΠΎΡΠΈΡΠ°Π΅ΠΌΡΠΌ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ².
Styled Components - ΡΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ CSS-in-JS ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°Π±Π»ΠΎΠ½Π½ΡΡ ΡΡΡΠΎΠΊ ES6. ΠΡΠΎ Π΄Π°Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΡΡ ΠΌΠΎΡΡ CSS (ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ, ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΡ ΠΈ Ρ.Π΄.) ΠΏΡΡΠΌΠΎ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ². ΠΠ΄Π½Π°ΠΊΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Styled Components ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±Π°Π½Π΄Π»Π°, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ².
CSS Modules - ΡΡΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΊΠ°ΠΆΠ΄ΡΠΉ CSS-ΡΠ°ΠΉΠ» ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΡΠ΅ΡΡΡ Π² JavaScript-ΠΌΠΎΠ΄ΡΠ»Ρ. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΊΠΎΠ½ΡΠ»ΠΈΠΊΡΠΎΠ² ΠΈΠΌΠ΅Π½ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΈ Π΄Π΅Π»Π°Π΅Ρ ΠΊΠΎΠ΄ Π±ΠΎΠ»Π΅Π΅ ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΡΠΌ ΠΈ ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠΌ. ΠΠΎ ΡΡΠΎΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΡΡΠ΅Π±ΡΠ΅Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠ±ΠΎΡΡΠΈΠΊΠ° ΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ΠΏΡΠΈΠ²ΡΡΠ½ΡΠΌ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ², ΠΏΡΠΈΠ²ΡΠΊΡΠΈΡ ΠΊ ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΠΎΠΌΡ CSS.
ΠΠ°ΠΆΠ½ΠΎ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π²ΡΠ±ΠΎΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΈΠΌΠΈ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π°ΠΌΠΈ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡΡ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², CSS-in-JS ΠΈΠ»ΠΈ Styled Components ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Ρ ΠΎΡΠΎΡΠΈΠΌ Π²ΡΠ±ΠΎΡΠΎΠΌ. ΠΡΠ»ΠΈ ΠΆΠ΅ Π²Π°ΠΌ Π²Π°ΠΆΠ½Π° ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π±Π°Π½Π΄Π»Π°, ΡΠΎ ΡΡΠΎΠΈΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ CSS Modules.
ΠΡΠΈΠΌΠ΅ΡΡ ΠΈΠ· ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠΈΡΠ° ΠΈ ΠΊΠ΅ΠΉΡΡ
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅Π°Π»ΡΠ½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΈΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠ². ΠΠΎΠΌΠΏΠ°Π½ΠΈΡ βXYZβ, Π·Π°Π½ΠΈΠΌΠ°ΡΡΠ°ΡΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΎΠΉ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΡΠ΅ΡΠΈΠ»Π° ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ Π½Π° CSS-in-JS ΠΏΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΡΠ²ΠΎΠ΅Π³ΠΎ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡΠΎΠ΄ΡΠΊΡΠ°. ΠΠ½ΠΈ ΠΎΡΠΌΠ΅ΡΠΈΠ»ΠΈ, ΡΡΠΎ ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ»ΠΎ ΠΈΠΌ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈ ΠΏΠ΅ΡΠ΅ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ Ρ ΠΊΠΎΠ½ΡΠ»ΠΈΠΊΡΠ°ΠΌΠΈ ΠΈΠΌΠ΅Π½ ΠΊΠ»Π°ΡΡΠΎΠ². ΠΠ΄Π½Π°ΠΊΠΎ, ΠΎΠ½ΠΈ ΡΠ°ΠΊΠΆΠ΅ Π·Π°ΠΌΠ΅ΡΠΈΠ»ΠΈ, ΡΡΠΎ ΠΊΠΎΠ΄ ΡΡΠ°Π» Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΠΌ ΠΈ ΡΡΡΠ΄Π½ΠΎΡΠΈΡΠ°Π΅ΠΌΡΠΌ, ΡΡΠΎ Π·Π°ΡΡΡΠ΄Π½ΠΈΠ»ΠΎ Π΅Π³ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ.
βΠΠ΅ΡΠ΅Ρ ΠΎΠ΄ Π½Π° CSS-in-JS ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ» Π½Π°ΠΌ ΡΠ»ΡΡΡΠΈΡΡ ΠΏΡΠΎΡΠ΅ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠΎΠ΄ Π±ΠΎΠ»Π΅Π΅ ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΡΠΌ, Π½ΠΎ ΠΌΡ ΡΡΠΎΠ»ΠΊΠ½ΡΠ»ΠΈΡΡ Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΠΈ ΡΠΈΡΠ°Π΅ΠΌΠΎΡΡΠΈ ΠΊΠΎΠ΄Π°.β - ΠΠ°ΡΠΈΠ»ΠΈΠΉ ΠΠ΅ΡΡΠΎΠ², ΡΡΠ°ΡΡΠΈΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π² ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ βXYZβ
Π ΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ, Π΄ΡΡΠ³Π°Ρ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΡ βABCβ, ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π±ΠΎΡΠ°ΡΡΠ°Ρ Π½Π°Π΄ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΠΌΠΈ, ΠΏΡΠΈΠ½ΡΠ»Π° ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Styled Components. ΠΠ½ΠΈ Π±ΡΠ»ΠΈ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½Ρ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ Π»Π΅Π³ΠΊΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠΎΡΡ CSS ΠΏΡΡΠΌΠΎ Π²Π½ΡΡΡΠΈ Π½ΠΈΡ . ΠΠ΄Π½Π°ΠΊΠΎ, ΠΎΠ½ΠΈ ΡΡΠΎΠ»ΠΊΠ½ΡΠ»ΠΈΡΡ Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±Π°Π½Π΄Π»Π°, ΡΡΠΎ ΡΠΊΠ°Π·Π°Π»ΠΎΡΡ Π½Π° ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
βStyled Components Π΄Π°Π»ΠΈ Π½Π°ΠΌ Π±ΠΎΠ»ΡΡΡΡ Π³ΠΈΠ±ΠΊΠΎΡΡΡ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², Π½ΠΎ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±Π°Π½Π΄Π»Π° ΡΡΠ°Π»ΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ Π΄Π»Ρ Π½Π°Ρ.β - ΠΠ°ΡΠΈΡ ΠΠ²Π°Π½ΠΎΠ²Π°, ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡ Π² ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ βABCβ
ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π² ΠΎΡΡΠ°ΡΠ»ΠΈ ΠΈ Π²Π°ΡΠΈΠ°Π½ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ
Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΡΠ΅ΡΡ Π²Π°ΡΠ΅Π³ΠΎ Π±ΠΈΠ·Π½Π΅ΡΠ° ΠΈ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠΈ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°, ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½Π΅Π΅ Π΄ΡΡΠ³ΠΎΠ³ΠΎ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π±ΠΎΠ»ΡΡΠΈΡ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ΄ΠΎΠ±Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS-in-JS ΠΈΠ»ΠΈ Styled Components. ΠΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΡΠ΅, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, ΡΡΠΎ ΡΠΏΡΠΎΡΠ°Π΅Ρ ΠΏΡΠΎΡΠ΅ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΠΊΠΎΠ΄Π°.
Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, Π΄Π»Ρ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ², Π³Π΄Π΅ Π²Π°ΠΆΠ½Π° ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ Π±ΡΡΡΡΠ°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΡΡΡΠ°Π½ΠΈΡ, ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS Modules. ΠΡΠΎΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Π±Π°Π½Π΄Π»Π° ΠΈ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΊ ΡΠ΅ΡΠ²Π΅ΡΡ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΠΈΠ»Π΅ΠΉ.
ΠΠ°ΠΆΠ½ΠΎ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π½ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΡΠΈΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠ² Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΡΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠ»ΡΡΠ°Π΅Π². ΠΡΠ±ΠΎΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡΡ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ².
ΠΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠ΅ ΡΠ΅Ρ Π½ΠΈΠΊΠΈ ΠΈ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ
ΠΠ»Ρ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΈΠ· ΡΡΠΈΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠ², Π²Π°ΠΆΠ½ΠΎ Π·Π½Π°ΡΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠ΅ ΡΠ΅Ρ Π½ΠΈΠΊΠΈ ΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ CSS-in-JS ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ βEmotionβ ΠΈΠ»ΠΈ βStyled Componentsβ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄Π»Π°Π³Π°ΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ ΠΈ ΡΠΏΡΠΎΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΡΠ΅ΡΡΠ° ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ.
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Styled Components ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ βBabel pluginβ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Π±Π°Π½Π΄Π»Π° ΠΈ ΡΠ»ΡΡΡΠΈΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π²Π°ΠΆΠ½ΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΡΠΊΡΡΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠ΅ΡΠ΅ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ Π΄ΡΠ±Π»ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΊΠΎΠ΄Π°.
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ CSS Modules Π²Π°ΠΆΠ½ΠΎ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠ±ΠΎΡΡΠΈΠΊ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Webpack ΠΈΠ»ΠΈ Parcel), ΡΡΠΎΠ±Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²ΡΠ²Π°ΡΡ CSS-ΡΠ°ΠΉΠ»Ρ Π² JavaScript-ΠΌΠΎΠ΄ΡΠ»ΠΈ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ βPostCSSβ Π΄Π»Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ ΠΈ ΠΌΠΈΠ½ΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ CSS-ΠΊΠΎΠ΄Π°.
Π Π°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ ΠΈ ΠΈΡ ΡΡΡΡΠ°Π½Π΅Π½ΠΈΠ΅
ΠΠ΄Π½Π°ΠΊΠΎ, Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° Π²ΡΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΡΡΠΈΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠ², Π΅ΡΡΡ ΠΈ ΠΎΠ±ΡΠΈΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΡΡΠΎ ΡΠΎΠ²Π΅ΡΡΠ°ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ CSS-in-JS ΡΠ°ΡΡΠΎ Π·Π°Π±ΡΠ²Π°ΡΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΡΡΠΈΠ»ΠΈ ΠΌΠΎΠ³ΡΡ ΠΊΠΎΠ½ΡΠ»ΠΈΠΊΡΠΎΠ²Π°ΡΡ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊ ΠΎΠ΄Π½ΠΈΠΌ ΠΈ ΡΠ΅ΠΌ ΠΆΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ Π½Π΅ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠΌΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΈ ΡΡΠ΅Π±ΡΠ΅Ρ Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ Ρ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡΠΌΠΈ.
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Styled Components ΡΠ°ΡΡΠΎΠΉ ΠΎΡΠΈΠ±ΠΊΠΎΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠΎΠΏΡΠΎΠ² Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ². ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ ΠΈΠ·Π±ΡΡΠΎΡΠ½ΠΎΠΌΡ ΠΊΠΎΠ΄Ρ ΠΈ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±Π°Π½Π΄Π»Π°. ΠΠ»Ρ ΠΈΠ·Π±Π΅ΠΆΠ°Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΈ Ρ ΡΠΊΠΈ.
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ CSS Modules ΡΠ°ΡΡΠΎ Π·Π°Π±ΡΠ²Π°ΡΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΈΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ² Π³Π΅Π½Π΅ΡΠΈΡΡΡΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ, ΠΈ ΠΌΠΎΠ³ΡΡ ΠΊΠΎΠ½ΡΠ»ΠΈΠΊΡΠΎΠ²Π°ΡΡ Ρ ΠΈΠΌΠ΅Π½Π°ΠΌΠΈ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΈΠ· Π΄ΡΡΠ³ΠΈΡ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ Π½Π΅ΠΏΡΠ΅Π΄ΡΠΊΠ°Π·ΡΠ΅ΠΌΠΎΠΌΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΈ ΡΡΠ΅Π±ΡΠ΅Ρ Π°ΠΊΠΊΡΡΠ°ΡΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ Ρ CSS-ΡΠ°ΠΉΠ»Π°ΠΌΠΈ.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΈ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ°Π³ΠΈ
ΠΡΠ°ΠΊ, ΠΊΠ°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ Π²ΡΠ±ΡΠ°ΡΡ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°? ΠΡΠ²Π΅Ρ Π½Π° ΡΡΠΎΡ Π²ΠΎΠΏΡΠΎΡ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΌΠ½ΠΎΠ³ΠΈΡ ΡΠ°ΠΊΡΠΎΡΠΎΠ², Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°, ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ ΠΊ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ, ΡΠ΅ΡΡΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅. ΠΠ°ΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ Π½Π΅Ρ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ΄ΠΎΡΠ»ΠΎ Π±Ρ Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ². ΠΠ°ΠΆΠ΄ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΈ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΠΈ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ, ΠΈ Π²Π°ΠΆΠ½ΠΎ ΡΡΠΈΡΡΠ²Π°ΡΡ ΠΈΡ ΠΏΡΠΈ Π²ΡΠ±ΠΎΡΠ΅.
ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠΌΠΎΡΡ Π²Π°ΠΌ Π² ΡΡΠΎΠΌ. ΠΡ ΠΈΠΌΠ΅Π΅ΠΌ Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΎΠΏΡΡ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π°ΠΌΠΈ ΠΊ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ React ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΠΌΠΎΠΆΠ΅ΠΌ Π΄Π°ΡΡ Π²Π°ΠΌ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠ΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ ΠΈ ΠΏΠΎΠΌΠΎΡΡ Ρ Π²ΡΠ±ΠΎΡΠΎΠΌ Π»ΡΡΡΠ΅Π³ΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΊΠΎΠ½ΡΡΠ»ΡΡΠ°ΡΠΈΡ ΠΈΠ»ΠΈ ΠΎΠ±ΡΡΠ΄ΠΈΡΡ Π²Π°Ρ ΠΏΡΠΎΠ΅ΠΊΡ, ΡΠ²ΡΠΆΠΈΡΠ΅ΡΡ Ρ Π½Π°ΠΌΠΈ.




