لایه ها در CSS: راهنمای کامل برای تسلط بر قانون Layer و کنترل ویژگی

مقدمه: لایه های آبشار در CSS چیست؟

لایه های آبشار (آبشار لایه ها) در CSS برای حل یکی از پیچیده ترین و مداوم ترین مشکلات در نوشتن سبک ها معرفی شده است: درگیری های خاص. در این مقاله بررسی خواهیم کرد که دقیقاً آن مشکل و چگونه قانون @layer این یک راه حل مؤثر و مدرن را به ما ارائه می دهد.

قاعده @layer این اجازه می دهد تا این لایه های آبشار را که به طور مشابه با لایه های ویرایشگرهای گرافیکی مانند Photoshop یا GIMP کار می کنند ، اعلام کنید: هر لایه یک گروه مستقل است ، اما به جای تصاویر ، ما قوانین CSS را مدیریت می کنیم.

هدف اصلی واضح است:

• کد را بهتر سازماندهی کنید.

• از مشکلات ویژگی کلاسیک خودداری کنید.

• نیاز به استفاده را کاهش دهید! انتخاب کننده های پیچیده مهم یا رونویسی.

مشکل: ویژگی غیرقابل کنترل می شود

هر توسعه دهنده ای که با CSS کار کرده است ، با ناامیدی از تمایل به بازنویسی سبک ها از سایر بخش های کد ، کتابفروشی های خارجی یا چارچوب ها روبرو شده است ، فقط در یک نبرد خاص. به طور سنتی ، برای برطرف کردن این درگیری ها ، “روش شناسی” و “شیوه های خوب” ایجاد شده است که در اصل سعی می کند به جای استفاده از آن ، از فعالیت های آبشار جلوگیری کند. نمونه هایی از این شیوه ها فقط برای استفاده از کلاسهای ساده یا جلوگیری از انتخاب کنندگان تو در تو محدود شده اند.

مدیریت و ویژگی آبشار سالها یکی از گیج کننده ترین قسمت های CSS بوده است. این تا حدودی به این دلیل است که تعداد کمی از زبانها رفتار خود را بر روی یک آبشار پایه گذاری می کنند ، اما همچنین این که شکل سنتی وضوح سبک در CSS بستگی به اکتشافی دارد ، نه به کنترل صریح نویسنده.

به عنوان مثال ، ویژگی مبتنی بر این فرض است که یک انتخاب کننده دقیق تر (مانند یک شناسه منحصر به فرد) باید اولویت بیشتری نسبت به یک انتخاب کننده عمومی (مانند کلاس) داشته باشد. با این حال ، این همیشه منعکس کننده اهداف واقعی نویسنده نیست ، و راه حل های مشترک معمولاً مشکل را تشدید می کند: انتخاب کننده های غیر ضروری را اضافه کنید یا به مخوف متوسل شوید !importantبشر

/* Especificidad forzada y confusa */
.overly#powerful .framework.widget {
  color: maroon;
}

.my-single_class { /* ¿Agregar IDs? */
  color: rebeccapurple; /* ¿O usar !important? */
}

راه حل: لایه های آبشار برای کنترل واقعی

لایه های آبشار به نویسندگان CSS اجازه می دهد تا به جای اینکه به قوانین و فرضیات ضمنی تکیه کنند ، کنترل کامل آبشار ، ایجاد سیستم و سیستم های سفارش داده شده را به دست بگیرند.

از طریق قانون @layer و با کیپ از طریق وارد می شود @import، ما می توانیم لایه های سلسله مراتبی خود را ایجاد کنیم: از سبک های سطح پایین مانند بازنشانی و مضامین پایه ، به لایه های فوقانی به عنوان مؤلفه ها ، سود و قریب به اتفاق.

در هر لایه ، ویژگی به طور معمول همچنان به عملکرد خود ادامه می دهد. اما بین لایه ها ، درگیری ها همیشه به نفع لایه با بالاترین اولویت حل می شوند ، بدون نیاز به صعود از ویژگی یا استفاده !importantبشر

@layer framework {
  .overly#powerful .framework.widget {
    color: maroon;
  }
}

@layer site {
  .my-single_class {
    color: rebeccapurple;
  }
}

لایه ها سفارش داده می شوند و به عنوان ویژگی انتخاب کنندگان جمع نمی شوند. اضافه کردن لایه های بیشتر باعث افزایش قدرت شما نمی شود. و همچنین مطلق نیستند !important، و نه خودسرانه به عنوان z-index باد در حقیقت ، به طور پیش فرض ، سبک های درون یک لایه از اولویت های کمتری نسبت به سبک هایی که در لایه ها قرار نمی گیرند ، کمتر است.

@layer defaults {
  a:any-link { color: maroon; }
}

/* Estilos no encapsulados en capas siempre tienen la máxima prioridad */
a {
  color: mediumvioletred;
}

نحو و اعلام لایه ها

CSS چندین روش برای اعلام لایه ها با استفاده از ما ارائه می دهد @layer o متفاوت است @import:

ترتیب تعریف لایه ها ، اولویت آنها در آبشار را تعیین می کند ، چیزی که برای جلوگیری از درگیری های خاصیت اساسی است. با این حال ، همانطور که بعداً در این راهنما خواهیم دید ، می توان آن را نیز برای تنظیم آن با نیازهای ما دستکاری کرد.

در مرحله بعد ، ما هر یک از این نحو ها را با جزئیات بررسی خواهیم کرد و یاد می گیریم که از آنها برای ساخت سیستم های CSS قوی تر ، قابل پیش بینی و پایدار استفاده کنیم.

نحوه ایجاد و سفارش لایه ها در CSS

اکنون که می فهمیم لایه های آبشار چیست و چرا مشکلات ویژگی را حل می کنند ، وقت آن است که یاد بگیریم از آنها به روش عملی در سبک های CSS خود استفاده کنیم. قاعده @layer در نحو آن ساده است ، اما در کاربردهای آن قدرتمند است.

اعلام یک لایه ساده

اساسی ترین راه اعلام یک لایه با نام منحصر به فرد و گروه بندی قوانین CSS ما در درون آن است:

@layer base {
  body {
    font-family: system-ui, sans-serif;
    color: #333;
  }
}

این لایه نامیده می شود base مانند یک گروه رفتار می کند. سبک های موجود در آن با استفاده از ویژگی های سنتی با یکدیگر رقابت می کنند ، اما به عنوان یک بلوک کامل ، base این اولویت را با موقعیت خود در برابر سایر لایه ها تعیین می کند.

اعلام لایه های ناشناس

اگر به نام خاصی احتیاج ندارید ، می توانید یک لایه ناشناس ایجاد کنید:

@layer {
  h1 {
    font-size: 2rem;
  }
}

لایه های ناشناس برای گروه بندی سبک های بدون نگرانی در مورد شناسایی آنها مفید هستند ، اما استفاده از آنها در پروژه های بزرگ که کنترل سفارش ضروری است ، کمتر متداول است.

ایجاد زیر مجموعه های تو در تو

CSS با ایجاد سلسله مراتب داخلی توسط زیر مجموعه ها ، لایه های لانه سازی را اجازه می دهد:

@layer components.buttons {
  .btn {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
  }
}

در این حالت ، دکمه ها یک خرده خرده در قطعات است. سلسله مراتب کنترل بیشتری را برای تعدیل CSS و اولویت های سفارش در سیستم های بزرگ به شما می دهد.

اعلام و سفارش چندین لایه

یکی از مزایای بزرگ آبشار Layers این است که می توانید همزمان چندین لایه را اعلام کنید و ترتیب آن را تعیین کنید:

@layer reset, base, components, utilities;

ترتیب در این جمله بسیار مهم است:

قوانین خارج از هر لایه هنوز هم بر عهده اولویت های اصلی است (مگر اینکه از آن استفاده کنید! مهم).

مثال پاک: کنترل سفارش با Layer

به مثال زیر نگاه کنید. در اینجا ما یک دستور خاص را اعلام می کنیم: ابتدا لایه reset، پس texts، و در پایان themeبشر

 class="primary">Primer botón
 class="primary">Segundo botón


  /* Declaramos el orden de las capas */
  @layer reset, texts, theme;

  @layer reset {
    button {
      padding: 30px;
    }
  }

  @layer theme {
    .primary {
      background: #3454d1;
      border: 2px outset #6381db;
      color: white; /* Color de texto en theme */
      font-size: 1rem;
      padding: 5px 10px;
      border-radius: 6px;
    }
  }

  @layer texts {
    .primary {
      color: red; /* Color de texto en texts */
    }
  }

چه رنگی اعمال می شود؟

اگرچه در جریان طبیعی CSS رنگ قرمز رنگ است (texts) بعداً می آید و باید پیروز شود ، لایه برنده می شود theme، زیرا ما در خط اول تعریف کرده ایم که theme این کیپ با بالاترین اولویت بین این سه است. بنابراین ، متن خالی به نظر می رسد ، همانطور که توسط لایه تعریف شده است themeبشر

ادغام قوانین همان لایه

یکی دیگر از ویژگی های مهم این است که ، اگر بعداً لایه ای را با همین نام اعلام کنید ، مرورگر هر دو تعریف را در یک لایه یکسان می کند ، بدون اینکه موقعیت آن را در اولویت عمومی تغییر دهد.

@layer theme {
  .primary {
    color: gold; /* Nueva regla dentro de theme */
  }
}

اکنون ، مانند هر دو قانون (color: white y color: gold) آنها در یک لایه هستند theme، آخرین موردی که در داخل آن لایه ظاهر می شود اعمال می شود ، یعنی رنگ طلایی.

قانون طلا: سبک های خارج از لایه همیشه برنده می شوند

هر سبک اعلام شده در خارج از هر @layer (یعنی بدون تعلق به هر لایه) به طور خودکار در لایه ناشناس گروه بندی می شود. این لایه همیشه بیشترین اولویت را نسبت به هر لایه ای که با آن تعریف می کنید دارد @layerبشر

/* Esta regla gana siempre sobre cualquier capa */
.primary {
  color: black;
}

بنابراین ، اگر نیاز به مجبور کردن سبک ها در خارج از سیستم لایه خود دارید ، به سادگی آنها را از هر Layer بنویسید.

وارد کردن CSS در یک لایه

همچنین می توانید پرونده های CSS را مستقیماً درون یک لایه وارد کنید ، ایده آل برای سازماندهی پروژه خود به صورت مدولار:

@import url("reset.css") layer(reset);
@import url("framework.css") layer(components);

این تضمین می کند که تمام محتوای آن reset.css در کیپ محصور خواهد شد resetاز جلوگیری از این برخورد با سایر قسمتهای کد خود جلوگیری کنید.

قانون اساسی: سفارش اولویت را تعریف می کند

لایه ها به ترتیب اعلام شده اعمال می شوند ، نه به ترتیب که CSS در درون آنها نوشته شده است. یعنی اگر اول تعریف کنید @layer base و بعد @layer components، لایه components این اولویت خواهد بود ، حتی اگر انتخاب کنندگان آن ویژگی کمتری داشته باشند.

مثال:

@layer base {
  h1 {
    color: black;
  }
}

@layer components {
  h1 {
    color: crimson;
  }
}

در این حالت ، h1 خواهد بود crimson چرا components این یک لایه اعلام شده پس از پایه است.

مزایای روشن لایه ها در CSS

• از صعود از ویژگی خودداری کنید.
• استفاده غیر ضروری را کاهش دهید !importantبشر
• آنها اجازه می دهند بدون از دست دادن کنترل سبک های شخصی شما ، کتابخانه ها را وارد کنند.

آنها یک کد CSS مدولار ، قابل پیش بینی و قابل نگهداری را ترویج می کنند.

لایه های CSS برای چیست؟

لایه ها (@layer) در CSS آنها به ما این امکان را می دهند که اولویت سبک های خود را بسیار انعطاف پذیر تر از ویژگی های سنتی سازماندهی و کنترل کنیم.

هنگامی که پروژه شما رشد می کند یا شامل کتابفروشی های خارجی می شود ، ویژگی به عوامل دشوار برای رسیدگی بستگی دارد. با @layer، شما می توانید به صراحت تعریف کنید که کدام گروه سبک اولویت دیگری را دارد ، بدون اینکه به انتخاب کنندگان طولانی تر متوسل شوید !importantبشر

ویژگی: مشکلی که Layer را حل می کند

به این مثال اساسی نگاه کنید. در اینجا ما از همان انتخاب کننده استفاده می کنیم .primary چندین بار CSS به سادگی خاصیت آخرین بلوک را که همزمان است ، اعمال می کند:

.primary {
  color: red;
}

.primary {
  background: #34a;
  border: 2px outset #6381db;
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
}

.primary {
  margin: 20px;
  color: green;
}

در این حالت ، رنگ متن سبز خواهد بود (رنگ: سبز) ، زیرا آخرین رنگ برای رنگ است.

ویژگی: انتخاب کنندگان چگونه تأثیر می گذارند

حال ، بیایید انتخاب کنندگان را کمی خاص تر کنیم:

/* Especificidad: 0,2,1 */
button[class].primary {
  color: red;
}

/* Especificidad: 0,1,1 */
button.primary {
  background: #34a;
  border: 2px outset #6381db;
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
}

/* Especificidad: 0,1,0 */
.primary {
  margin: 20px;
  color: green;
}

در اینجا سفارش چندان مهم نیست. مرورگر خواص را به دنبال ویژگی اعمال می کند:

ابتدا سبک ها با ویژگی کمتری اعمال می شوند (.primary con 0,1,0)بشر

سپس از ویژگی های متوسط (button.primary con 0,1,1)بشر

سرانجام ، خاص ترین (button[class].primary con 0,2,1)بشر

🔎 نتیجه:

رنگ قرمز غالب خواهد شد ، زیرا انتخاب کننده button[class].primary این خاص ترین است.

چگونه Layer قوانین بازی را تغییر می دهد

اکنون ما قصد داریم خاص ترین انتخاب کننده را در یک لایه نامگذاری شده گروه بندی کنیم texts:

@layer texts {
  button[class].primary {
    color: red;
  }
}

button.primary {
  background: #34a;
  border: 2px outset #6381db;
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
}

.primary {
  margin: 20px;
  color: green;
}

حالا چه اتفاقی می افتد؟

• ابتدا مرورگر کیپ را پردازش می کند textsبشر

• سپس ، گروه ها را در خارج از کیپ در آنچه که به عنوان لایه ناشناس نامیده می شود ، استفاده کرده و از آن استفاده کنید.

• و به عنوان یک قاعده ، این لایه ناشناس همیشه از هر لایه ای که با آن اعلام شده است ، اولویت بالاتری دارد @layerبشر

بنابراین ، رنگ سبز (color: green) دوباره برنده خواهد شد ، حتی اگر انتخاب کننده لایه باشد texts ویژگی بیشتری دارند این نشان می دهد که چگونه @layer این امکان را به توسعه دهندگان می دهد تا اولویت سبک ها را با قدرت بیشتری سازماندهی کنند تا اینکه به سادگی افزایش ویژگی.

uso delayer con css لانه سازی

با تشکر CSS Nativo را لانه می کند، همچنین می توانیم لایه ها را در داخل یک انتخاب اعلام کنیم. این امکان ساختار کد حتی منظم تر و مدولار را فراهم می کند.

 class="primary">Hello, John Serrano!


  @layer base, theme;

  .primary {
    @layer theme {
      background: indigo;
      color: white;
    }
    @layer base {
      background: grey;
      width: 250px;
      height: 200px;
      padding: 1rem;
    }
  }

چگونه اینجا کار می کند؟

• در خط @layer base, theme; ما اعلام می کنیم که لایه پایه قبل از لایه اعمال می شود themeبشر

• بنابراین ، اگرچه theme قبل از کد بیایید ، سبک های آنها برنده می شود زیرا با اولویت بیشتر اعلام می شود.

اگر آن خط اول را توسط:

@layer theme, base;

حالا ، لایه base این اولویت خواهد داشت و پس زمینه خاکستری در پس زمینه نیلی رونویسی می شود.

نتیجه گیری

لایه های CSS (@layer) آنها به ما این امکان را می دهند که بدون توجه به ویژگی ، نظم و اولویت سبک ها را با وضوح تر و سازمان یافته کنترل کنیم. آنها ابزاری قدرتمند برای تمیز و قابل پیش بینی کد هستند ، به خصوص در پروژه های بزرگ یا سبک های خارجی.

من از شما دعوت می کنم به وبلاگ من مراجعه کنید ، جایی که در مورد JavaScript ، React ، CSS ، AI ، شیوه های خوب و موارد دیگر محتوای بیشتری پیدا خواهید کرد. 👉 Johnserrano.co/blog آن را از دست ندهید!

با تشکر از خواندن ❤