گروه بندی انتخابگرهای چندگانه CSS

گروه چندگانه CSS انتخاب برای بهبود سرعت بار

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

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

انتخاب گروه بندی

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

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

به طور کلی، سرعت بار بالای بالاتر از میانگین برای سایت ها کمتر از 3 ثانیه است. 3 تا 7 ثانیه در حدود متوسط ​​است و بیش از 7 ثانیه فقط خیلی کند است. این تعداد کم است که برای رسیدن به آنها با سایت شما باید همه چیز را که می توانید انجام دهید! به همین دلیل است که می توانید سایت خود را با استفاده از selectors CSS گروه بندی کنید.

نحوه انتخاب گروه CSS

برای دسته بندی انتخابگرهای CSS با هم در صفحه سبک خود، از دسته کاما برای جدا کردن چند متغیر گروهبندی در سبک استفاده می کنید. در مثال زیر، سبک بر عناصر p و div تاثیر می گذارد:

div، p {color: # f00؛ }

کاما اساسا به معنای "و" است. بنابراین این انتخابگر به تمام عناصر پاراگراف و تمام عناصر تقسیم می شود. اگر کاما از دست رفته بود، به جای آن تمام عناصر پاراگراف است که یک فرزند یک بخش هستند. این یک نوع بسیار متفاوت از انتخاب است، بنابراین این کاما واقعا معنای انتخاب را تغییر می دهد!

هر گونه انتخاب کننده را می توان با هر انتخابگر دیگر گروه بندی کرد. در این مثال، انتخابگر کلاس با انتخاب شناسه گروه بندی می شود:

p.red، #sub {color: # f00؛ }

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

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

p، .red، #sub، div a: link {color: # f00؛ }

بنابراین این قانون CSS به موارد زیر اعمال می شود:

• هر عنصر پاراگراف
• هر عنصری با کلاس "قرمز"
• هر عنصر با شناسه "زیر"
• "پیوند" کلاس شبه عناصر لنگر که decendents یک تقسیم است.

این انتخاب آخرین انتخاب ترکیبی است. شما می توانید ببینید که آن را به راحتی با انتخابگرهای دیگر در این قانون CSS ترکیب می کند. با این قاعده، ما در حال تنظیم رنگ # f00 (که قرمز است) بر روی این 4 انتخابگر است که برای نوشتن 4 انتخابگر جداگانه برای رسیدن به همان نتیجه ترجیح داده می شود.

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

هر انتخاب کننده می تواند گروه بندی شود

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

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

th، td، p.red، div # firstred {color: red؛ }

یا شما می توانید سبک ها را در خطوط فردی برای وضوح لیست کنید:

th
TD
p.red
div # firstred
{
رنگ: قرمز؛
}

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

مقاله اصلی جنیفر کریینین. ویرایش شده توسط Jeremy Girard در تاریخ 5/8/17.