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