بهترین روش‌های من – CSS
۱. پیشگفتار
امروزه از CSS کمتر از توانش استفاده می‌شود (under-utilized). میان توسعه‌دهندگان Angular/React/Vue/... و طراحان UI شکافی وجود دارد.
طراح UI سی <div> را تودرتو می‌کند و چهل کلاس CSS رویشان می‌گذارد، در حالی که توسعه‌دهنده‌ی Angular هر دو هفته یک‌بار با جدیدترین کتابخانه ذوق‌زده می‌شود، آن هم وقتی که جهنم وابستگی‌هایش
مدت‌هاست بدون npm i --force بیلد نمی‌شود، چون Peer Dependencyها با هم تعارض دارند. CSS و HTML برای متعصب TypeScript چندان اهمیتی ندارند. برای ساده‌ترین ورودی‌ها
هم باید از Material استفاده کند، چون می‌ترسد در غیر این صورت از پس اعتبارسنجی برنیاید. و قطعاً هیچ‌کس نمی‌خواهد با اختراع دوباره‌ی چرخ وقت تلف کند. اینکه با اولین
نیازی که کتابخانه پوشش نمی‌دهد، همه‌ی آن وقت دوباره از دست می‌رود و آدم خودش را در حال خواندن Issueهای GitHub آن کتابخانه می‌یابد، برایش روشن نیست.
توسعه‌دهنده در یک پروژه‌ی Fullstack به‌ندرت فرصت دارد مهارت‌هایش را به‌عنوان طراح فرانت‌اند به کار گیرد. ماکاپ‌های صفحه را در Figma تحویل می‌گیرد و باید دقیقاً همان‌ها را پیاده کند. بیشتر توسعه‌دهندگان فرانت‌اند از این دست اصلاً نمی‌دانند که با تنها یک خط CSS می‌توان یک چیدمان واکنش‌گرا ساخت. CSS از همیشه قدرتمندتر است. دوران ترفندهای استایل با JS، media queryهای بی‌شمار و راه‌حل‌های موقت برای IE 8 گذشته است. هورا!
۲. وسط‌چین کامل
همیشه در مصاحبه‌ها خوب از آب درنمی‌آمد، اما من کیف می‌کردم: به این سؤال که آیا در فرانت‌اند خوب هستم، با کمال میل جواب می‌دادم: «اوه بله. می‌توانم یک <div> را عمودی وسط‌چین کنم.»
وسط‌چین کردن یک div به دشواری مشهور است.
دیگر نه:
.parent {
display: grid;
place-items: center
}۳. Grid واکنش‌گرا
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}۴. Flex واکنش‌گرا
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
flex: 1 1 150px; /* Stretching: */
flex: 0 1 150px; /* No stretching: */
margin: 5px;
}۵. چیدمان صفحه
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}۶. نوار کناری
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}