آموزش کامل CSS Layers (@layer) | مدیریت اولویت‌ها در پروژه‌های بزرگ + ۱۵ مثال

/* تعریف لایه‌ها به ترتیب اولویت (از کم به زیاد) */  @layer reset, theme, components;     @layer reset {    button {      border: none;      background: transparent;      font-size: 16px;    }  }     @layer theme {    button {      background: #3498db;      color: white;      padding: 10px 20px;    }  }     @layer components {    button {      border-radius: 8px;      cursor: pointer;    }  }     /* نتیجه نهایی: تمام ویژگی‌ها ترکیب می‌شوند اما لایه components اولویت دارد */

@layer base {    /* خیلی خاص است (اولویت بالا در حالت عادی) */    div#main .container .btn-special {      background: red;      color: white;    }  }     @layer override {    /* ساده است (اولویت پایین در حالت عادی) */    .btn {      background: blue;      color: yellow;    }  }     /* نتیجه: استایل override اعمال می‌شود چون لایه override بعد از base تعریف شده */

/* اعلام ترتیب لایه‌ها – بهترین روش */  @layer reset, framework, components, utilities;     /* حالا هر جا که این لایه‌ها را تعریف کنید، همین ترتیب رعایت می‌شود */     @layer reset {    * { margin: 0; padding: 0; box-sizing: border-box; }  }     @layer framework {    .btn { padding: 12px 24px; background: gray; }  }     @layer components {    .btn-primary { background: #3498db; }  }     @layer utilities {    .p-4 { padding: 16px; }  }

/* مرحله 1: تعریف ترتیب لایه‌ها */  @layer reset, bootstrap, custom, utilities;     /* مرحله 2: ریست استایل‌ها */  @layer reset {    * {      margin: 0;      padding: 0;      box-sizing: border-box;    }    body {      line-height: 1.5;    }    img {      max-width: 100%;      display: block;    }  }     /* مرحله 3: استایل‌های فریمورک (مثل Bootstrap) */  @layer bootstrap {    /* اینجا معمولاً فایل فریمورک ایمپورت می‌شود */    .btn {      padding: 8px 16px;      border-radius: 4px;      background: #6c757d;    }    .btn-primary {      background: #0d6efd;    }  }     /* مرحله 4: استایل‌های سفارشی پروژه */  @layer custom {    .btn-primary {      background: #e74c3c; /* این بر استایل bootstrap غلبه می‌کند */      border-radius: 50px;    }    .header {      background: #2c3e50;    }  }     /* مرحله 5: کلاس‌های کمکی (بالاترین اولویت) */  @layer utilities {    .text-center { text-align: center; }    .mt-4 { margin-top: 16px; }  }

/* اعلام اولیه لایه‌ها */  @layer components;     /* بعداً در فایل */  @layer components {    .card {      padding: 20px;      border: 1px solid #ddd;    }  }     /* حتی بعدتر */  @layer components {    .card-header {      font-weight: bold;      margin-bottom: 10px;    }    .card:hover {      box-shadow: 0 5px 15px rgba(0,0,0,0.1);    }  }

@layer framework {    @layer base {      body { font-family: sans-serif; }    }    @layer theme {      .dark { background: black; }    }  }     /* دسترسی به لایه‌های تو در تو */  @layer framework.theme {    .dark { color: white; }  }

/* لایه ناشناس – اولویت پایین */  @layer {    p {      color: gray;    }  }     /* لایه نام‌دار – اولویت بالاتر */  @layer content {    p {      color: black;    }  }

@layer base {    .btn { background: blue; }  }     @layer components {    .btn { background: green; }  }     /* بدون لایه – بر همه چیز غلبه می‌کند */  .btn {    background: red !important; /* حتی بدون !important هم اولویت دارد */  }

/* ========================================     پروژه فروشگاه آنلاین با CSS Layers     ======================================== */     /* 1. تعریف ترتیب لایه‌ها */  @layer reset, fonts, variables, base, components, pages, utilities, overrides;     /* 2. لایه reset – ریست استایل‌ها */  @layer reset {    * {      margin: 0;      padding: 0;      box-sizing: border-box;    }    button, input, select {      font: inherit;    }  }     /* 3. لایه fonts – تعریف فونت‌ها */  @layer fonts {    @import url('https://fonts.googleapis.com/css2?family=Vazir&display=swap');    body {      font-family: 'Vazir', system-ui, sans-serif;    }  }     /* 4. لایه variables – متغیرهای CSS */  @layer variables {    :root {      --primary: #e94560;      --secondary: #533483;      --dark: #0f3460;      --light: #f5f5f5;      --spacing: 1rem;    }  }     /* 5. لایه base – استایل‌های پایه */  @layer base {    body {      background: var(--light);      color: #333;    }    a {      text-decoration: none;      color: var(--primary);    }    button {      cursor: pointer;      border: none;      background: var(--primary);      color: white;      padding: 10px 20px;      border-radius: 8px;    }  }     /* 6. لایه components – کامپوننت‌های قابل استفاده مجدد */  @layer components {    .card {      background: white;      border-radius: 12px;      padding: 20px;      box-shadow: 0 2px 10px rgba(0,0,0,0.1);    }    .product-card {      transition: transform 0.3s;    }    .product-card:hover {      transform: translateY(-5px);    }    .btn-primary {      background: var(--primary);    }    .btn-secondary {      background: var(--secondary);    }    .navbar {      display: flex;      justify-content: space-between;      padding: var(--spacing);      background: var(--dark);      color: white;    }  }     /* 7. لایه pages – استایل‌های خاص هر صفحه */  @layer pages {    .homepage .hero {      background: linear-gradient(135deg, var(--primary), var(--secondary));      padding: 80px 20px;      text-align: center;      color: white;    }    .product-page .gallery {      display: grid;      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));      gap: 20px;    }  }     /* 8. لایه utilities – کلاس‌های کمکی */  @layer utilities {    .text-center { text-align: center; }    .mt-2 { margin-top: 8px; }    .mt-4 { margin-top: 16px; }    .mb-4 { margin-bottom: 16px; }    .p-4 { padding: 16px; }    .d-flex { display: flex; }    .gap-2 { gap: 8px; }  }     /* 9. لایه overrides – برای اووررایدهای خاص (مثل هک‌های موقتی) */  @layer overrides {    /* فقط برای یک صفحه خاص */    .homepage .hero h1 {      font-size: 48px;    }  }

/* وارد کردن فایل ریست در لایه reset */  @import url('reset.css') layer(reset);     /* وارد کردن بوت‌استرپ در لایه framework */  @import url('bootstrap.min.css') layer(framework);     /* وارد کردن فونت در لایه fonts */  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap') layer(fonts);     /* استایل‌های سفارشی بدون لایه – بالاترین اولویت */  @import url('custom.css');     /* تعریف لایه‌ها بعد از import */  @layer reset, framework, fonts;

/* مرورگرهای مدرن – از لایه استفاده می‌کنند */  @supports (container-type: inline-size) {    @layer components {      .card {        display: flex;      }    }  }     /* مرورگرهای قدیمی – fallback ساده */  @supports not (container-type: inline-size) {    .card {      display: block;    }  }

@layer theme-light, theme-dark, components;     @layer theme-light {    :root {      --bg: white;      --text: black;    }  }     @layer theme-dark {    @media (prefers-color-scheme: dark) {      :root {        --bg: black;        --text: white;      }    }    /* یا با کلاس دستی */    [data-theme="dark"] {      --bg: black;      --text: white;    }  }     @layer components {    body {      background: var(--bg);      color: var(--text);    }  }

/* تعریف لایه‌ها – bootstrap اولویت پایین‌تر دارد */  @layer bootstrap, tailwind, custom;     /* وارد کردن Bootstrap */  @import url('bootstrap.css') layer(bootstrap);     /* وارد کردن Tailwind (اولویت بالاتر) */  @import url('tailwind.css') layer(tailwind);     /* استایل‌های سفارشی (اولویت بالاترین) */  @layer custom {    .btn {      border-radius: 50px; /* این بر هر دو فریمورک غلبه می‌کند */    }  }

@layer base {    .debug-example { color: red; }  }  @layer override {    .debug-example { color: blue; }  }  /* در DevTools می‌توانید ببینید کدام لایه برنده شده است */

@layer screen, print;     @layer screen {    @media (max-width: 768px) {      .sidebar { display: none; }    }  }     @layer print {    @media print {      .sidebar, .header, .footer {        display: none;      }      body {        font-size: 12pt;      }    }  }

@layer variables, base, components;     @layer variables {    :root {      --primary: #3498db;      --secondary: #2ecc71;    }  }     @layer base {    body {      font-family: system-ui;      color: var(--primary);    }  }     @layer components {    .btn {      background: var(--primary);      color: white;    }    .btn-secondary {      background: var(--secondary);    }  }