لینک کوتاه مطلب : https://hsgar.com/?p=6491

به انتخاب یک نحو برای تودرتوی CSS کمک کنید

تودرتوی CSS یک ترکیب دستوری آسان است که به CSS اجازه می دهد تا در داخل یک مجموعه قوانین اضافه شود. اگر استفاده کرده اید SCSS، کمتر یا قلم، پس مطمئناً چند طعم از این را دیده اید:

.nesting {
color: hotpink;

> .is {
color: rebeccapurple;

> .awesome {
color: deeppink;
}
}
}

که پس از کامپایل شدن در CSS معمولی توسط پیش پردازنده، به CSS معمولی مانند این تبدیل می شود:

.nesting {
color: hotpink;
}

.nesting > .is {
color: rebeccapurple;
}

.nesting > .is > .awesome {
color: deeppink;
}

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

چند دلیل وجود دارد که محبوب‌ترین نحو تودرتو را نمی‌توان به‌صورت زیر استفاده کرد:

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

  2. تضادهای تجزیه پیش پردازنده
    روش تودرتو CSS نباید پیش پردازنده ها را خراب کند یا جریان های کاری تودرتوی توسعه دهنده موجود. این امر برای آن اکوسیستم ها و جوامع مخرب و بی اعتنا خواهد بود.

  3. در انتظار :is()
    تودرتو اولیه نیازی ندارد :is() اما تودرتو پیچیده تر این کار را می کند. دیدن مثال شماره 3 برای معرفی سبک به لیست های انتخابگر و تودرتو. تصور کنید که لیست انتخابگر در آن موارد به جای اینکه در ابتدا باشد در وسط یک انتخابگر قرار داشت :is() برای گروه بندی انتخابگرها در وسط انتخابگر دیگری لازم است.

مروری بر آنچه که ما مقایسه می کنیم

ما می‌خواهیم تودرتوی CSS را درست انجام دهیم، و با این روحیه، جامعه را نیز شامل می‌کنیم. بخش های زیر به توصیف سه نسخه احتمالی که در حال ارزیابی هستیم کمک می کند. سپس به چند نمونه از کاربردها برای مقایسه می پردازیم، و در پایان یک نظرسنجی ساده از شما می پرسد که به طور کلی کدام را ترجیح می دهید.

گزینه 1: @nest

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

گزینه 2: @nest محدود شده است

این یک جایگزین سختگیرانه تر است، در تلاش برای کاهش هزینه های ذکر شده از یادآوری دو روش تودرتو. این نحو محدود تنها اجازه می دهد تا تودرتو در زیر رخ دهد @nest، بنابراین هیچ الگوی راحتی وجود ندارد. از بین بردن ابهام در انتخاب، ایجاد یک راه آسان برای به خاطر سپردن برای لانه سازی، اما کوتاهی را فدای قرارداد می کند.

شایان ذکر است که کمتر محدود است @nest نحو (گزینه 1) می‌تواند از یک لنگر برای اجرای یک قانون استفاده در یک تیم استفاده کند، در صورتی که آنها با هم تصمیم بگیرند که ابهام یا کوتاهی را دوست ندارند. تغییر مشخصات ممکن است یک اقدام شدید باشد.

گزینه 3: براکت

به منظور جلوگیری از نحو دوگانه یا درهم ریختگی اضافی درگیر با @nest پیشنهادات، میریام سوزان و الیکا اعتماد یک را پیشنهاد کرد نحو جایگزین که در عوض به براکت های فرفری اضافی متکی است. این امر وضوح نحو را با تنها دو کاراکتر اضافی و بدون قوانین جدید در دستور ارائه می کند. همچنین اجازه می دهد تا قوانین تودرتو بر اساس نوع تودرتو مورد نیاز گروه بندی شوند، به عنوان راهی برای ساده سازی چندین انتخابگر تو در تو مشابه.

مثال 1 – تودرتو مستقیم

@لانه

.foo {
color: #111;

& .bar {
color: #eee;
}
}

@nest همیشه

.foo {
color: #111;

@nest & .bar {
color: #eee;
}
}

براکت ها

.foo {
color: #111;

{
& .bar {
color: #eee;
}
}
}

CSS معادل

.foo {
color: #111;
}

.foo .bar {
color: #eee;
}

مثال 2 – تودرتو مرکب

@لانه

.foo {
color: blue;

&.bar {
color: red;
}
}

@nest همیشه

.foo {
color: blue;

@nest &.bar {
color: red;
}
}

براکت ها

.foo {
color: blue;

{
&.bar {
color: red;
}
}
}

CSS معادل

.foo {
color: blue;
}

.foo.bar {
color: red;
}

مثال 3 – لیست های انتخابگر و تودرتو

@لانه

.foo, .bar {
color: blue;

& + .baz,
&.qux
{
color: red;
}
}

@nest همیشه

.foo, .bar {
color: blue;

@nest & + .baz,
&.qux
{
color: red;
}
}

براکت ها

.foo, .bar {
color: blue;

{
& + .baz,
&.qux
{
color: red;
}
}
}

CSS معادل

.foo, .bar {
color: blue;
}

:is(.foo, .bar) + .baz,
:is(.foo, .bar).qux
{
color: red;
}

مثال 4 – سطوح چندگانه

@لانه

figure {
margin: 0;

& > figcaption {
background: lightgray;

& > p {
font-size: .9rem;
}
}
}

@nest همیشه

figure {
margin: 0;

@nest & > figcaption {
background: lightgray;

@nest & > p {
font-size: .9rem;
}
}
}

براکت ها

figure {
margin: 0;

{
& > figcaption {
background: lightgray;

{
& > p {
font-size: .9rem;
}
}
}
}
}

CSS معادل

figure {
margin: 0;
}

figure > figcaption {
background: hsl(0 0% 0% / 50%);
}

figure > figcaption > p {
font-size: .9rem;
}

مثال 5 – لانه سازی والدین یا تغییر موضوع

@لانه

.foo {
color: red;

@nest .parent & {
color: blue;
}
}

@nest همیشه

.foo {
color: red;

@nest .parent & {
color: blue;
}
}

براکت ها

.foo {
color: red;

{
.parent & {
color: blue;
}
}
}

CSS معادل

.foo {
color: red;
}

.parent .foo {
color: blue;
}

مثال 6 – اختلاط لانه مستقیم و والد

@لانه

.foo {
color: blue;

@nest .bar & {
color: red;

&.baz {
color: green;
}
}
}

@nest همیشه

.foo {
color: blue;

@nest .bar & {
color: red;

@nest &.baz {
color: green;
}
}
}

براکت ها

.foo {
color: blue;

{
.bar & {
color: red;

{
&.baz {
color: green;
}
}
}
}
}

CSS معادل

.foo {
color: blue;
}

.bar .foo {
color: red;
}

.bar .foo.baz {
color: green;
}

@لانه

.foo {
display: grid;

@media (width => 30em) {
grid-auto-flow: column;
}
}

یا به صراحت / تمدید شده است

.foo {
display: grid;

@media (width => 30em) {
& {
grid-auto-flow: column;
}
}
}

@nest همیشه (همیشه صریح است)

.foo {
display: grid;

@media (width => 30em) {
@nest & {
grid-auto-flow: column;
}
}
}

براکت ها

.foo {
display: grid;

@media (width => 30em) {
grid-auto-flow: column;
}
}

یا به صراحت / تمدید شده است

.foo {
display: grid;

@media (width => 30em) {
& {
grid-auto-flow: column;
}
}
}

CSS معادل

.foo {
display: grid;
}

@media (width => 30em) {
.foo {
grid-auto-flow: column;
}
}

یک دستور ساده وجود دارد به نام تودرتوی ضمنی. مثال‌های بالا/نخستین در هر مثال، ویژگی تودرتوی ضمنی را نشان می‌دهند، جایی که محدوده قوانین سبک به محدوده انتخابگر ضمنی که درون آن قرار گرفته‌اند اعمال می‌شود. هنگامی که بیش از یک انتخابگر تودرتو نیاز به وجود داشته باشد، تودرتوی ضمنی نیاز به تنظیم دارد، در این مرحله شما باید به سبک آشیانه صریح تغییر دهید.

مثال 8 – گروه های تودرتو

@لانه

fieldset {
border-radius: 10px;

&:focus-within {
border-color: hotpink;
}

& > legend {
font-size: .9em;
}

& > div {
& + div {
margin-block-start: 2ch;
}

& > label {
line-height: 1.5;
}
}
}

@nest همیشه

fieldset {
border-radius: 10px;

@nest &:focus-within {
border-color: hotpink;
}

@nest & > legend {
font-size: .9em;
}

@nest & > div {
@nest & + div {
margin-block-start: 2ch;
}

@nest & > label {
line-height: 1.5;
}
}
}

براکت ها

fieldset {
border-radius: 10px;

{
&:focus-within {
border-color: hotpink;
}
}

> {
legend {
font-size: .9em;
}

div {{
+ div {
margin-block-start: 2ch;
}

> label {
line-height: 1.5;
}
}}
}
}

CSS معادل

fieldset {
border-radius: 10px;
}

fieldset:focus-within {
border-color: hotpink;
}

fieldset > legend {
font-size: .9em;
}

fieldset > div + div {
margin-block-start: 2ch;
}

fieldset > div > label {
line-height: 1.5;
}

مثال 9 – گروه تودرتو پیچیده “سینک آشپزخانه”

@لانه

dialog {
border: none;

&::backdrop {
backdrop-filter: blur(25px);
}

& > form {
display: grid;

& > :is(header, footer) {
align-items: flex-start;
}
}

@nest html:has(&[open]) {
overflow: hidden;
}
}

@nest همیشه

dialog {
border: none;

@nest &::backdrop {
backdrop-filter: blur(25px);
}

@nest & > form {
display: grid;

@nest & > :is(header, footer) {
align-items: flex-start;
}
}

@nest html:has(&[open]) {
overflow: hidden;
}
}

براکت ها

dialog {
border: none;

{
&::backdrop {
backdrop-filter: blur(25px);
}

& > form {
display: grid;

{
& > :is(header, footer) {
align-items: flex-start;
}
}
}
}

{
html:has(&[open]) {
overflow: hidden;
}
}
}

CSS معادل

dialog {
border: none;
}

dialog::backdrop {
backdrop-filter: blur(25px);
}

dialog > form {
display: grid;
}

dialog > form > :is(header, footer) {
align-items: flex-start;
}

html:has(dialog[open]) {
overflow: hidden;
}

زمان رای دادن

امیدواریم که شما احساس کنید که این یک مقایسه منصفانه و یک نمونه بشقاب از گزینه های نحوی بود که ما در حال ارزیابی هستیم. لطفاً آنها را به دقت بررسی کنید و در زیر به ما بگویید که کدام را ترجیح می دهید. ما از شما سپاسگزاریم که به ما کمک می‌کنید تودرتوی CSS را به نحوی که همه آن را بشناسیم و دوست داشته باشیم، پیش ببریم!

در نظرسنجی شرکت کنید



لینک منبع

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.