دو قدم رو به جلو، يك قدم رو به عقب

React يك فريمورك جاوااسكريپت است كه در طراحي اينترفيس كاربر يا همان UI به كار مي‌رود و تنها مواردي را كه نيازمند تغيير است، تغيير مي‌دهد و به شما امكان مي‌دهد CSS اينلاين (inline)ي كه به عنوان ويژگي‌‌ نوشته شده و به عناصر منتقل مي‌شود را اضافه كنيد.

اگر تا كنون با كدي مشابه كد زير مواجه شده‌ايد، متاسفم:

<div class="p3 bold white bg-blue">
  I'm sorry
</div>

اما اگر با كدي مشابه كد زير مواجه شديد، قابل شما را نداشت:

<Box
  padding={3}
  fontWeight='bold'
  color='white'
  bg='blue'>
  Hello
</Box>

در سال 2013، Adam Morse و من كارهاي فوق‌العاده‌‌اي كه Nicole Sullivan و كساني ديگر مانند Nicolas Gallagher با CSS شي‌گرايي يا OOCSS انجام مي‌دادند،‌ را دنبال مي‌كرديم. تحقيقات ما حول كار با بدهي فني (Technical Debt) مرتبط با CSS منجر به ساخت Basscss و Tachyons و تولد “Utility CSS” شد. اين مجموعه‌ها به ساير سيستم‌هاي طراحي مانند Solid از Buzzfeed و Primer CSS از GitHub نيز الهام بخشيدند. حتي Bootstrap نيز به مرور سبك‌هاي متمركز بر كلاس كمكي يا Utility بيشتري را اضافه كرد.

اين شيوه به نام‌هاي زيادي از جمله، CSS كلاس هسته‌اي يا Atomic، CSS كلاس تابعي يا Functional، و CSS كلاس كمكي يا Utility، شناخته شد، اما من به آن به‌عنوان CSS هسته‌اي/تابعي/كمكي يا AFUCSS اشاره مي‌كنم. اين عبارت شبيه گفتن “Hey, F you!”  يا "هي، لعنت بهت است!" كه تقريبا، هنگامي كه مردم براي اولين بار با اين نوع CSS مواجه مي‌شوند، واكنشي معمول است.

چه مشکلاتي را رفع كرد؟

نظر شما درمورد اين روش هرچه كه باشد، به اندازه خود به چندين مشكل معمولِ كار با CSS كمك كرده است.

• اين روش عناصر را مستقيما به سبك‌ها متصل كرد و از چكيدگي Selector و نياز به نام‌گذاري اشياء پرهيز كرد.
• طراحان و توسعه‌دهندگان را به استفاده از مقياس‌ها و محدودكنندگان بر روي margin، padding، سايز فونت‌ها، رنگ‌ها و ساير ويژگي‌ها، تشويق كرد.
• به كاهش استايل‌شيت‌ها(Stylesheet) ي “appened-only” به‌وسيله استفاده مجدد از سبك‌ها، كمك كرد.
• از تعدادي از مشكلات “Specifity wars” كه توسط شيوه آبشاري يا Cascade وارد شده‌ بود، پرهيز كرد.
• اگرچه يادگيري آن چم و خم دارد، اما زماني كه شما وارد يكي از اجراها و پياده‌سازي زياد من شديد، مي‌تواند سرعت توسعه‌دهندگي شما را افزايش دهد.

در همين زمان، ما شروع به كار بر روي آمارهاي CSS كرديم، كه به تاييد چندتا از فرضيه‌هاي ما درمورد CSS filesize و عملكرد جبهه نخستين، كمك كرد. اجراي اين روش بر روي ساخت برنامه‌هاي وب در آن زمان به حذف صدها كيلوبايت CSS كه به كاربران نهايي فرستاده مي‌شد، كمك كرد.

در چه موارد شكست خورد؟

باوجود محبوبيت Tachyons، هيچ مجموعه ديگري هرگز در سطحي كه منحني شيب‌دار يادگيري موجود را خنثي كند، بر روي صنعت چيره نشد. اين امر بدين معنا بود كه نه تنها توسعه‌دهندگان، بلكه به ناچار تعداد زيادي از Classnameهاي API نيز، نيازمند يادگيري روش جديدي بودند.

CSS يك زبان ظريف و قوي است، اما utility CSS هرگز نمي‌تواند به صور كامل جايگزين آن شود. به مرور، شما تنها به اضافه كردن يكي از روش‌ها كه توسط مجموعه‌ي مورد استفاده‌تان پوشش داده نشده است، نياز خواهيد داشت و هميشه روشي روشن و واضح جهت گسترش كار خودتان وجود ندارد. بدون وجود روشي واضح جهت كنترل اموري مانند اين، توسعه دهندگان به اضافه كردن هك‌ها و سبك‌هاي “append-only” تمايل پيدا كردند.

همانطور كه هر مجموعه CSS برپايه utility رشد مي‌كند، مقدار CSSهايي كه به كاربران خود نيز مي‌فرستيد، افزايش مي‌يابد، و شما را به ابزارهاي ساخت بيشتري جهت حذف سبك‌هايي كه شما در وهله نخست نيز هرگز قصد استفاده از آن‌ها را نداشتيد، متكي مي‌سازد. اگرچه در آن زمان با توجه به CSS filesize از هر روش ديگري بهتر بود، اما باز هم ايده‌آل نبود.

همچنين اين امر كه اين روش پيش از عرضه React به قصد استفاده از اينترفيس‌هاي كاربر برپايه template از جمله، Rails و PHP ساخته شده بود نيز اهميتي ندارد. اين شيوه هرگز براي UI يا برپايه مولفه‌هاي تابعي طراحي نشده بود و از اين الگوي جديد بهره نمي‌برد.

مولفه‌ها

با معرفي مجموعه‌هاي UI بر پايه مولفه‌هاي تابعي مانند React، افق وعده روشي بهتر براي كنترل به اندازه نوشتن CSS به چشم آمد. بعد از اينكه Christopher “Vjeux” Chedeau در سال 2015 درمورد موضوع CSS در جاوااسكريپت، سخنراني كرد، جامعه React احتمال‌هاي تركيب سبك با مولفه‌ها را مورد كاوش قرار داد، كه منجر به تجمع مجموعه‌هاي جديدي براي نوشتن CSS در جاوااسكريپت شد. به‌عنوان مثالي عالي از شرح اينكه چرا بايد به انجام اين كار تمايل داشته باشيد، پاسخ Sunil Pai به Jonathan Snook را بخوانيد.

دو قدم رو به جلو

 مجموعه‌هاي CSS-in-JS) CSS) در جاوااسكريپت به حل مشكلات يكسان زيادي با آنچه كه روش CSS برپايه utility بر روي آن تمركز داشت (و حتي بيش از اين موارد) را به يك شيوه بسيار بهتر، كمك مي‌كند. اين مجموعه‌ها سبك‌ها را مستقيما بدون نياز به اسم‌گذاري اشيا يا ايجاد چكيدگي در Class Selector، به عناصر متصل مي‌سازد. آن‌ها از استايل شيت‌هاي “append-only” همراه با كپسوله‌سازي classnameهاي خرد خرد، پرهيز مي‌كنند. اين مجموعه‌ها با ابزارهاي ساختي كه از پيش وجود دارند كار مي‌كنند، و به رخ دادن تقسيم كد code splitting)، Lazy loading)، حذف كد مرده بدون هيچ تلاش مضاعفي كمك مي‌كند، و آن‌ها به ابزارهاي اضافه‌اي مانند Sass يا PostCSS نيز نياز ندارند. بسياري از مجموعه‌ها نيز شامل بهينه‌سازي عملكرد CSS، مانند CSS ضروري(Critical CSS) هستند، كه به صورت پيش‌فرض فعال شده است تا توسعه‌دهندگان نيازي به اضافه كردن ابزارهاي اضافه يا حتي فكر كردن به آن‌ها را نداشته باشند.

جاي تعجب نيست كه مردم درمورد آن جار و جنجال به راه بياندازند.

يك نكته عالي ديگر درمورد مجموعه‌هاي CSS-in-JS، اين است كه برپايه مقادير و ويژگي‌هاي تركيب CSS استاندارد هستند. آن‌ها نياز به APIهاي غيراستاندارد و رمزنگاري‌شده را از بين برده و به طرز قابل ملاحظه‌اي سد ورودي‌ها را در مقايسه با CSSهاي برپايه utility را كاهش مي‌دهد.

يك قدم رو به عقب

از آنجايي كه مجموعه‌هاي CSS-in-JS به بسياري از مشكلات كمك مي‌كند، تعدادي از مزاياي كليدي مجموعه‌هايي مانند Basscss و Tachyons در اين تركيب وجود ندارد. به جاي استفاده از محدوديت‌هاي طراحي جهت تعريف سبك‌ها، ابزارهاي نامحدودي در اختيار توسعه‌دهندگان وجود دارد كه آن‌ها را تشويق مي‌كند از يك سبك ثابت استفاده كنند. پيچيدگي يادگيري كاهش يافت، اما انتخاب‌‌هاي زيادتري پيش روي توسعه‌دهندگان قرار گرفت.

يك سيستم جديد

با محيط جديد مجموعه CSS-in-JS، من شروع به تحقيق درمورد روش‌هايي جهت استفاده از محدوديت‌هاي طراحي در مولفه‌ها كردم. اين امر منجر به ساخت Rebass در سال 2015 و سپس Styled System در سال 2017 شد. Rebass ايده‌ي استفاده از جزء‌هايي از سبكي كه ويژگي‌هاي معمول استفاده شده در CSS را ترسيم مي‌كرد، را معرفي كرده و يك تلاش اوليه در زمينه بازسازي چندتا از ارگونومي‌هاي توسعه‌دهندگي از Basscss بود. Styled System اين بخش‌هاي سبك را جهت استفاده در مجموعه‌هايي مانند Styled Components در تابع‌هاي utility چكيده‌ كرد، كه به شما امكان ساخت مولفه‌هاي همانند Rebass براي خودتان را مي‌دهد. به جاي پياده كردن مخلوطي از classnameها بر روي يك مولفه، Styled System سبك را به‌عنوان يك تابع جزء‌دار به همراه نوعي API كه با يك بار ياد گرفتن آن در همه جا مي‌توان آن را به كار برد، ارتقا مي‌دهد.

تيم‌هاي زيادي از مجموعه‌هايي مانند Styled System جهت ساخت مجموعه‌هاي مولفه و سيستم‌هاي طراحي بسيار موفق، خوششان مي‌آيد. Chara UI، Primer Componets گيت‌هاب، Palette آرتسي (Artsy)، SproutSocial سيدز (Seeds)، و Radix مدولز  (Modulz)همگي از Styled System جهت ساخت مولفه‌هايي كه از سبك‌هايي كه در قالب‌ها به همراه جزء‌هاي معمول API تعريف شده‌اند، استفاده مي‌كنند. اين به تيم در ساخت UI به همراه برندينگ دائمي و يك زبان طراحي معمول كمك مي‌كند.

خارج از چهارچوب <BOX />

Styled System براي تيم‌هايي كه زمان و منابع لازم جهت ساخت يك مجموعه مولفه مرسوم را دارند بسيار عالي است، اما شروع كردن به استفاده از آن نيازمند تلاش است. به جاي استفاده از يك <Box /> جهت كنترل همه آن‌ها، بسياري از اين مجموعه‌هاي مولفه‌ نسخه مرسوم خود را دارند كه نيازمند مستند سازي و همكاري محدود است. چگونه درحالي كه بهره‌ برداري تيم‌هاي بزرگ از شبكه آسان‌تر شده و بر روي اكوسيستم اثر مي‌گذارد، مفاهيم رمز نگاري شده‌اي كه در مجموعه‌هايي مانند Styled System و مجموعه‌هاي مولفه‌اي كه از آن‌ها پشتيباني مي‌كند را بدون داشتن منابعي جهت ساخت يك مجموعه مولفه‌ي مرسوم، گسترش داد؟ هيچكس يك مجموعه مولفه‌ي ديگر را كه از رده خارج خواهد ‌شد نمي‌خواهد، مگر غير اين است؟

گراف یا Graph طراحی

به جای ساختن یک مجموعه مولفه دیگر مانند سايرين، ظاهر یک فریمورک برای طراحی ظاهري برنامه‌هايی برپايه مولفه‌ها چگونه خواهد بود؟ با نفوذ مفاهيم گراف طراحي، محدوديت‌هاي طراحي و يك مشخصات قالب استاندارد جهت پيروي گرآورنده مجموعه‌ها از آن‌‌ها،UI  قالب قدم بعدي اين روند خلاصه‌سازي است.

اگرچه بسيار سست به مفاهيم مشابهي به شيوه utility CSS متكي است، UI از شر رمزنگاري‌ها، APIهاي غيراستاندارد، تركيب و عدم وجود قابليت همكاري، نياز به ابزارهاي ساخت مجزا، و شيب تند منحني يادگيري موجود در مجموعه‌هايي مانند Tachyons، خلاص شد. اتصال سبك‌ها به عناصر، خوانايي، ارگونوميك‌هاي توسعه‌دهندگي جهت ايجاد تغييرات در situ را حفظ كرده و يك سيستم برپايه محدوديت قوي جهت مديريت سبك‌ها نيز اضافه مي‌كند.

يك سوپرست CSS-in-JS

به جاي حفظ كردن صدها class selector كه تنها نمايانگر يك زيرمجموعه از زبان CSS يا تعداد انگشت‌شماري از اجزاء سبك هستند، UI قالب به شما يك مجموعه كامل و سوپرستي از CSSها را كه مي‌توان بر روي هر عنصري با اجزاء sx آن پياده شود، مي‌دهد. مقادير بر پايه قالب را مي‌توان بر روي ويژگي‌هاي CSS معمولي براي مواردي مانند تايپوگرافي، رنگ، layout، و هر مورد سفارشي، سبك‌هاي يكسان و ثابت را مي‌توان در هر جا كه نياز بود به عنوان يك escape hatch اضافه كرد.

utility CSS زيرمجموعه‌اي از CSSها با يك تركيب مرسوم مي‌سازد. جزء sx يك سوپرست CSS است كه از تركيبي مرسوم استفاده مي‌كند.

اسم‌گذاري اشياء سخت است و جزء sx به شما امكان ساخت سبك و طراحي كردن هر برنامه‌اي بدون نياز به نام‌گذاري مواردي مانند class selectorها و مولفه‌ها را مي‌دهد. همانطور كه دوست و همكار من John Otander مي‌گويد، "لعنت به اسم‌گذاري اشياء، آن هم وقتي كه به آن مجبور نيستيد." 

مقصود جزء sx در UI قالب، كمك به حفظ يك حداقل محدوده سرفيس API است. بيشتر ويژگي‌هايي كه در اين جزء استفاده شده است، همراه با روش‌هايي بيشتر و اختياري جهت استفاده از مقادير براي اين ويژگي‌ها، همان‌هايي است كه در CSS استاندارد به كار رفته‌اند. به جاي اينكه هر مولفه، مجموعه مرسوم اجزاء سبك خود را داشته باشد، هر عنصري را مي‌توان با همان جزء sx يكسان طراحي كرد. متغيرهاي مولفه‌ها نيز به همين فرمت نوشه مي‌شوند. نوشتن سبك‌ها در نشانه‌گذاري اشياء جاوااسكريپت، ممكن است اندكي جديد باشد، اما اگر شما با جاوااسكرپت آشنا باشيد، شما احتمالا خودتان تركيب آن را از پيش مي‌دانيد.

تنها به حرف‌هاي من بسنده نكنيد

هزاران نفر هم اكنون نيز از گراف طراحي به همراه قالب UI جهت ساخت قالب‌ها، برنامه‌ها و ساير ابزارها استفاده مي‌كنند.

• Docz از قالب UI استفاده مي‌كند تا به شما امكان شخصي سازي سبك‌ها براي سايت مستند شما را دهد.
• Flex يك سازنده صفحه نشانه‌گذاري شده بر پايه MDX است كه از قالب UI جهت ساخت قالب استفاده مي‌كند.
• Novela يك قالب گتسبي (Gatsby) زيبا براي بلاگينگ است كه توسط قالب UI ساخته شده است.
• Hack Club شما را به هكاتون‌هاي دبيرستاني متصل كرده و توسط قالب UI طراحي شده است.
• به همراه بسياري موارد ديگر.

اگر شما نيز با قالب UI چيزي ساخته ايد، بسيار به شنيدن درمورد آن تمايل دارم.

به دنبال بهترين‌ها باشيد

اگر شما درحال ساخت برنامه به كمك React در سال 2020 هستيد، به شيوه‌هاي CSS در سال 2013 بسنده نكنيد. به دنبال بهترين ها براي تيم خود باشيد، و به من در ساخت سبك‌هاي بيشتر براي وب در آينده كمك كنيد.

منبع