دو جعبه روی صفحه قیمت تعاونی زعفران. هر دو width: 300px اعلام کرده‌اند، هر دو padding: 20px و border: 2px دارند، و کنار هم که رسم شوند به‌وضوح دو عرض متفاوت‌اند:
width: 300pxبا پدینگ ۲۰ و بردر ۲، به‌طور پیش‌فرض جعبه‌ای ۳۴۴ پیکسلی می‌سازدbox-sizing: border-boxباعث می‌شود width همان کل باشد، پس همان جعبه ۳۰۰ پیکسل است
اولی قاعده اصلی است: width یعنی محتوا، و پدینگ و بردر بیرونش اضافه می‌شوند. سیصد به‌علاوه چهل به‌علاوه چهار. هیچ‌کس هیچ‌وقت این را نخواسته، و به همین دلیل * { box-sizing: border-box } همان یک سطری است که تقریباً هر شیوه‌نامه‌ای با آن شروع می‌شود، و به همین دلیل چیدمانی که به‌شکل مرموزی از ظرفش پهن‌تر است تقریباً همیشه همین است و نه چیز دیگری. حساب را یاد بگیرید نه قاعده را، چون در هر جلسه اشکال‌یابی همان حساب است: یک عرض، به‌علاوه دو بار پدینگش، به‌علاوه دو بار بردرش. این حاشیه، بردر، پدینگ، و جایی که عرض‌ها خراب می‌شوند است.
چپ و راست، دو کلمه‌ای که در یک صفحه فارسی نباید بنویسید
این بخشی است که نسخه انگلیسی این صفحه اصلاً لازم ندارد و بیشترین وقت یک تیم فارسی‌زبان صرفش می‌شود. margin-left و padding-right و text-align: left همه فیزیکی‌اند: به سمت چپ و راست خود صفحه اشاره می‌کنند، نه به ابتدا و انتهای متن. روی یک صفحه راست‌به‌چپ، هرکدامشان جای اشتباه می‌افتد و بعد با یک قاعده دوم برعکس می‌شود، و همان جفت قاعده تا ابد در فایل می‌ماند.
جواب در خود زبان هست و اسمش ویژگی‌های منطقی است. margin-inline-start ابتدای خط را می‌گیرد، نه سمت چپ صفحه را، پس در یک صفحه فارسی سمت راست است و در انگلیسی سمت چپ، بدون هیچ شرطی. همین‌طور padding-inline-end و border-inline-start و text-align: start. یک شیوه‌نامه‌ای که فقط با این‌ها نوشته شده باشد، با عوض شدن dir روی html خودش برمی‌گردد و هیچ‌جا دو نسخه ندارد.
و یک چیز که مستقل از این‌ها همیشه فیزیکی می‌ماند: direction و unicode-bidi جهت خواندن را تعیین می‌کنند نه چیدمان را، پس عددی که وسط یک جمله فارسی می‌آید جهتش را از خودش می‌گیرد و باید همان‌طور بماند.
دو سامانه چیدمان، و انتخاب یک پرسش است
فلکس‌باکس روی یک محور می‌چیند و گرید روی دو محور. همین جمله تقریباً همیشه تکلیف را روشن می‌کند: یک ردیف دکمه، یک نوار پیمایش، یک برچسب کنار یک فیلد، یک محورند؛ صفحه‌ای با ستون‌ها و ردیف‌هایی که باید در هر دو جهت با هم بخوانند، دو محور است.
داخل فلکس‌باکس، دو ویژگی که روز اول ارزش دانستن دارند یک جفت‌اند و به‌راحتی برعکس فهمیده می‌شوند: justify-content عضوها را روی محور اصلی جابه‌جا می‌کند و align-items عرضی. هر دو سامانه هم یک بهبود مشترک گرفتند: gap جای حاشیه میان فرزندهای فلکس و گرید را می‌گیرد، پس فاصله مال ظرف است نه مال هر فرزند. این‌ها چیدن روی یک محور و چیدن در دو بعد هستند.
یک سطر هم بیشتر کاری را می‌کند که آدم‌ها برایش مدیا کوئری می‌نویسند: grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) بدون هیچ مدیا کوئری‌ای می‌شکند و به سطر بعد می‌رود. این ترجیح دارد چون یک مدیا کوئری حدسی درباره اندازه صفحه است و این حکمی درباره خود محتوا: هیچ کارتی باریک‌تر از ۲۲۰ پیکسل نشود، و هر چند تا که جا شد. جایی که واقعاً به نقطه شکست نیاز است هم یک سند، هر صفحه‌ای است.
انتخاب یکی
همان پنج پرسش، یک بار از فلکس‌باکس و یک بار از گرید
هیچ برنده‌ای علامت نخورده، چون برنده‌ای نیست. سطر اول تکلیف را روشن می‌کند و بقیه از آن درمی‌آیند.
هر دو gap دارند و هر دو در هر مرورگری که مهم باشد هستند. هیچ چیز اینجا گذار از یک سامانه قدیمی به تازه نیست؛ برای دو کار متفاوت طراحی شدند و یک سال فاصله منتشر شدند.
ابزار، و سالی که این حرف درست است
بازرس عنصر خود مرورگر همان ابزار است، رایگان، و کار واقعاً همان‌جا انجام می‌شود: جعبه محاسبه‌شده را با چهار عددش نشان می‌دهد، می‌گوید کدام قاعده برنده شده و کدام خط خورده، و اجازه می‌دهد یک مقدار را بکشید. جای کشیدن یک خط رنگی دور عنصر برای فهمیدن اینکه کجاست را گرفت.
Sass هنوز هست و خیلی کمتر از قبل کار می‌کند. جای شیوه‌نامه‌ای بدون متغیر و بدون تودرتویی و بدون راهی برای تکه کردن فایل را گرفت، و CSS از آن موقع هر سه را پس گرفته است: ویژگی‌های سفارشی متغیرهایی هستند که در زمان اجرا هم کار می‌کنند، تودرتویی به‌شکل بومی آمد، و ایمپورت‌ها را ابزار ساخت اداره می‌کند. آنچه مانده واقعی است و کوچک، و متغیر، تودرتویی، و آنچه CSS پس گرفت است.
یک چیز هم مخصوص کار فارسی: قلم. متن فارسی با قلم پیش‌فرض مرورگر روی ویندوز و اندروید و مک سه شکل متفاوت می‌شود، و ارتفاع خطش هم فرق می‌کند. پس یک قلم وب و یک line-height صریح، اینجا از تزیین به الزام تبدیل می‌شود، و همان یک انتخاب بیشتر از هر قاعده دیگری روی این صفحه، ظاهر نهایی را تعیین می‌کند.
اشتباه: جنگیدن با قاعده‌ای که خوانده نشده
گیر این زبان مشخص است و در هر تیمی اسم دارد: اعلانی که هیچ کاری نمی‌کند. چیزی تنظیم می‌شود، چیزی تکان نمی‌خورد، و واکنش این است که دوباره و محکم‌تر تنظیمش کنند، بعد یک important اضافه کنند، بعد یک انتخابگر مشخص‌تر، و یک ساعت بعد شیوه‌نامه سه قاعده دارد که کار هیچ‌کدام را نمی‌کنند.
تقریباً همیشه یکی از سه چیز درست است و بازرس در یک ثانیه می‌گوید کدام. آن ویژگی به آن عنصر اعمال نمی‌شود، که وقتی width روی یک عنصر درون‌خطی گذاشته شود همین اتفاق می‌افتد. قاعده دیگری برنده شده، که خط‌خورده نشان داده می‌شود و برنده بالایش هست. یا مقدار دارد اعمال می‌شود و چیز دیگری دارد اندازه را تعیین می‌کند، که روی فرزند فلکس یا گرید معمولاً ظرف است نه فرزند.
پس عادت این است که بازرس را پیش از تلاش دوم باز کنید نه بعد از پنجم. جدول قیمت آن تعاونی با یک کلمه درست شد، چون کارت‌ها فرزند فلکس بودند و عرضشان را flex-basis تعیین می‌کرد، و هیچ مقدار widthی قرار نبود آن بحث را ببرد.
چیزی که این صفحه تعیین نمی‌کند این است که وقتی دویست قاعده شد و چهار نفر ویرایشش می‌کنند، استایل‌ها کجا زندگی می‌کنند، که پرسشی درباره کامپوننت است و به فریم‌ورک‌های فرانت‌اند می‌رسد. درختی هم که همه این‌ها رویش چیده می‌شود HTML است، هر دو زیر وب.