[{"data":1,"prerenderedAt":250},["ShallowReactive",2],{"lesson:t6-s01-organizing":3,"course:taropood":55},{"meta":4,"prev":11,"next":16,"sections":20},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,1,"t6-s01-organizing","book",6,"فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":12,"slug":13,"source":8,"term":14,"title_fa":15},10,"t5-s10-interaction-project",5,"فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":17,"slug":18,"source":8,"term":9,"title_fa":19},2,"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",[21,25,28,33,36,39,42,45,48,52],{"kind":22,"heading":23,"html":24},"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 بلدی — رنگ، فاصله، layout، حالت. ولی در یک پروژهٔ واقعی، مشکل دیگر «چطور این کار را بکنم؟» نیست؛ مشکل این است که فایلِ CSS ات بعد از دویست خط تبدیل می‌شود به یک انبارِ به‌هم‌ریخته که خودت هم تویش گم می‌شوی. این فصل دربارهٔ همان است: یک صفحهٔ کوچکِ فروشگاه با چند کارتِ محصول می‌سازی، و مهم‌تر از خروجی، \u003Cstrong>stylesheet ای مرتب\u003C\u002Fstrong> تحویل می‌دهی که شش ماه بعد هم بتوانی بخوانی‌اش.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-organized-stylesheet.233d62a4d0.160.webp 160w, \u002F_img\u002F01-image-organized-stylesheet.233d62a4d0.320.webp 320w, \u002F_img\u002F01-image-organized-stylesheet.233d62a4d0.640.webp 640w, \u002F_img\u002F01-image-organized-stylesheet.233d62a4d0.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-organized-stylesheet.233d62a4d0.1280.jpg\" srcset=\"\u002F_img\u002F01-image-organized-stylesheet.233d62a4d0.160.jpg 160w, \u002F_img\u002F01-image-organized-stylesheet.233d62a4d0.320.jpg 320w, \u002F_img\u002F01-image-organized-stylesheet.233d62a4d0.640.jpg 640w, \u002F_img\u002F01-image-organized-stylesheet.233d62a4d0.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک stylesheet که به بخش‌های مرتب تقسیم شده: بالا یک بخش کوچک، بعد بخش پایه، بعد بخش چیدمان، و پایین بخش بزرگ‌ترِ component ها؛ سمتِ دیگر همان کد به‌هم‌ریخته و بدون بخش‌بندی\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>قاعده‌های CSS را در چند بخشِ منطقی (reset، base، layout، component) مرتب کنی\u003C\u002Fli>\n\u003Cli>برای هر تکه یک نامِ \u003Ccode>class\u003C\u002Fcode> یک‌دست انتخاب کنی (قرارداد block و element و modifier)\u003C\u002Fli>\n\u003Cli>بفهمی چرا دو قاعدهٔ تکراری با هم می‌جنگند و کدام برنده می‌شود\u003C\u002Fli>\n\u003Cli>یک stylesheet را طوری بنویسی که ماه‌ها بعد هم قابل نگه‌داری باشد\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":22,"heading":26,"html":27},"قبل از شروع","\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> cascade — وقتی دو قاعده specificity برابر دارند، \u003Cstrong>قاعدهٔ بعدی\u003C\u002Fstrong> برنده می‌شود. این فصل دقیقاً روی همین می‌چرخد.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۲:\u003C\u002Fstrong> selector نوع و \u003Ccode>class\u003C\u002Fcode> و گروه‌کردن.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۳:\u003C\u002Fstrong> \u003Ccode>grid\u003C\u002Fcode> برای کنارِ‌هم‌چیدنِ کارت‌ها.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":29,"heading":30,"html":31,"embed":32},"lab","","— یک stylesheet شلوغ و به‌هم‌ریخته می‌بینی که کارت‌هایش رنگِ اشتباه گرفته‌اند. کارِ این فصل این است که خط‌به‌خط مرتبش کنی و ببینی هم درست می‌شود و هم خواندنی","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-6-professional\u002Fsession-01-organizing",{"kind":22,"heading":34,"html":35},"۱. یک stylesheet شلوغ","\u003Ch2 id=\"۱-یک-stylesheet-شلوغ\">۱. یک stylesheet شلوغ\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%DB%8C%DA%A9-stylesheet-%D8%B4%D9%84%D9%88%D8%BA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>فرض کن این CSS را برای کارت‌ها نوشته‌ای. قاعده‌ها بی‌ترتیب افتاده‌اند و یک نفر (خودت، دو هفتهٔ پیش) پایینش یک «اصلاحِ سریع» اضافه کرده:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card__buy {\n  background-color: #2a6b93;\n  color: #ffffff;\n  padding: 8px 16px;\n}\n\n.card {\n  background-color: #ffffff;\n  border: 1px solid #d8ccae;\n  border-radius: 12px;\n  padding: 16px;\n}\n\n.cards {\n  list-style: none;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 16px;\n}\n\n\u002F* yek tweak-e sari'e ke ba'dan ezafe shod *\u002F\n.card {\n  background-color: #e7ddc4;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>به کارت‌ها نگاه کن: به‌جای سفید، \u003Cstrong>بژِ کدر\u003C\u002Fstrong> شده‌اند. تو که \u003Ccode>background-color: #ffffff\u003C\u002Fcode> نوشته بودی؛ پس چرا سفید نیست؟\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> دنبال اسمِ \u003Ccode>.card\u003C\u002Fcode> بگرد — \u003Cstrong>دو بار\u003C\u002Fstrong> تعریف شده. هر دو قاعده specificity برابر دارند (هر دو یک \u003Ccode>class\u003C\u002Fcode> اند)، پس همان قانونِ cascade از ترم ۲ تصمیم می‌گیرد: \u003Cstrong>قاعده‌ای که بعد آمده برنده است.\u003C\u002Fstrong> آن «اصلاحِ سریعِ» پایین، رنگِ سفید را با بژ عوض کرده و چون آخر است، برنده شده. راهِ درست: آن قاعدهٔ تکراری را پاک کن و برای هر selector فقط \u003Cstrong>یک\u003C\u002Fstrong> قاعده نگه‌دار.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>این کوچک‌ترین شکلِ یک بیماریِ بزرگ است: وقتی قاعده‌ها بی‌نظم‌اند، تکراری‌ها پنهان می‌شوند و بی‌صدا با هم می‌جنگند. درمانش دو چیز است: \u003Cstrong>یک ترتیبِ منطقی\u003C\u002Fstrong> و \u003Cstrong>یک نامِ یک‌دست\u003C\u002Fstrong>. برویم سراغشان.\u003C\u002Fp>\n",{"kind":22,"heading":37,"html":38},"۲. یک ترتیبِ منطقی","\u003Ch2 id=\"۲-یک-ترتیبِ-منطقی\">۲. یک ترتیبِ منطقی\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%DB%8C%DA%A9-%D8%AA%D8%B1%D8%AA%DB%8C%D8%A8%D9%90-%D9%85%D9%86%D8%B7%D9%82%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>CSS را الکی از بالا به پایین ننویس. قاعده‌ها را در چند بخش دسته‌بندی کن، همیشه به یک ترتیب — از عام به خاص:\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Cstrong>reset\u003C\u002Fstrong> — صفرکردنِ چیزهای پیش‌فرضِ مرورگر (\u003Ccode>margin\u003C\u002Fcode>, \u003Ccode>padding\u003C\u002Fcode>, \u003Ccode>box-sizing\u003C\u002Fcode>).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>base\u003C\u002Fstrong> — استایلِ پایهٔ خودِ صفحه: \u003Ccode>body\u003C\u002Fcode>، فونت، رنگِ متن، heading ها.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>layout\u003C\u002Fstrong> — چیدمانِ بزرگ: جایی که \u003Ccode>grid\u003C\u002Fcode> و \u003Ccode>flex\u003C\u002Fcode> می‌چینی.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>component\u003C\u002Fstrong> — تکه‌های قابل‌تکرار: کارت، دکمه، فرم.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>چرا از عام به خاص؟ چون همان cascade: قاعده‌های عام باید اول بیایند تا قاعده‌های خاصِ بعدی بتوانند رویشان را بگیرند، نه برعکس. وقتی ترتیب طبیعی همین باشد، دیگر کمتر پیش می‌آید که ندانی چرا چیزی override شده.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> بین بخش‌ها یک کامنتِ عنوان بگذار، مثل \u003Ccode>\u002F* ---------- layout ---------- *\u002F\u003C\u002Fcode>. این کامنت‌ها مثلِ تیترِ فصل‌های یک کتاب‌اند؛ وقتی فایل بلند می‌شود، با یک نگاه می‌فهمی هر چیز کجاست.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":22,"heading":40,"html":41},"۳. یک نامِ یک‌دست برای class ها","\u003Ch2 id=\"۳-یک-نامِ-یک‌دست-برای-class-ها\">۳. یک نامِ یک‌دست برای \u003Ccode>class\u003C\u002Fcode> ها\u003Ca class=\"head-anchor\" href=\"#%DB%B3-%DB%8C%DA%A9-%D9%86%D8%A7%D9%85%D9%90-%DB%8C%DA%A9%E2%80%8C%D8%AF%D8%B3%D8%AA-%D8%A8%D8%B1%D8%A7%DB%8C-class-%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>مشکلِ دومِ فایل‌های شلوغ، اسم‌گذاریِ سلیقه‌ای است: یکی \u003Ccode>.redButton\u003C\u002Fcode>، یکی \u003Ccode>.btn2\u003C\u002Fcode>، یکی \u003Ccode>.card-title-big\u003C\u002Fcode>. شش ماه بعد هیچ‌کدام معنا نمی‌دهند. یک قرارداد ساده و پرطرفدار این را حل می‌کند. سه نوع اسم داریم:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>block\u003C\u002Fstrong> — خودِ تکهٔ مستقل: \u003Ccode>.card\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>element\u003C\u002Fstrong> — جزئی درونِ آن block، با دو زیرخط: \u003Ccode>.card__title\u003C\u002Fcode>، \u003Ccode>.card__price\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>modifier\u003C\u002Fstrong> — یک حالتِ متفاوتِ همان block، با دو خط‌تیره: \u003Ccode>.card--featured\u003C\u002Fcode> (کارتِ ویژه).\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>از روی اسم \u003Ccode>.card__price\u003C\u002Fcode> بلافاصله می‌فهمی «قیمت، جزئی از کارت است»، و از \u003Ccode>.card--featured\u003C\u002Fcode> می‌فهمی «همان کارت، ولی در حالتِ ویژه». این‌ها را انگلیسی و بامعنا نگه‌دار؛ یک اسمِ خوب، نصفِ مستندسازی است.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-bem-anatomy.18be017465.160.webp 160w, \u002F_img\u002F02-image-bem-anatomy.18be017465.320.webp 320w, \u002F_img\u002F02-image-bem-anatomy.18be017465.640.webp 640w, \u002F_img\u002F02-image-bem-anatomy.18be017465.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-bem-anatomy.18be017465.1280.jpg\" srcset=\"\u002F_img\u002F02-image-bem-anatomy.18be017465.160.jpg 160w, \u002F_img\u002F02-image-bem-anatomy.18be017465.320.jpg 320w, \u002F_img\u002F02-image-bem-anatomy.18be017465.640.jpg 640w, \u002F_img\u002F02-image-bem-anatomy.18be017465.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک کارت که کادرِ بیرونی‌اش به‌عنوان block رنگ خورده، دو ناحیهٔ درونی‌اش (عنوان و قیمت) با رنگِ متفاوت به‌عنوان element مشخص شده، و کنارش همان کارت در نسخهٔ ویژه با کادرِ نارنجی به‌عنوان modifier\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> این قرارداد را به‌عنوان قانونِ آهنین نگیر که برای هر \u003Ccode><div>\u003C\u002Fcode> سه‌تا اسمِ عجیب بسازی. هدف \u003Cstrong>خواناییِ\u003C\u002Fstrong> توست، نه رعایتِ تشریفات. اگر یک اسمِ ساده کافی است، همان کافی است.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":22,"heading":43,"html":44},"۴. همه را کنارِ هم: فایلِ مرتب","\u003Ch2 id=\"۴-همه-را-کنارِ-هم-فایلِ-مرتب\">۴. همه را کنارِ هم: فایلِ مرتب\u003Ca class=\"head-anchor\" href=\"#%DB%B4-%D9%87%D9%85%D9%87-%D8%B1%D8%A7-%DA%A9%D9%86%D8%A7%D8%B1%D9%90-%D9%87%D9%85-%D9%81%D8%A7%DB%8C%D9%84%D9%90-%D9%85%D8%B1%D8%AA%D8%A8\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا همان قاعده‌ها را در ترتیبِ درست، با اسم‌های یک‌دست و بدونِ تکراری بازنویسی می‌کنیم. این نسخهٔ نهاییِ \u003Ccode>styles.css\u003C\u002Fcode> است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\n\n\u002F* ---------- reset ---------- *\u002F\n* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n\u002F* ---------- base ---------- *\u002F\nbody {\n  font-family: Tahoma, sans-serif;\n  background-color: #f6edda;\n  color: #2c2114;\n  line-height: 1.7;\n}\n\n.page {\n  max-width: 560px;\n  margin-inline: auto;\n  padding: 24px;\n}\n\nh1 {\n  margin-block-end: 20px;\n}\n\n\u002F* ---------- layout ---------- *\u002F\n.cards {\n  list-style: none;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 16px;\n}\n\n\u002F* ---------- components ---------- *\u002F\n\n\u002F* card *\u002F\n.card {\n  background-color: #ffffff;\n  border: 1px solid #d8ccae;\n  border-radius: 12px;\n  padding: 16px;\n}\n\n.card__title {\n  font-size: 1.1rem;\n  margin-block-end: 8px;\n}\n\n.card__price {\n  color: #55731b;\n  margin-block-end: 12px;\n}\n\n.card__buy {\n  font: inherit;\n  background-color: #2a6b93;\n  color: #ffffff;\n  border: none;\n  border-radius: 8px;\n  padding: 8px 16px;\n  cursor: pointer;\n}\n\n\u002F* card--featured: kart-e vizhe *\u002F\n.card--featured {\n  border-color: #bc3e1c;\n  background-color: #fff7ef;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و \u003Ccode>index.html\u003C\u002Fcode> که این class ها را به‌کار می‌برد:\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>فروشگاه کوچک<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <main class="page">\n      <h1>فروشگاه کوچک<\u002Fh1>\n      <ul class="cards">\n        <li class="card card--featured">\n          <h2 class="card__title">هدفون<\u002Fh2>\n          <p class="card__price">۲۵۰ هزار تومان<\u002Fp>\n          <button class="card__buy">خرید<\u002Fbutton>\n        <\u002Fli>\n        <li class="card">\n          <h2 class="card__title">کیبورد<\u002Fh2>\n          <p class="card__price">۴۸۰ هزار تومان<\u002Fp>\n          <button class="card__buy">خرید<\u002Fbutton>\n        <\u002Fli>\n      <\u002Ful>\n    <\u002Fmain>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> دو کارتِ سفید کنارِ هم می‌بینی، اولی با کادرِ نارنجی و پس‌زمینهٔ کمی روشن‌تر (چون class اش \u003Ccode>card--featured\u003C\u002Fcode> است)، و هر کدام یک دکمهٔ آبیِ «خرید» دارند. حالا \u003Ccode>.card\u003C\u002Fcode> را در فایل جست‌وجو کن: فقط \u003Cstrong>یک بار\u003C\u002Fstrong> پیدا می‌شود. همان تکراریِ جنگ‌جو رفته، و کارت‌ها دوباره سفیدند.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Checkpoint.\u003C\u002Fstrong> قبل از ادامه، جواب بده: اگر دوباره یک قاعدهٔ دومِ \u003Ccode>.card\u003C\u002Fcode> با رنگِ متفاوت، ولی این‌بار \u003Cstrong>بالای\u003C\u002Fstrong> قاعدهٔ اصلی بگذاری، کارت چه رنگی می‌شود؟ (جواب: رنگِ قاعدهٔ اصلی، چون آن پایین‌تر است و در برابریِ specificity، بعدی برنده است. به همین دلیل جای هر قاعده مهم است.)\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> بعد از اینکه خودت فایل را مرتب کردی، اسم‌های class ات را به دستیار AI ات بده و بپرس «این اسم‌ها با قرارداد block\u002Felement\u002Fmodifier یک‌دست‌اند؟ کدام گنگ است؟». جوابش را با معیارِ خودت بسنج — هر اسمی که خودت با یک نگاه نمی‌فهمی، واقعاً بد است؛ ولی پیشنهادهای AI را هم خط‌به‌خط چک کن، چون گاهی برای سادگی، اسمِ خوبِ تو را بی‌دلیل پیچیده‌تر می‌کند.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":22,"heading":46,"html":47},"واژه‌های تازهٔ این فصل","\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>reset\u003C\u002Ftd>\n\u003Ctd>ری‌سِت\u003C\u002Ftd>\n\u003Ctd>بخشِ اولِ CSS که پیش‌فرض‌های مرورگر را صفر می‌کند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>base\u003C\u002Ftd>\n\u003Ctd>بیس\u003C\u002Ftd>\n\u003Ctd>استایلِ پایهٔ صفحه: \u003Ccode>body\u003C\u002Fcode>، فونت، heading\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>block\u003C\u002Ftd>\n\u003Ctd>بلاک\u003C\u002Ftd>\n\u003Ctd>یک تکهٔ مستقل، مثل \u003Ccode>.card\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>element\u003C\u002Ftd>\n\u003Ctd>اِلِمِنت\u003C\u002Ftd>\n\u003Ctd>جزئی درونِ یک block، با \u003Ccode>__\u003C\u002Fcode> (مثل \u003Ccode>.card__title\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>modifier\u003C\u002Ftd>\n\u003Ctd>مادیفایِر\u003C\u002Ftd>\n\u003Ctd>یک حالتِ متفاوتِ block، با \u003Ccode>--\u003C\u002Fcode> (مثل \u003Ccode>.card--featured\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>maintainable\u003C\u002Ftd>\n\u003Ctd>مِین‌تِین‌اِبِل\u003C\u002Ftd>\n\u003Ctd>کدی که ماه‌ها بعد هم راحت خوانده و عوض می‌شود\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":49,"heading":50,"html":51},"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>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> به همین فایل یک component سومِ خودت اضافه کن — مثلاً یک \u003Ccode>.badge\u003C\u002Fcode> (نشانِ «تخفیف») که رویِ کارتِ ویژه بنشیند. قاعده‌اش را در بخشِ درستِ فایل (component ها) بگذار، و اسمش را با همان قرارداد بساز. بعد یک قاعدهٔ تکراریِ عمدی برای \u003Ccode>.card__buy\u003C\u002Fcode> پایینِ فایل اضافه کن، رنگش را ببین که عوض می‌شود، و دوباره پاکش کن.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> stylesheet یک پروژهٔ قدیمی‌ترِ خودت (مثلاً پروژهٔ ترم ۵) را باز کن و فقط با \u003Cstrong>جابه‌جا کردنِ\u003C\u002Fstrong> قاعده‌ها و افزودنِ کامنت‌های بخش، مرتبش کن — بدون اینکه هیچ رنگ یا اندازه‌ای را عوض کنی. اگر کارت یا دکمه‌ای بعدِ مرتب‌سازی ظاهرش عوض شد، یعنی یک تکراریِ پنهان داشتی که تازه پیدایش کردی.\u003C\u002Fp>\n",{"kind":22,"heading":53,"html":54},"در فصل بعد","\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 ات را با دست مرتب کنی. ولی وقتی پروژه بزرگ می‌شود، حتی نظمِ دستی هم کم می‌آورد و باز سرِ اینکه «کدام قاعده برنده شود» با specificity می‌جنگی. فصل بعد دو ابزارِ تازه یاد می‌گیری که همین را در مقیاسِ بزرگ حل می‌کنند: \u003Ccode>@layer\u003C\u002Fcode> که به تو اجازه می‌دهد ترتیبِ برنده‌شدن را خودت تعیین کنی — حتی بالاتر از specificity — و nesting که قاعده‌های مربوط به هم را تودرتو و کنارِ هم نگه می‌دارد.\u003C\u002Fp>\n",{"course":56,"entitled":64,"lessons":65,"payments_enabled":64,"terms":249,"live":5},{"active_window":57,"effective_price_toman":58,"free":5,"lesson_count":59,"price_toman":60,"slug":61,"summary_fa":62,"title_fa":63},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[66,69,72,76,80,83,86,90,94,98,101,104,107,110,113,116,119,122,125,128,131,135,138,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,220,221,222,225,228,231,234,237,240,243,246],{"free_preview":5,"order":6,"slug":67,"source":8,"term":6,"title_fa":68},"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":17,"slug":70,"source":8,"term":6,"title_fa":71},"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":73,"slug":74,"source":8,"term":6,"title_fa":75},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":77,"slug":78,"source":8,"term":6,"title_fa":79},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":14,"slug":81,"source":8,"term":6,"title_fa":82},"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":9,"slug":84,"source":8,"term":6,"title_fa":85},"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":87,"slug":88,"source":8,"term":6,"title_fa":89},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":91,"slug":92,"source":8,"term":6,"title_fa":93},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":95,"slug":96,"source":8,"term":6,"title_fa":97},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":12,"slug":99,"source":8,"term":6,"title_fa":100},"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":6,"slug":102,"source":8,"term":17,"title_fa":103},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":17,"slug":105,"source":8,"term":17,"title_fa":106},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":73,"slug":108,"source":8,"term":17,"title_fa":109},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":77,"slug":111,"source":8,"term":17,"title_fa":112},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":14,"slug":114,"source":8,"term":17,"title_fa":115},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":9,"slug":117,"source":8,"term":17,"title_fa":118},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":87,"slug":120,"source":8,"term":17,"title_fa":121},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":91,"slug":123,"source":8,"term":17,"title_fa":124},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":95,"slug":126,"source":8,"term":17,"title_fa":127},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":12,"slug":129,"source":8,"term":17,"title_fa":130},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":132,"slug":133,"source":8,"term":17,"title_fa":134},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":6,"slug":136,"source":8,"term":73,"title_fa":137},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":17,"slug":139,"source":8,"term":73,"title_fa":140},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":73,"slug":142,"source":8,"term":73,"title_fa":143},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":77,"slug":145,"source":8,"term":73,"title_fa":146},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":14,"slug":148,"source":8,"term":73,"title_fa":149},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":9,"slug":151,"source":8,"term":73,"title_fa":152},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":87,"slug":154,"source":8,"term":73,"title_fa":155},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":91,"slug":157,"source":8,"term":73,"title_fa":158},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":95,"slug":160,"source":8,"term":73,"title_fa":161},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":12,"slug":163,"source":8,"term":73,"title_fa":164},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":132,"slug":166,"source":8,"term":73,"title_fa":167},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":6,"slug":169,"source":8,"term":77,"title_fa":170},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":17,"slug":172,"source":8,"term":77,"title_fa":173},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":73,"slug":175,"source":8,"term":77,"title_fa":176},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":77,"slug":178,"source":8,"term":77,"title_fa":179},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":14,"slug":181,"source":8,"term":77,"title_fa":182},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":9,"slug":184,"source":8,"term":77,"title_fa":185},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":87,"slug":187,"source":8,"term":77,"title_fa":188},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":91,"slug":190,"source":8,"term":77,"title_fa":191},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":6,"slug":193,"source":8,"term":14,"title_fa":194},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":17,"slug":196,"source":8,"term":14,"title_fa":197},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":73,"slug":199,"source":8,"term":14,"title_fa":200},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":77,"slug":202,"source":8,"term":14,"title_fa":203},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":14,"slug":205,"source":8,"term":14,"title_fa":206},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":9,"slug":208,"source":8,"term":14,"title_fa":209},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":87,"slug":211,"source":8,"term":14,"title_fa":212},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":91,"slug":214,"source":8,"term":14,"title_fa":215},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":95,"slug":217,"source":8,"term":14,"title_fa":218},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":12,"slug":13,"source":8,"term":14,"title_fa":15},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":17,"slug":18,"source":8,"term":9,"title_fa":19},{"free_preview":5,"order":73,"slug":223,"source":8,"term":9,"title_fa":224},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":77,"slug":226,"source":8,"term":9,"title_fa":227},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":14,"slug":229,"source":8,"term":9,"title_fa":230},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":9,"slug":232,"source":8,"term":9,"title_fa":233},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":87,"slug":235,"source":8,"term":9,"title_fa":236},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":91,"slug":238,"source":8,"term":9,"title_fa":239},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":95,"slug":241,"source":8,"term":9,"title_fa":242},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":12,"slug":244,"source":8,"term":9,"title_fa":245},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":132,"slug":247,"source":8,"term":9,"title_fa":248},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105734]