Lebih tepatnya my components sih ya
Dalam men-develop aplikasi terutama yang berbasis React JS, tentu kita seringkali dihadapkan dengan case-case yang mengharuskan kita untuk mengcustom suatu component atau kalau di post ini saya bahasakan dengan nge-styling component. Ya pasti karena kalo tidak distyling webnya akan jadi seperti website di era sebelum CSS muncul.
Image by CSS Tricks
Back then ketika framework javascript belum populer, salah satu go-to library yang saya pakai ya tentu saja UI Library kita semua yang tak lain dan tak bukan adalah bootstrap. Di saat itu bootstrap sudah canggih banget lho, kita bisa bikin element/component macam-macam dengan cukup mudah, sudah ada implementasinya yang disematkan di dokumentasinya tinggal di copas aja, terus beres deh terpasang di web kita. Jadilah web kita canteek, ya to.
Atau ada juga si paling radikal, yang membuat stylingnya sendiri full pake CSS, ini sih sudah bisa dipanggil suhu kala itu.
Nah di zaman yang semakin berkembang, akhirnya trend website yang sebelumnya dibuild pure dengan HTML+CSS+imbuhan JS dikit kini berkiblat ke Javascript-based yang dipionir oleh tiga framework yang bertahan hingga sekarang yaitu React, Vue, dan Angular (meskipun kalo di Indonesia sepertinya jarang ya denger developer Angular). Kemudian trend untuk styling component pun juga agaknya cukup berubah. Meskipun tetap masih ada juga yang implementasinya mirip-mirip.
Contohnya dengan naiknya TailwindCSS yang masih berbasis class name untuk stylingnya. Dan cara ini juga masih dipakai di development React hingga sekarang kok, dengan membuat file CSS dan styling disitu. Which is fine, once again, as long as it works and it’s on production, you have nothing to worry about.
Tapi… untuk saya sendiri, saya lebih suka beberapa cara berikut untuk styling component saya, alias go-to saya ketika saya diharuskan untuk styling components.
Ohiya, sebagai disclaimer saya lebih suka styling component dengan bikin sebuah component (apa ya ini namanya) pokoknya bukan pakai *className* gitu lah.
Styled components (the pure one)
Sejak saya belajar bikin web dengan tanpa framework, saya itu memang lebih suka bikin styling sendiri instead of mengandalkan UI library. Karena dengan begitu ada ke-khas-an dari design web saya dan bisa saya achieve tanpa perlu banyak adjustment, berikan aku file CSS maka akan kuguncang landing page.
Maka dari itu cara saya styling component saat ini masih jatuh ke cara CSS-in-JS, lebih spesifik adalah styled-components . Selain library styled-components sebenernya ada library lain seperti emotion yang sakjane kurang lebih implementasinya sama, tapi saya enggak pernah nyobain di project yang skalanya cukup besar jadi tidak bisa berkata banyak.
// Instead of
// Saya lebih suka
const SomeStyledComponent = styled.div`
// your style here
`;
Ohiya, styled components juga bisa buat ngestyling component-component UI dari library lain, jadi misal kita ada mau bikin custom DatePicker, kita bisa comot DatePicker yang udah ada, terus kita ubah stylenya pake doi.
export const StyledDatePicker = styled(DatePicker)`
.some-class-to-style {
width: 100px;
// your styles
}
`;
Styled components with styled system (xstyled, styled-system, etc)
Berangkat dari styled-components selanjutnya kita bisa level-up the game dengan mengintegrasikan dengan library lain untuk bikin design system yang lebih mudah.
Di daftar rekomendasi saya ada @xstyled/styled-components dan styled-system . Ini nih yang saya bikin suka sama styled-components , karena selain bisa dicustom sendiri kita mau bikin component apa, kita juga bisa bikin dia lebih mudah untuk dipakai di codenya.
// Before styled system
const StyledCompo = styled.div`
margin: 32px;
font-family: "Proxima Nova", sans, monospace;
`;
import styled from "@xstyled/styled-components";
// After styled system
const StyledCompo = styled.div`
margin: 3; // ini nanti ada confignya 3 itu apa
font-family: regular; // ini juga
`;
Selain itu dengan adanya si styled system ini kita bisa bikin commons components yang kita bisa pake semau kita nantinya di component-component kita.
return (
Lorem ipsum
);
Jadi misal ketemu cuma perlu styling dikit, kita enggak perlu bikin component baru, atau kita harus nge-include si props tambahan ke styled component kita secara manual, atau kita perlu inject di prop style={{ ... }} nya.
Stitches x Radix UI
Ini saya baru nemu kayaknya setelah kerja di tempat kerja yang sekarang ketika ngerjain project baru gitu. Kebetulan ada temen yang memang suka explore codingan dan sharing terkait ini. Stitches ini kurang lebih sama dengan styled-components dan emotion , sama-sama CSS-in-JS, keunggulannya dia ini jauh lebih lightweight dengan hanya ~6KB dan support Server-Side Rendering (SSR). Jadi ini salah satu solusi yang menyenangkan untuk para frontend yang projectnya pake SSR.
// Cara pakenya
import { styled } from '@stitches/react';
const Button = styled('button', {
backgroundColor: 'gainsboro',
borderRadius: '9999px',
fontSize: '13px',
padding: '10px 15px',
'&:hover': {
backgroundColor: 'lightgray',
},
});
const SomeComponent = () => {
return (
);
}
Selain itu pros-nya, dia enggak perlu banyak diconfig, alias plug ‘n play, pasang langsung bisa dipake. Juga di stitches ini kita bisa bikin styled system secara langsung tanpa perlu ada library lain buat nge-bridge nya. Wow, semua hal tadi dilakukan oleh library dengan ukuran <10KB.
Cons-nya, saat ini masih support React JS aja. 😅
Selain stitches yang udah oke, lebih oke lagi dicombine pake Radix UI, dimana di dalamnya sudah ada component-component yang siap pake kaya Dialog, Card, Tooltip, etc . Di Radix sendiri ada 2 cara pake, mau dipake/di-install satu-per-satu alias ala carte dengan cara
npm install @radix-ui/react-dialog
npm install @radix-ui/react-dropdown-menu
npm install @radix-ui/react-tooltip
atau kita juga bisa langsung install sepaket semuanya dengan cara
npm install @radix-ui/themes
dengan begitu semua component dari Radix bisa kita pake langsung dengan import sesuai yang kita butuhkan. Kekurangannya ya kalo ini ada component yang sebenernya enggak kita pake, ini akan jadi beban bundle kita. Hehe
Syudah, secara garis besar sebenernya itu cara saya styling component untuk project freelance, kerjaan, maupun project iseng. Selanjutnya biasanya saya combine dengan library lain misal styled-components sama ANTD, atau sama Evergreen UI (ini bagus, ringan, tapi kurang populer nampaknya), atau sama Chakra UI, ya gitu-gitu lah, dipadu padankan satu sama lain.
Alasan saya enggak pake library yang berbasis class name lagi kaya bootstrap maupun Tailwind adalah karena saya males ngapalin nama class CSS nya, belum lagi ada ukurannya yang udah didefine oleh design system mereka 😵. Saya lebih suka dia jadi props karena bisa di-autocomplete kalo kita kebetulan juga pake Typescript.
Tapi sekali lagi saya mengingatkan, tidak ada silver bullet dalam men-develop aplikasi web (React), yang penting kita nyaman developnya, mudah dipahami oleh developer lain, mudah untuk dimaintain, dan udah launch ke production (dan nge-gaji kamu), it’s fine~. Kalo suatu saat kamu mau ubah caramu styling components mirip-mirip kaya saya, it’s also fine~
Let’s have a fun time developing apps. See you!