مدل جعبه CSS نحوه اندازهگیری و فاصلهگذاری عناصر را تعریف میکند:
Total size = content + padding + border + margin
در React، من کامپوننتها را بهعنوان ظروف طرحبندی یا بلوکهای محتوا در نظر میگیرم، و درک مدل جعبه برای موارد زیر حیاتی است:
box-sizing: border-boxجلوگیری از اشکالات سرریز در ساختارهای تودرتو.
مثال:
* {
box-sizing: border-box;
}
این اطمینان میدهد که padding و border بهطور غیرمنتظره روی عرض/ارتفاع تأثیر نگذارند.
من اصل اولویت خاصیت پایین را دنبال میکنم:
div.btn.primary) که بازنویسی را شکننده میکنند.مثال با CSS Modules:
/* Button.module.css */
.button {
color: white;
}
در React:
<button className={styles.button}>Submit</button>
همچنین استفاده از !important را محدود میکنم و برای ویژگیهای حیاتی مانند طرحبندی از وراثت اجتناب میکنم، بلکه اظهارات صریح را ترجیح میدهم.
من مسئولیتهای طرحبندی را با مرزهای کامپوننت همراستا میکنم:
درخت کامپوننت React ↔ مدل طرحبندی CSS:
مثال:
<GridLayout>
<Sidebar />
<MainContent />
</GridLayout>
این کار جداسازی منطق طرحبندی و محتوا را تشویق میکند.
من CSS ابتدا برای موبایل را با توکنهای ابزار و سیستمهای طراحی ترجیح میدهم.
رویکرد:
@media یا ابزارهای رسانهای CSS-in-JSrem، %) برای مقیاسپذیریمثال (Styled Components):
const Card = styled.div`
padding: 1rem;
@media (min-width: 768px) {
padding: 2rem;
}
`;
در مقیاس بزرگ، از توکنهای طراحی و یک سیستم طرحبندی متمرکز برای حفظ ثبات استفاده میکنم.
اصل کلیدی: کاهش تحریک طرحبندی.
من:
width، top) اجتناب میکنم.transform و opacity را ترجیح میدهم—اینها reflow را تحریک نمیکنند.در React:
memo، useCallback برای جلوگیری از تحریک reflowهای پرهزینه از طریق بهروزرسانیهای DOM استفاده میکنم.من هر کامپوننت را بهعنوان یک مرز استایل در نظر میگیرم. محدود کردن CSS از نشت و بازنویسی جلوگیری میکند.
CSS Modules:
Styled Components / Emotion:
مثال:
const Button = styled.button`
background: ${({ primary }) => (primary ? "blue" : "gray")};
`;
برای برنامههای بزرگ، اغلب از CSS Modules + کلاسهای ابزار (مثل Tailwind) برای تعادل استفاده میکنم.
من تمها را با استفاده از ویژگیهای سفارشی CSS و یک زمینه/ارائهدهنده تم طراحی میکنم.
CSS:
:root {
--bg-color: white;
}
[data-theme="dark"] {
--bg-color: #121212;
}
React:
<body data-theme={theme}>...</body>
از یک سوئیچ تم برای بهروزرسانی data-theme استفاده میکنم و وضعیت تم را در زمینه جهانی یا از طریق localStorage مدیریت میکنم.
جایگزین Styled Components:
<ThemeProvider theme={lightTheme}>...</ThemeProvider>
Sass ارائه داد:
امروزه، CSS بومی و CSS-in-JS اکثر موارد استفاده را پوشش میدهند:
CSS مدرن بر مدولاریتی، تعاملپذیری و عملکرد تمرکز دارد. من از Sass به موارد زیر منتقل شدهام:
من انیمیشنها را به دستههای زیر تقسیم میکنم:
Framer Motion یا React Transition Group.@keyframes یا transition در CSS.مثال (Framer Motion):
<motion.div
animate=
initial=
exit=
/>
برای جلوههای ساده از انتقالات CSS (بار کمتر) و برای پیچیدگیهای تعاملی/وضعیتی بالا از انیمیشنهای مبتنی بر JS استفاده میکنم.
رویکرد:
@tailwind base)فالبکها:
display: grid;
display: -ms-grid; /* فالبک برای IE قدیمی */
در صورت نیاز، پلیفیل میکنم یا بهصورت زیبا تنزل میدهم و به ابزارهای مدرن CSS برای ایمنی بینمرورگری تکیه میکنم.