[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"lesson:t6-s08-architecture":3,"course:taropood":60},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,8,"t6-s08-architecture","book",6,"فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},7,"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},9,"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",[20,24,27,32,35,38,41,44,47,50,53,57],{"kind":21,"heading":22,"html":23},"normal","در این فصل چه می‌سازی","\u003Ch2 id=\"در-این-فصل-چه-می‌سازی\">در این فصل چه می‌سازی\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84-%DA%86%D9%87-%D9%85%DB%8C%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تا حالا CSSِ تو کوچک بوده و همه‌چیز سرِ جایش. ولی وقتی یک پروژه بزرگ می‌شود — ده‌ها component، صدها قاعده — دو مشکلِ تازه سراغت می‌آید که با «درست‌نوشتنِ» یک قاعده حل نمی‌شوند؛ با \u003Cstrong>معماری\u003C\u002Fstrong> حل می‌شوند. در این فصل یاد می‌گیری چطور CSS را در مقیاسِ بزرگ منظم نگه داری. آخرِ فصل یک کارتِ «حذف حساب» داری که دکمهٔ قرمزِ خطرش \u003Cstrong>بدونِ جنگیدن\u003C\u002Fstrong> قرمز می‌شود، و می‌فهمی چرا این مهم‌ترین مهارتِ CSSِ حرفه‌ای است. مفهومِ نحویِ تازه‌ای اینجا نیست — همه‌اش قضاوت است، روی چیزهایی که قبلاً بلدی.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-specificity-war.0095e616f3.160.webp 160w, \u002F_img\u002F01-image-specificity-war.0095e616f3.320.webp 320w, \u002F_img\u002F01-image-specificity-war.0095e616f3.640.webp 640w, \u002F_img\u002F01-image-specificity-war.0095e616f3.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-specificity-war.0095e616f3.1280.jpg\" srcset=\"\u002F_img\u002F01-image-specificity-war.0095e616f3.160.jpg 160w, \u002F_img\u002F01-image-specificity-war.0095e616f3.320.jpg 320w, \u002F_img\u002F01-image-specificity-war.0095e616f3.640.jpg 640w, \u002F_img\u002F01-image-specificity-war.0095e616f3.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"دو مسیرِ کنار هم برای رنگ‌کردنِ یک دکمه؛ مسیرِ راست پلکانی بالا می‌رود و هر پله ضخیم‌تر از قبلی است تا به یک علامتِ توقفِ قرمزِ درشت برسد، مسیرِ چپ یک خطِ صاف و کوتاه و آرام است که مستقیم به دکمه می‌رسد\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>بگویی «جنگِ specificity» چیست و چرا به \u003Ccode>!important\u003C\u002Fcode> ختم می‌شود\u003C\u002Fli>\n\u003Cli>selector ها را صاف و کم‌قدرت نگه داری و با \u003Ccode>@layer\u003C\u002Fcode> ترتیب را کنترل کنی\u003C\u002Fli>\n\u003Cli>کلاس‌ها را با یک روشِ ثابت نام‌گذاری کنی تا به‌هم نریزند\u003C\u002Fli>\n\u003Cli>فرقِ کلاس‌های utility و semantic و جای هرکدام را بفهمی\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":21,"heading":25,"html":26},"قبل از شروع","\u003Ch2 id=\"قبل-از-شروع\">قبل از شروع\u003Ca class=\"head-anchor\" href=\"#%D9%82%D8%A8%D9%84-%D8%A7%D8%B2-%D8%B4%D8%B1%D9%88%D8%B9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>از ترم ۲ فصل ۳:\u003C\u002Fstrong> specificity و شمارشش — قلبِ این فصل همان است.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۲ همین ترم:\u003C\u002Fstrong> \u003Ccode>@layer\u003C\u002Fcode> — این‌بار می‌بینی چرا واقعاً نجاتت می‌دهد.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— یک کارتِ «حذف حساب» می‌بینی که دکمهٔ خطرش باید قرمز باشد ولی آبی مانده. کارِ این فصل این است که بفهمی چرا این جنگ درگرفته و چطور با صاف‌کردنِ selector ها تمامش کنی","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-6-professional\u002Fsession-08-architecture",{"kind":21,"heading":33,"html":34},"۱. وقتی CSS بزرگ می‌شود","\u003Ch2 id=\"۱-وقتی-css-بزرگ-می‌شود\">۱. وقتی CSS بزرگ می‌شود\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D9%88%D9%82%D8%AA%DB%8C-css-%D8%A8%D8%B2%D8%B1%DA%AF-%D9%85%DB%8C%E2%80%8C%D8%B4%D9%88%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>در یک فایلِ کوچک همه‌چیز ساده است. ولی هرچه بزرگ‌تر شود، دو چیز خراب می‌شود. اول، \u003Cstrong>اسم‌ها به‌هم می‌ریزند\u003C\u002Fstrong>: دو نفر (یا خودت در دو هفتهٔ مختلف) یک کلاس به‌نامِ \u003Ccode>.title\u003C\u002Fcode> می‌سازند برای دو چیزِ متفاوت، و روی هم می‌افتند. دوم، \u003Cstrong>جنگِ specificity\u003C\u002Fstrong> درمی‌گیرد: یک استایل باید اعمال شود ولی یک قاعدهٔ قوی‌ترِ دیگر جلویش را می‌گیرد، و تو برای بردن، selectorِ سنگین‌تر می‌نویسی. معماریِ CSS یعنی جلوگیری از این دو، نه رفع‌شان بعد از وقوع.\u003C\u002Fp>\n",{"kind":21,"heading":36,"html":37},"۲. جنگِ specificity","\u003Ch2 id=\"۲-جنگِ-specificity\">۲. جنگِ specificity\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%D8%AC%D9%86%DA%AF%D9%90-specificity\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>بیا واقعی‌ترین علتِ این جنگ را ببینیم. فرض کن خواستی «همهٔ دکمه‌های داخلِ کارت» را آبی کنی، پس نوشتی \u003Ccode>.card .btn\u003C\u002Fcode>. جدا هم یک modifier داری که دکمهٔ خطر را قرمز کند:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card .btn {\n  background-color: var(--brand);\n}\n\n.btn--danger {\n  background-color: var(--danger);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>در آزمایشگاه نگاه کن: دکمهٔ «حذف حساب» با اینکه کلاسِ \u003Ccode>btn--danger\u003C\u002Fcode> دارد، \u003Cstrong>آبی مانده\u003C\u002Fstrong>، نه قرمز. چرا؟ چون \u003Ccode>.card .btn\u003C\u002Fcode> دو کلاس است (specificity بالاتر) و \u003Ccode>.btn--danger\u003C\u002Fcode> یک کلاس. قاعدهٔ قوی‌تر برنده می‌شود، هرچند بعدش نوشته شده باشد.\u003C\u002Fp>\n\u003Cp>حالا وسوسه شروع می‌شود. برای بردن، \u003Ccode>.btn--danger\u003C\u002Fcode> را قوی‌تر می‌کنی: \u003Ccode>.card .btn--danger\u003C\u002Fcode>. یک هفته بعد یک جای دیگر همین باز خراب می‌شود و می‌نویسی \u003Ccode>.card .card__actions .btn--danger\u003C\u002Fcode>. آخرش که خسته شدی، \u003Ccode>!important\u003C\u002Fcode> را می‌چسبانی و فکر می‌کنی بردی — ولی فقط سلاحِ سنگین‌تری به میدان آورده‌ای؛ نفرِ بعد باید \u003Ccode>!important\u003C\u002Fcode>ِ خودش را بیاورد. این همان جنگِ specificity است، و \u003Cstrong>هیچ‌کس در آن نمی‌بَرد\u003C\u002Fstrong>.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> ریشهٔ مشکل این نیست که modifier ات ضعیف است؛ این است که قاعدهٔ پایه \u003Cstrong>بیش‌ازحد قوی\u003C\u002Fstrong> نوشته شده. راهِ حل صاف‌کردن است، نه سنگین‌ترکردن. آن \u003Ccode>.card .btn\u003C\u002Fcode> را به یک کلاسِ تنها تبدیل کن — \u003Ccode>.btn\u003C\u002Fcode>:\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.btn {\n  background-color: var(--brand);\n}\n\n.btn--danger {\n  background-color: var(--danger);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا دکمهٔ «حذف حساب» قرمز شد. هر دو قاعده یک کلاس‌اند (specificityِ برابر)، پس ساده‌ترین قانونِ cascade تصمیم می‌گیرد: آخری برنده است، و چون \u003Ccode>.btn--danger\u003C\u002Fcode> بعد از \u003Ccode>.btn\u003C\u002Fcode> آمده، قرمز می‌بَرد. جنگ تمام شد چون از اول درنگرفت.\u003C\u002Fp>\n",{"kind":21,"heading":39,"html":40},"۳. specificity را صاف و کم نگه دار","\u003Ch2 id=\"۳-specificity-را-صاف-و-کم-نگه-دار\">۳. specificity را صاف و کم نگه دار\u003Ca class=\"head-anchor\" href=\"#%DB%B3-specificity-%D8%B1%D8%A7-%D8%B5%D8%A7%D9%81-%D9%88-%DA%A9%D9%85-%D9%86%DA%AF%D9%87-%D8%AF%D8%A7%D8%B1\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>درسِ بخشِ قبل یک قانونِ کلی است: \u003Cstrong>selector ها را تا می‌توانی کم‌قدرت و صاف نگه دار\u003C\u002Fstrong> — ترجیحاً یک کلاسِ تنها. آن‌وقت وقتی خواستی چیزی را عوض کنی، فقط کافی است قاعده‌ات بعد از قاعدهٔ قبلی بیاید؛ لازم نیست با کسی بجنگی.\u003C\u002Fp>\n\u003Cp>ولی گاهی واقعاً می‌خواهی یک دسته قاعده همیشه بر یک دستهٔ دیگر بچربد — مثلاً استایلِ component همیشه بر استایلِ پایه. اینجا \u003Ccode>@layer\u003C\u002Fcode>ِ فصل ۲ ابزارِ درست است: ترتیبِ برنده‌شدن را \u003Cstrong>تو\u003C\u002Fstrong> با ترتیبِ layer ها تعیین می‌کنی، نه با شمارشِ specificity. هر چیزی در یک layerِ بعدی، بر layerِ قبلی می‌بَرد — فارغ از اینکه کدام selector سنگین‌تر است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>@layer base, components;\n\n@layer base {\n  .btn {\n    background-color: var(--brand);\n  }\n}\n\n@layer components {\n  .btn--danger {\n    background-color: var(--danger);\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>این یعنی «قصد» جای «قدرت» را می‌گیرد: نمی‌گویی «قوی‌تر باش»، می‌گویی «تو در لایهٔ بعدی‌ای، پس تو حرفِ آخر را می‌زنی». این آرام‌ترین راهِ کنترلِ cascade در یک پروژهٔ بزرگ است.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-layers-stack.7700552a16.160.webp 160w, \u002F_img\u002F02-image-layers-stack.7700552a16.320.webp 320w, \u002F_img\u002F02-image-layers-stack.7700552a16.640.webp 640w, \u002F_img\u002F02-image-layers-stack.7700552a16.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-layers-stack.7700552a16.1280.jpg\" srcset=\"\u002F_img\u002F02-image-layers-stack.7700552a16.160.jpg 160w, \u002F_img\u002F02-image-layers-stack.7700552a16.320.jpg 320w, \u002F_img\u002F02-image-layers-stack.7700552a16.640.jpg 640w, \u002F_img\u002F02-image-layers-stack.7700552a16.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"دو ورقهٔ نیمه‌شفافِ روی هم که یک دکمه را رنگ می‌کنند؛ ورقهٔ نازکِ رویی رنگِ قرمزش را روی دکمه می‌نشاند و بر ورقهٔ ضخیم‌ترِ آبیِ زیرین می‌چربد، تا نشان دهد لایهٔ بالاتر برنده است فارغ از ضخامتش\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n",{"kind":21,"heading":42,"html":43},"۴. نام‌گذاری در مقیاس: یک روشِ ثابت","\u003Ch2 id=\"۴-نام‌گذاری-در-مقیاس-یک-روشِ-ثابت\">۴. نام‌گذاری در مقیاس: یک روشِ ثابت\u003Ca class=\"head-anchor\" href=\"#%DB%B4-%D9%86%D8%A7%D9%85%E2%80%8C%DA%AF%D8%B0%D8%A7%D8%B1%DB%8C-%D8%AF%D8%B1-%D9%85%D9%82%DB%8C%D8%A7%D8%B3-%DB%8C%DA%A9-%D8%B1%D9%88%D8%B4%D9%90-%D8%AB%D8%A7%D8%A8%D8%AA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>برای اینکه اسم‌ها به‌هم نریزند، حرفه‌ای‌ها یک \u003Cstrong>الگوی ثابتِ نام‌گذاری\u003C\u002Fstrong> دارند. یکی از پرکاربردترین‌ها این است: \u003Ccode>block__element--modifier\u003C\u002Fcode>. یعنی: اسمِ کلِ component، بعد دو زیرخط و اسمِ یک تکهٔ داخلش، بعد دو خط‌تیره و اسمِ یک حالت. همان چیزی که ناخودآگاه در ترم‌های قبل هم دیدی:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card { }           \u002F* block: khod-e component *\u002F\n.card__title { }    \u002F* element: yek tekke daxel-e an *\u002F\n.card__actions { }  \u002F* element-e digar *\u002F\n.btn--danger { }    \u002F* modifier: yek halat-e digar *\u002F\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>فایده‌اش دوتاست. اول، اسم‌ها \u003Cstrong>یکتا\u003C\u002Fstrong> می‌شوند: \u003Ccode>.card__title\u003C\u002Fcode> هیچ‌وقت با \u003Ccode>.post__title\u003C\u002Fcode> قاطی نمی‌شود. دوم — و اینجا به بخشِ قبل وصل می‌شود — هرکدام یک کلاسِ \u003Cstrong>تنها\u003C\u002Fstrong> هستند، پس specificity همیشه صاف و برابر می‌ماند و جنگی درنمی‌گیرد. یک روشِ نام‌گذاریِ خوب، خودش نصفِ معماری است.\u003C\u002Fp>\n",{"kind":21,"heading":45,"html":46},"۵. utility در برابر semantic","\u003Ch2 id=\"۵-utility-در-برابر-semantic\">۵. utility در برابر semantic\u003Ca class=\"head-anchor\" href=\"#%DB%B5-utility-%D8%AF%D8%B1-%D8%A8%D8%B1%D8%A7%D8%A8%D8%B1-semantic\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>دو مکتبِ فکری برای کلاس‌ها هست. کلاسِ \u003Cstrong>semantic\u003C\u002Fstrong> اسمِ \u003Cstrong>کاری\u003C\u002Fstrong> را می‌گوید که آن تکه می‌کند: \u003Ccode>.btn\u003C\u002Fcode>، \u003Ccode>.card\u003C\u002Fcode>. کلاسِ \u003Cstrong>utility\u003C\u002Fstrong> اسمِ یک \u003Cstrong>استایلِ تکی\u003C\u002Fstrong> را می‌گوید: \u003Ccode>.flex\u003C\u002Fcode>، \u003Ccode>.gap-2\u003C\u002Fcode>، یک کلاس برای هر کارِ کوچک، که در HTML رویِ هم می‌چینی‌شان.\u003C\u002Fp>\n\u003Cp>هرکدام یک معامله است. semantic، HTML را تمیز نگه می‌دارد و component را یک‌جا قابلِ‌تغییر می‌کند، ولی باید همه‌چیز را نام‌گذاری کنی و CSS بزرگ می‌شود. utility، سریع و یکدست است و اصلاً نام‌گذاری نمی‌خواهد، ولی HTML شلوغ می‌شود و استایل توی markup پخش می‌شود. پروژه‌های واقعی معمولاً هر دو را قاطی می‌کنند: component برای چیزهای تکرارشونده، utility برای تنظیم‌های ریز.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> هرکدام را انتخاب کنی، آن نخِ مشترکِ این فصل را نگه دار: هر دو مکتب کلاس‌های \u003Cstrong>تک\u003C\u002Fstrong> و صاف‌اند. دلیلِ اصلیِ اینکه utility ها هیچ‌وقت جنگِ specificity نمی‌سازند دقیقاً همین است — همه‌شان یک کلاس‌اند و هیچ‌کدام از دیگری قوی‌تر نیست.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":48,"html":49},"۶. کد کامل","\u003Ch2 id=\"۶-کد-کامل\">۶. کد کامل\u003Ca class=\"head-anchor\" href=\"#%DB%B6-%DA%A9%D8%AF-%DA%A9%D8%A7%D9%85%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>index.html\u003C\u002Fcode> با نام‌گذاریِ منظم:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!-- index.html -->\n<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1">\n    <title>معماری CSS<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <main class="page">\n      <article class="card">\n        <h2 class="card__title">حذف حساب<\u002Fh2>\n        <p class="card__text">این کار برگشت‌پذیر نیست و همهٔ داده‌هایت پاک می‌شود.<\u002Fp>\n        <footer class="card__actions">\n          <button class="btn btn--danger" type="button">حذف حساب<\u002Fbutton>\n          <button class="btn" type="button">انصراف<\u002Fbutton>\n        <\u002Ffooter>\n      <\u002Farticle>\n    <\u002Fmain>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و \u003Ccode>styles.css\u003C\u002Fcode> با selector های صاف داخلِ layer های منظم:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\n* {\n  box-sizing: border-box;\n}\n\n:root {\n  --bg: #f6edda;\n  --card: #ffffff;\n  --ink: #2c2114;\n  --muted: #5a5342;\n  --brand: #2a6b93;\n  --danger: #bc3e1c;\n  --line: #d8ccae;\n}\n\n\u002F* tartib-e layer-ha maloom ast: component bad az base miayad *\u002F\n@layer base, components;\n\n@layer base {\n  body {\n    margin: 0;\n    font-family: Tahoma, sans-serif;\n    background-color: var(--bg);\n    color: var(--ink);\n    padding: 40px;\n    line-height: 1.9;\n  }\n}\n\n@layer components {\n  .card {\n    max-width: 340px;\n    margin-inline: auto;\n    padding: 24px;\n    background-color: var(--card);\n    border: 1px solid var(--line);\n    border-radius: 16px;\n  }\n\n  .card__title {\n    margin: 0 0 6px;\n    font-size: 1.3rem;\n  }\n\n  .card__text {\n    margin: 0 0 18px;\n    color: var(--muted);\n  }\n\n  .card__actions {\n    display: flex;\n    gap: 10px;\n    margin: 0;\n  }\n\n  .btn {\n    padding: 8px 18px;\n    border: 1px solid var(--brand);\n    border-radius: 10px;\n    background-color: var(--brand);\n    color: #ffffff;\n    font-family: inherit;\n    font-size: 1rem;\n    font-weight: 700;\n    cursor: pointer;\n  }\n\n  .btn--danger {\n    border-color: var(--danger);\n    background-color: var(--danger);\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> دو دکمه می‌بینی — «حذف حساب» قرمز و «انصراف» آبی — و هیچ selectorی بیش از یک کلاس نیست. هیچ \u003Ccode>!important\u003C\u002Fcode>ی هم لازم نشد. این شکلِ یک CSSِ سالم است: صاف، نام‌دار، و لایه‌بندی‌شده.\u003C\u002Fp>\n",{"kind":21,"heading":51,"html":52},"واژه‌های تازهٔ این فصل","\u003Ch2 id=\"واژه‌های-تازهٔ-این-فصل\">واژه‌های تازهٔ این فصل\u003Ca class=\"head-anchor\" href=\"#%D9%88%D8%A7%DA%98%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%AA%D8%A7%D8%B2%D9%87%D9%94-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>کلمه\u003C\u002Fth>\n\u003Cth>تلفظ به حروف فارسی\u003C\u002Fth>\n\u003Cth>یعنی چه\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>specificity war\u003C\u002Ftd>\n\u003Ctd>اِسپِسیفیسیتی وار\u003C\u002Ftd>\n\u003Ctd>چرخهٔ سنگین‌ترکردنِ selector ها که به \u003Ccode>!important\u003C\u002Fcode> ختم می‌شود\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>flat selector\u003C\u002Ftd>\n\u003Ctd>فلَت سِلِکتور\u003C\u002Ftd>\n\u003Ctd>selectorِ کم‌قدرت، ترجیحاً یک کلاسِ تنها\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>BEM\u003C\u002Ftd>\n\u003Ctd>بِم\u003C\u002Ftd>\n\u003Ctd>روشِ نام‌گذاریِ \u003Ccode>block__element--modifier\u003C\u002Fcode> تا اسم‌ها یکتا بمانند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>utility class\u003C\u002Ftd>\n\u003Ctd>یوتیلیتی کلاس\u003C\u002Ftd>\n\u003Ctd>کلاسِ تک‌کاره مثلِ \u003Ccode>.flex\u003C\u002Fcode> که در HTML روی هم می‌چینی\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>semantic class\u003C\u002Ftd>\n\u003Ctd>سِمَنتیک کلاس\u003C\u002Ftd>\n\u003Ctd>کلاسی که اسمِ کارِ یک component را می‌گوید، مثلِ \u003Ccode>.btn\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":54,"heading":55,"html":56},"checkpoint","تمرین‌ها","\u003Ch2 id=\"تمرین‌ها\">تمرین‌ها\u003Ca class=\"head-anchor\" href=\"#%D8%AA%D9%85%D8%B1%DB%8C%D9%86%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: چرا افزودنِ \u003Ccode>!important\u003C\u002Fcode> جنگِ specificity را حل نمی‌کند بلکه بدترش می‌کند؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یک modifierِ سومِ \u003Ccode>.btn--ghost\u003C\u002Fcode> بساز (دکمهٔ کم‌رنگ با پس‌زمینهٔ روشن و متنِ آبی). آن را داخلِ همان \u003Ccode>@layer components\u003C\u002Fcode> بگذار و به یک دکمهٔ سوم بده. مطمئن شو با یک کلاسِ تنها کار می‌کند و لازم نمی‌شود آن را با هیچ selectorِ سنگین‌تری تقویت کنی.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> عمداً جنگ راه بینداز: قاعدهٔ \u003Ccode>.card .btn { background-color: teal; }\u003C\u002Fcode> را اضافه کن و ببین دکمه‌ها سبزآبی می‌شوند و modifier ها می‌بازند. حالا به‌جای پاک‌کردنش، آن را داخلِ یک \u003Ccode>@layer base\u003C\u002Fcode> بگذار و \u003Ccode>.btn--danger\u003C\u002Fcode> را در \u003Ccode>@layer components\u003C\u002Fcode> نگه دار — و ببین چطور modifier با اینکه specificityِ کمتری دارد، فقط به‌خاطرِ ترتیبِ layer دوباره می‌بَرد.\u003C\u002Fp>\n",{"kind":21,"heading":58,"html":59},"در فصل بعد","\u003Ch2 id=\"در-فصل-بعد\">در فصل بعد\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D9%81%D8%B5%D9%84-%D8%A8%D8%B9%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>الان می‌توانی CSS را در مقیاسِ بزرگ منظم و بی‌جنگ نگه داری. ولی هرچقدر هم مرتب کار کنی، لحظه‌هایی پیش می‌آید که چیزی «باید» کار کند و نمی‌کند و نمی‌دانی چرا. فصل بعد مثلِ یک حرفه‌ای اشکال‌زدایی می‌کنیم: مسئله را نصف می‌کنی تا مقصر را گیر بیندازی، مقدارِ نهایی را در Computed می‌خوانی، و آن یک عنصری را که کلِ layout را به‌هم ریخته پیدا می‌کنی.\u003C\u002Fp>\n",{"course":61,"entitled":69,"lessons":70,"payments_enabled":69,"terms":255,"live":5},{"active_window":62,"effective_price_toman":63,"free":5,"lesson_count":64,"price_toman":65,"slug":66,"summary_fa":67,"title_fa":68},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[71,75,79,83,87,91,94,97,100,103,107,110,113,116,119,122,125,128,131,134,137,141,144,147,150,153,156,159,162,165,168,171,174,177,180,183,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,247,248,249,252],{"free_preview":5,"order":72,"slug":73,"source":8,"term":72,"title_fa":74},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":76,"slug":77,"source":8,"term":72,"title_fa":78},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":80,"slug":81,"source":8,"term":72,"title_fa":82},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":84,"slug":85,"source":8,"term":72,"title_fa":86},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":88,"slug":89,"source":8,"term":72,"title_fa":90},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":9,"slug":92,"source":8,"term":72,"title_fa":93},"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":12,"slug":95,"source":8,"term":72,"title_fa":96},"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":6,"slug":98,"source":8,"term":72,"title_fa":99},"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":16,"slug":101,"source":8,"term":72,"title_fa":102},"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":104,"slug":105,"source":8,"term":72,"title_fa":106},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":72,"slug":108,"source":8,"term":76,"title_fa":109},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":76,"slug":111,"source":8,"term":76,"title_fa":112},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":80,"slug":114,"source":8,"term":76,"title_fa":115},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":84,"slug":117,"source":8,"term":76,"title_fa":118},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":88,"slug":120,"source":8,"term":76,"title_fa":121},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":9,"slug":123,"source":8,"term":76,"title_fa":124},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":12,"slug":126,"source":8,"term":76,"title_fa":127},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":6,"slug":129,"source":8,"term":76,"title_fa":130},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":16,"slug":132,"source":8,"term":76,"title_fa":133},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":104,"slug":135,"source":8,"term":76,"title_fa":136},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":138,"slug":139,"source":8,"term":76,"title_fa":140},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":72,"slug":142,"source":8,"term":80,"title_fa":143},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":76,"slug":145,"source":8,"term":80,"title_fa":146},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":80,"slug":148,"source":8,"term":80,"title_fa":149},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":84,"slug":151,"source":8,"term":80,"title_fa":152},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":88,"slug":154,"source":8,"term":80,"title_fa":155},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":9,"slug":157,"source":8,"term":80,"title_fa":158},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":12,"slug":160,"source":8,"term":80,"title_fa":161},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":6,"slug":163,"source":8,"term":80,"title_fa":164},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":16,"slug":166,"source":8,"term":80,"title_fa":167},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":104,"slug":169,"source":8,"term":80,"title_fa":170},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":138,"slug":172,"source":8,"term":80,"title_fa":173},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":72,"slug":175,"source":8,"term":84,"title_fa":176},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":76,"slug":178,"source":8,"term":84,"title_fa":179},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":80,"slug":181,"source":8,"term":84,"title_fa":182},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":84,"slug":184,"source":8,"term":84,"title_fa":185},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":88,"slug":187,"source":8,"term":84,"title_fa":188},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":9,"slug":190,"source":8,"term":84,"title_fa":191},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":12,"slug":193,"source":8,"term":84,"title_fa":194},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":6,"slug":196,"source":8,"term":84,"title_fa":197},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":72,"slug":199,"source":8,"term":88,"title_fa":200},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":76,"slug":202,"source":8,"term":88,"title_fa":203},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":80,"slug":205,"source":8,"term":88,"title_fa":206},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":84,"slug":208,"source":8,"term":88,"title_fa":209},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":88,"slug":211,"source":8,"term":88,"title_fa":212},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":9,"slug":214,"source":8,"term":88,"title_fa":215},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":12,"slug":217,"source":8,"term":88,"title_fa":218},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":6,"slug":220,"source":8,"term":88,"title_fa":221},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":16,"slug":223,"source":8,"term":88,"title_fa":224},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":104,"slug":226,"source":8,"term":88,"title_fa":227},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":72,"slug":229,"source":8,"term":9,"title_fa":230},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":76,"slug":232,"source":8,"term":9,"title_fa":233},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":80,"slug":235,"source":8,"term":9,"title_fa":236},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":84,"slug":238,"source":8,"term":9,"title_fa":239},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":88,"slug":241,"source":8,"term":9,"title_fa":242},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":9,"slug":244,"source":8,"term":9,"title_fa":245},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},{"free_preview":5,"order":104,"slug":250,"source":8,"term":9,"title_fa":251},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":138,"slug":253,"source":8,"term":9,"title_fa":254},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105776]