من ابزارهای استایلدهی را بر اساس پیچیدگی پروژه، ترجیحات تیم، مقیاسپذیری و نیازهای عملکرد انتخاب میکنم.
| تکنیک | مزایا | معایب |
|---|---|---|
| CSS-in-JS (مثل Emotion، styled-components) | استایلهای محدود به کامپوننت، تمدهی پویا، هممکان با کامپوننتها | بار اجرایی در زمان اجرا، دشواری در استخراج CSS بحرانی |
| Styled Components | مبتنی بر کامپوننت، پشتیبانی از تمدهی، محدودسازی خودکار | حجم بسته، تجزیه در زمان اجرا، پیچیدگی زنجیره ابزار |
| Sass (SCSS) | تودرتو، متغیرها، میکسینها، ابزارهای بالغ | دامنه جهانی بهصورت پیشفرض، نیاز به BEM یا قراردادهای دستی |
| TailwindCSS | مبتنی بر ابزارها، نمونهسازی سریع، پاسخگویی پیشفرض | نامهای کلاس طولانی، منحنی یادگیری، جداسازی ضعیف نگرانیها |
انتخاب پیشفرض من: Tailwind برای تیمهای سریع یا سیستمهای طراحی؛ Styled Components برای کتابخانههای کامپوننت قابل تمدهی.
rem، %، vh/vw) و کوئریهای رسانهای.sm:، md:) برای استایلدهی مبتنی بر نقاط شکست.useWindowSize یا کتابخانههایی مثل react-responsive در صورت نیاز برای رفتار، نه فقط استایل.از یک وضعیت theme (یا زمینه) استفاده کنید، یک class را در body یا html تغییر دهید و استایلها را بهصورت شرطی اعمال کنید.
مثال CSS-in-JS: استفاده از ThemeProvider با تمهای روشن/تاریک.
import styled from 'styled-components';
const Button = styled.button`
padding: 0.5rem 1rem;
border-radius: 4px;
font-weight: bold;
background: ${({ variant }) =>
variant === 'primary' ? '#007bff' : '#6c757d'};
color: white;
border: none;
cursor: pointer;
&:hover {
opacity: 0.9;
}
`;
// Usage:
<Button variant="primary">Save</Button>
<Button variant="secondary">Cancel</Button>
مزایا:
معایب:
clsx، cva).کاهش مشکلات: استفاده از ابزارهای کمکی (clsx، tailwind-variants) و توکنهای طراحی برای کاهش تکرار.
body.my-app) و اجتناب از انتخابگرهای عمومی.!important مگر در موارد ضروری.import "./Fade.css"; // .fade { opacity: 0; transition: opacity 0.3s } .fade.show { opacity: 1; }
const FadeComponent = ({ visible }) => (
<div className={`fade ${visible ? "show" : ""}`}>Hello</div>
);