[{"data":1,"prerenderedAt":253},["ShallowReactive",2],{"lesson:t6-s02-layers-nesting":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,2,"t6-s02-layers-nesting","book",6,"فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},1,"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},3,"t6-s03-components","فصل ۰۳ — مثل component فکر کن",[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 ات را با دست مرتب کردی. ولی یک مشکل با نظمِ دستی حل نمی‌شود: جنگِ specificity. گاهی یک قاعده لجوجانه برنده می‌شود، هرچقدر هم پایین‌ترش قاعدهٔ دیگری بنویسی، چون specificity اش بیشتر است. این فصل دو ابزار یاد می‌گیری: \u003Ccode>@layer\u003C\u002Fcode> که به تو اجازه می‌دهد \u003Cstrong>ترتیبِ برنده‌شدن\u003C\u002Fstrong> را خودت تعیین کنی — حتی بالاتر از specificity — و nesting که قاعده‌های مربوط به هم را تودرتو کنارِ هم نگه می‌دارد. آخرش یک کارت داری که یک پیوندِ «کم‌رنگ» تویش، بالاخره واقعاً کم‌رنگ می‌شود.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-layer-order.c2d5def15f.160.webp 160w, \u002F_img\u002F01-image-layer-order.c2d5def15f.320.webp 320w, \u002F_img\u002F01-image-layer-order.c2d5def15f.640.webp 640w, \u002F_img\u002F01-image-layer-order.c2d5def15f.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-layer-order.c2d5def15f.1280.jpg\" srcset=\"\u002F_img\u002F01-image-layer-order.c2d5def15f.160.jpg 160w, \u002F_img\u002F01-image-layer-order.c2d5def15f.320.jpg 320w, \u002F_img\u002F01-image-layer-order.c2d5def15f.640.jpg 640w, \u002F_img\u002F01-image-layer-order.c2d5def15f.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"دو لایهٔ روی‌هم‌چیده‌شدهٔ قاعده‌های CSS: یک لایهٔ پایین و یک لایهٔ بالا؛ یک فلش نشان می‌دهد قاعدهٔ لایهٔ بالا برنده است، بی‌آنکه به بزرگیِ نشانه‌های specificity اهمیت بدهد\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>چند \u003Ccode>@layer\u003C\u002Fcode> نام‌گذاری کنی و ترتیبِ برنده‌شدنشان را تعیین کنی\u003C\u002Fli>\n\u003Cli>بفهمی چرا یک قاعده در لایهٔ بالاتر، حتی با specificity کمتر، برنده می‌شود\u003C\u002Fli>\n\u003Cli>با nesting بومیِ CSS قاعده‌های یک component را تودرتو بنویسی\u003C\u002Fli>\n\u003Cli>بگویی چرا nesting را برای استایلِ پایه و حیاتی به‌کار نمی‌بری\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> selector نوع و descendant (فاصله).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۱ همین ترم:\u003C\u002Fstrong> ترتیبِ منطقیِ قاعده‌ها و اسم‌گذاریِ block\u002Felement.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— یک کارت با دو پیوند می‌بینی؛ یکی‌شان قرار است «کم‌رنگ» باشد ولی نیست. کارِ این فصل این است که با @layer درستش کنی و بعد کدت را با nesting تمیز کنی","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-6-professional\u002Fsession-02-layers-nesting",{"kind":21,"heading":33,"html":34},"۱. یک جنگِ لجوجانه","\u003Ch2 id=\"۱-یک-جنگِ-لجوجانه\">۱. یک جنگِ لجوجانه\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%DB%8C%DA%A9-%D8%AC%D9%86%DA%AF%D9%90-%D9%84%D8%AC%D9%88%D8%AC%D8%A7%D9%86%D9%87\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>فرض کن پیوندهای درونِ کارت را نارنجی کرده‌ای، و یک \u003Ccode>class\u003C\u002Fcode> به اسمِ \u003Ccode>.muted\u003C\u002Fcode> هم داری که هر چیزی را خاکستریِ کم‌رنگ کند. حالا به پیوندِ «بعداً می‌خوانم» این class را می‌دهی. CSS ات (بدونِ layer) این است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card a {\n  color: #bc3e1c;\n}\n\n.muted {\n  color: #8a7f6a;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>به کارت نگاه کن: پیوندِ «بعداً می‌خوانم» هنوز \u003Cstrong>نارنجی\u003C\u002Fstrong> است، نه خاکستری. \u003Ccode>class="muted"\u003C\u002Fcode> انگار هیچ کاری نکرد.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> این باگ نیست، خودِ cascade است. specificity را بشمار: \u003Ccode>.card a\u003C\u002Fcode> یعنی یک \u003Ccode>class\u003C\u002Fcode> به‌علاوهٔ یک نوع، پس وزنش \u003Ccode>(۰,۱,۱)\u003C\u002Fcode> است؛ \u003Ccode>.muted\u003C\u002Fcode> فقط یک \u003Ccode>class\u003C\u002Fcode> است، وزنش \u003Ccode>(۰,۱,۰)\u003C\u002Fcode>. پس \u003Ccode>.card a\u003C\u002Fcode> سنگین‌تر است و برنده می‌شود. می‌توانی \u003Ccode>.muted\u003C\u002Fcode> را پایین‌تر ببری یا سنگین‌ترش کنی، ولی این همان مسیرِ لغزنده‌ای است که به \u003Ccode>!important\u003C\u002Fcode> و کدِ غیرقابل‌نگه‌داری می‌رسد. راهِ حرفه‌ای این است که \u003Cstrong>ترتیبِ برنده‌شدن را از دستِ specificity دربیاوری\u003C\u002Fstrong> — و \u003Ccode>@layer\u003C\u002Fcode> دقیقاً همین کار را می‌کند.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":36,"html":37},"۲. @layer: ترتیب را خودت تعیین کن","\u003Ch2 id=\"۲-@layer-ترتیب-را-خودت-تعیین-کن\">۲. \u003Ccode>@layer\u003C\u002Fcode>: ترتیب را خودت تعیین کن\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%40layer-%D8%AA%D8%B1%D8%AA%DB%8C%D8%A8-%D8%B1%D8%A7-%D8%AE%D9%88%D8%AF%D8%AA-%D8%AA%D8%B9%DB%8C%DB%8C%D9%86-%DA%A9%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>@layer\u003C\u002Fcode> قاعده‌ها را در چند لایهٔ نام‌دار دسته می‌کند، و \u003Cstrong>ترتیبِ لایه‌ها را تو تعیین می‌کنی\u003C\u002Fstrong>. قانونِ کلیدی این است: وقتی دو قاعده در دو لایهٔ متفاوت‌اند، \u003Cstrong>لایهٔ بعدی برنده است — بی‌اهمیت به specificity.\u003C\u002Fstrong> یعنی layer ترتیب را از specificity قوی‌تر می‌گیرد.\u003C\u002Fp>\n\u003Cp>اول یک خط، ترتیبِ لایه‌ها را اعلام کن؛ بعد قاعده‌ها را داخلِ لایهٔ خودشان بگذار:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>@layer base, components, utilities;\n\n@layer components {\n  .card a {\n    color: #bc3e1c;\n  }\n}\n\n@layer utilities {\n  .muted {\n    color: #8a7f6a;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>آن خطِ اول می‌گوید ترتیب این است: \u003Ccode>base\u003C\u002Fcode>، بعد \u003Ccode>components\u003C\u002Fcode>، بعد \u003Ccode>utilities\u003C\u002Fcode>. حالا \u003Ccode>.muted\u003C\u002Fcode> در \u003Ccode>utilities\u003C\u002Fcode> است که \u003Cstrong>بعد\u003C\u002Fstrong> از \u003Ccode>components\u003C\u002Fcode> می‌آید، پس برنده می‌شود — با اینکه specificity اش کمتر است.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا «بعداً می‌خوانم» خاکستریِ کم‌رنگ شد و «ادامهٔ مطلب» نارنجی ماند. تو قاعدهٔ لجوجِ component را نگه داشتی، فقط \u003Ccode>.muted\u003C\u002Fcode> را بردی به یک لایهٔ بالاتر تا وقتی لازم شد، تمیز رویش را بگیرد.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Checkpoint.\u003C\u002Fstrong> قبل از ادامه، جواب بده: اگر در خطِ اول ترتیب را برعکس کنی و بنویسی \u003Ccode>@layer utilities, components;\u003C\u002Fcode> چه می‌شود؟ (جواب: حالا \u003Ccode>components\u003C\u002Fcode> بعد از \u003Ccode>utilities\u003C\u002Fcode> است، پس \u003Ccode>.card a\u003C\u002Fcode> دوباره برنده می‌شود و پیوند نارنجی می‌ماند. ترتیبِ آن \u003Cstrong>خطِ اعلان\u003C\u002Fstrong> همه‌چیز را تعیین می‌کند، نه ترتیبِ نوشتنِ خودِ قاعده‌ها.)\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> یک ترتیبِ رایج همین است: \u003Ccode>reset، base، layout، components، utilities\u003C\u002Fcode>. utility ها را آخر می‌گذاری چون قرار است کارِ کوچکِ خودشان را همیشه انجام دهند؛ reset را اول چون باید پایین‌ترین اولویت را داشته باشد. این همان دسته‌بندیِ فصلِ قبل است، ولی این‌بار مرورگر ترتیبش را تضمین می‌کند.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":39,"html":40},"۳. nesting: قاعده‌های مربوط را تودرتو بنویس","\u003Ch2 id=\"۳-nesting-قاعده‌های-مربوط-را-تودرتو-بنویس\">۳. nesting: قاعده‌های مربوط را تودرتو بنویس\u003Ca class=\"head-anchor\" href=\"#%DB%B3-nesting-%D9%82%D8%A7%D8%B9%D8%AF%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C-%D9%85%D8%B1%D8%A8%D9%88%D8%B7-%D8%B1%D8%A7-%D8%AA%D9%88%D8%AF%D8%B1%D8%AA%D9%88-%D8%A8%D9%86%D9%88%DB%8C%D8%B3\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>الان قاعده‌های کارت پخش‌اند: \u003Ccode>.card\u003C\u002Fcode>، \u003Ccode>.card__title\u003C\u002Fcode>، \u003Ccode>.card a\u003C\u002Fcode> هرکدام جدا. با \u003Cstrong>nesting\u003C\u002Fstrong> بومیِ CSS می‌توانی قاعده‌های مربوط به یک چیز را تویش تودرتو کنی. داخلِ \u003Ccode>.card\u003C\u002Fcode> یک \u003Ccode>&\u003C\u002Fcode> می‌گذاری که یعنی «خودِ \u003Ccode>.card\u003C\u002Fcode>»:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card {\n  background-color: #ffffff;\n  border-radius: 12px;\n  padding: 16px;\n\n  & .card__title {\n    margin-block-end: 8px;\n  }\n\n  & a {\n    color: #bc3e1c;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>& .card__title\u003C\u002Fcode> دقیقاً یعنی \u003Ccode>.card .card__title\u003C\u002Fcode>، و \u003Ccode>& a\u003C\u002Fcode> یعنی \u003Ccode>.card a\u003C\u002Fcode> — همان چیزی که قبلاً جدا می‌نوشتی، فقط حالا کنارِ هم و تودرتو. مزیتش خوانایی است: همه‌چیزِ مربوط به کارت در یک block جمع است.\u003C\u002Fp>\n",{"kind":21,"heading":42,"html":43},"۴. یک هشدارِ صادقانه دربارهٔ nesting","\u003Ch2 id=\"۴-یک-هشدارِ-صادقانه-دربارهٔ-nesting\">۴. یک هشدارِ صادقانه دربارهٔ nesting\u003Ca class=\"head-anchor\" href=\"#%DB%B4-%DB%8C%DA%A9-%D9%87%D8%B4%D8%AF%D8%A7%D8%B1%D9%90-%D8%B5%D8%A7%D8%AF%D9%82%D8%A7%D9%86%D9%87-%D8%AF%D8%B1%D8%A8%D8%A7%D8%B1%D9%87%D9%94-nesting\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>nesting بومی در ۲۰۲۶ تقریباً همه‌جا کار می‌کند و می‌توانی با خیال راحت استفاده‌اش کنی. ولی یک نکتهٔ مهم هست که باید بدانی: یک مرورگرِ \u003Cstrong>خیلی قدیمی\u003C\u002Fstrong> که nesting را نمی‌شناسد، کلِ قاعدهٔ تودرتو را دور می‌ریزد — نه فقط بخشِ داخلی را، بلکه کلِ آن block را. این با خیلی از ویژگی‌های دیگر فرق دارد که وقتی ناشناخته‌اند فقط بی‌سروصدا نادیده می‌شوند.\u003C\u002Fp>\n\u003Cp>نتیجهٔ عملی‌اش یک عادتِ ساده است: استایلِ \u003Cstrong>پایه و حیاتی\u003C\u002Fstrong> — مثل reset، رنگِ \u003Ccode>body\u003C\u002Fcode>، اندازهٔ فونت — را تودرتو ننویس؛ صاف و مستقیم بنویس تا همه‌جا کار کند. nesting را برای گروه‌کردنِ استایلِ component ها به‌کار ببر، جایی که اگر یک مرورگرِ عتیقه آن را کمی ساده‌تر نشان دهد، صفحه هنوز خوانا و سالم است. این همان فکرِ progressive enhancement است: پایه برای همه کار کند، تزئینِ اضافه برای مرورگرهای امروزی.\u003C\u002Fp>\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@layer base, components, utilities;\n\n@layer base {\n  * {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  body {\n    font-family: Tahoma, sans-serif;\n    background-color: #f6edda;\n    color: #2c2114;\n    line-height: 1.7;\n    padding: 24px;\n  }\n\n  a {\n    color: #2a6b93;\n  }\n}\n\n@layer components {\n  .card {\n    background-color: #ffffff;\n    border: 1px solid #d8ccae;\n    border-radius: 12px;\n    padding: 16px;\n    max-width: 360px;\n\n    \u002F* nesting: ghava'ed-e daroon-e card inja lah mishavand *\u002F\n    & .card__title {\n      margin-block-end: 8px;\n    }\n\n    & a {\n      color: #bc3e1c;\n    }\n  }\n}\n\n@layer utilities {\n  .muted {\n    color: #8a7f6a;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\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>کارت با لایه‌ها<\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>یک یادداشتِ کوتاه دربارهٔ CSS، با دو پیوند.<\u002Fp>\n        <p><a href="#">ادامهٔ مطلب<\u002Fa><\u002Fp>\n        <p><a href="#" class="muted">بعداً می‌خوانم<\u002Fa><\u002Fp>\n      <\u002Farticle>\n    <\u002Fmain>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>توجه کن که بخشِ \u003Ccode>base\u003C\u002Fcode> — reset و \u003Ccode>body\u003C\u002Fcode> — تودرتو \u003Cstrong>نشده\u003C\u002Fstrong> و صاف نوشته شده؛ دقیقاً همان عادتی که بخشِ قبل گفت. فقط \u003Ccode>.card\u003C\u002Fcode> که یک component است تودرتو شده.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-nesting.47d6a6f5e2.160.webp 160w, \u002F_img\u002F02-image-nesting.47d6a6f5e2.320.webp 320w, \u002F_img\u002F02-image-nesting.47d6a6f5e2.640.webp 640w, \u002F_img\u002F02-image-nesting.47d6a6f5e2.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-nesting.47d6a6f5e2.1280.jpg\" srcset=\"\u002F_img\u002F02-image-nesting.47d6a6f5e2.160.jpg 160w, \u002F_img\u002F02-image-nesting.47d6a6f5e2.320.jpg 320w, \u002F_img\u002F02-image-nesting.47d6a6f5e2.640.jpg 640w, \u002F_img\u002F02-image-nesting.47d6a6f5e2.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>با AI:\u003C\u002Fstrong> یک قاعدهٔ تودرتو به دستیار AI ات بده و بپرس «این nesting دقیقاً به کدام selector های تخت ترجمه می‌شود؟». جوابش را همان‌جا در آزمایشگاه امتحان کن و با چشمت چک کن که واقعاً همان عنصرها را می‌گیرد — AI گاهی معنیِ \u003Ccode>&\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>\u003Ccode>@layer\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>اَت-لِیِر\u003C\u002Ftd>\n\u003Ctd>قاعده‌ها را در لایه‌های نام‌دار دسته می‌کند؛ ترتیبِ لایه، برنده را تعیین می‌کند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>layer order\u003C\u002Ftd>\n\u003Ctd>لِیِر اُردِر\u003C\u002Ftd>\n\u003Ctd>ترتیبِ لایه‌ها؛ لایهٔ بعدی برنده است، بالاتر از specificity\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>nesting\u003C\u002Ftd>\n\u003Ctd>نِستینگ\u003C\u002Ftd>\n\u003Ctd>نوشتنِ قاعده‌ها تودرتو داخلِ یک قاعدهٔ دیگر\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>&\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>اَمپِرسَند\u003C\u002Ftd>\n\u003Ctd>داخلِ nesting یعنی «همین selector بیرونی»\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>progressive enhancement\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> یک لایهٔ چهارم به اسمِ \u003Ccode>theme\u003C\u002Fcode> بعد از \u003Ccode>utilities\u003C\u002Fcode> اعلام کن (\u003Ccode>@layer base, components, utilities, theme;\u003C\u002Fcode>) و تویش یک قاعدهٔ \u003Ccode>.card { background-color: #eef4f8; }\u003C\u002Fcode> بگذار. ببین رنگِ پس‌زمینهٔ کارت عوض می‌شود، هرچند قاعدهٔ اصلیِ \u003Ccode>.card\u003C\u002Fcode> در لایهٔ \u003Ccode>components\u003C\u002Fcode> هنوز هست — چون \u003Ccode>theme\u003C\u002Fcode> بعد از \u003Ccode>components\u003C\u002Fcode> است. حالا \u003Ccode>theme\u003C\u002Fcode> را در خطِ اعلان به \u003Cstrong>اولِ\u003C\u002Fstrong> ترتیب ببر و ببین دیگر برنده نیست.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> قاعدهٔ \u003Ccode>.card\u003C\u002Fcode> را یک پله عمیق‌تر تودرتو کن: داخلش برای \u003Ccode>& a\u003C\u002Fcode> یک حالتِ \u003Ccode>&:hover\u003C\u002Fcode> بنویس (\u003Ccode>& a { color: #bc3e1c; &:hover { color: #9e3216; } }\u003C\u002Fcode>) و با موس رویش برو تا رنگش عوض شود. بعد با معیارِ همین فصل توضیح بده چرا این استایلِ hover را می‌شود تودرتو نوشت، ولی reset را نه.\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>الان می‌توانی cascade را در مقیاسِ بزرگ کنترل کنی و کدت را تودرتو و تمیز نگه‌داری. فصل بعد یک قدم بالاتر می‌رویم و مثلِ یک حرفه‌ای به کارت و دکمه نه به‌عنوان «چند قاعدهٔ CSS»، بلکه به‌عنوان \u003Cstrong>component\u003C\u002Fstrong> — یک تکهٔ مستقلِ قابل‌تکرار — فکر می‌کنیم؛ تکه‌ای که هرجای صفحه بگذاری‌اش، بی‌آنکه به همسایه‌اش وابسته باشد، درست کار کند.\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,71,74,77,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,226,227,228,231,234,237,240,243,246,249],{"free_preview":5,"order":12,"slug":69,"source":8,"term":12,"title_fa":70},"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":6,"slug":72,"source":8,"term":12,"title_fa":73},"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":16,"slug":75,"source":8,"term":12,"title_fa":76},"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":78,"slug":79,"source":8,"term":12,"title_fa":80},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":82,"slug":83,"source":8,"term":12,"title_fa":84},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":9,"slug":86,"source":8,"term":12,"title_fa":87},"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":89,"slug":90,"source":8,"term":12,"title_fa":91},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":93,"slug":94,"source":8,"term":12,"title_fa":95},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":97,"slug":98,"source":8,"term":12,"title_fa":99},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":101,"slug":102,"source":8,"term":12,"title_fa":103},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":12,"slug":105,"source":8,"term":6,"title_fa":106},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":6,"slug":108,"source":8,"term":6,"title_fa":109},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":16,"slug":111,"source":8,"term":6,"title_fa":112},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":78,"slug":114,"source":8,"term":6,"title_fa":115},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":82,"slug":117,"source":8,"term":6,"title_fa":118},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":9,"slug":120,"source":8,"term":6,"title_fa":121},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":89,"slug":123,"source":8,"term":6,"title_fa":124},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":93,"slug":126,"source":8,"term":6,"title_fa":127},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":97,"slug":129,"source":8,"term":6,"title_fa":130},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":101,"slug":132,"source":8,"term":6,"title_fa":133},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":135,"slug":136,"source":8,"term":6,"title_fa":137},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":12,"slug":139,"source":8,"term":16,"title_fa":140},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":6,"slug":142,"source":8,"term":16,"title_fa":143},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":16,"slug":145,"source":8,"term":16,"title_fa":146},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":78,"slug":148,"source":8,"term":16,"title_fa":149},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":82,"slug":151,"source":8,"term":16,"title_fa":152},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":9,"slug":154,"source":8,"term":16,"title_fa":155},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":89,"slug":157,"source":8,"term":16,"title_fa":158},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":93,"slug":160,"source":8,"term":16,"title_fa":161},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":97,"slug":163,"source":8,"term":16,"title_fa":164},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":101,"slug":166,"source":8,"term":16,"title_fa":167},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":135,"slug":169,"source":8,"term":16,"title_fa":170},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":12,"slug":172,"source":8,"term":78,"title_fa":173},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":6,"slug":175,"source":8,"term":78,"title_fa":176},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":16,"slug":178,"source":8,"term":78,"title_fa":179},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":78,"slug":181,"source":8,"term":78,"title_fa":182},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":82,"slug":184,"source":8,"term":78,"title_fa":185},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":9,"slug":187,"source":8,"term":78,"title_fa":188},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":89,"slug":190,"source":8,"term":78,"title_fa":191},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":93,"slug":193,"source":8,"term":78,"title_fa":194},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":12,"slug":196,"source":8,"term":82,"title_fa":197},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":6,"slug":199,"source":8,"term":82,"title_fa":200},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":16,"slug":202,"source":8,"term":82,"title_fa":203},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":78,"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":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":78,"slug":229,"source":8,"term":9,"title_fa":230},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"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","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105740]