چرا یک کاما ساده ساده برنامه نویسی را ساده می کند
CSS، یا Cascading Style Sheets، روش پذیرفته شده صنعت طراحی وب برای افزودن سبک های بصری به یک سایت می باشد. با CSS، می توانید طرح صفحه، رنگ، تایپوگرافی ، تصویر پس زمینه و خیلی بیشتر را کنترل کنید. اساسا، اگر این سبک بصری است، پس CSS راهی برای آوردن این سبک ها به وب سایت شما است.
همانطور که سبک های CSS را به یک سند اضافه می کنید، ممکن است متوجه شوید که سند شروع به گرفتن دیگر و طولانی تر می کند. حتی یک سایت کوچک با تعداد انگشت شماری از صفحات می تواند یک فایل CSS قابل توجهی داشته باشد و یک سایت بسیار بزرگ با تعداد زیادی صفحات از محتوای منحصر به فرد می تواند فایل های CSS بسیار بزرگ داشته باشد. این توسط سایت های پاسخگو است که تعداد زیادی از پرس و جو رسانه ای که در ورق های سبک موجود است را تغییر می دهند تا تغییرات ظاهر تصاویر و صفحات را برای صفحه های مختلف ایجاد کند.
بله، فایل های CSS می توانند طول بکشد. این مسئله مهم نیست که به عملکرد سایت و سرعت دانلود می رسد، زیرا حتی یک فایل CSS طولانی نیز بسیار کوچک است (از آنجا که واقعا یک سند متنی است). با این حال، هر چند کوچک به سرعت صفحه می آید، بنابراین اگر می توانید ورق سبک خود را سبک تر کنید، این ایده خوبی است. این جایی است که کاما میتواند در صفحه سبک شما مفید باشد
Commas و CSS
شما ممکن است تعجب کنید که نقش کاما چگونه در نحو انتخابگر CSS نمایش داده می شود . همانطور که در جملات، کاما، به وضوح - بدون کد - به جدایی دهنده ها می دهد. کاما در انتخاب CSS انتخابگرهای چندگانه را در قالب یکسان جدا می کند.
به عنوان مثال، اجازه دهید به برخی CSS زیر نگاه کنیم.
th {رنگ: قرمز؛ }
td {رنگ: قرمز؛ }
p.red {color: red؛ }
div # firstred {color: red؛ }
با استفاده از این نحو، شما می گویید که می خواهید برچسب های th ، برچسب های td ، تگ های پاراگراف را با کلاس قرمز و برچسب div با شناسه اول برای رنگ سبز قرمز داشته باشید.
این کاملا CSS قابل قبول است، اما دو روش مهم برای نوشتن آن به این شکل وجود دارد:
- در آینده، اگر شما تصمیم به تغییر فونت رنگ این خواص به آبی، شما باید آن را تغییر چهار بار در سبک خود را.
- این کار باعث می شود تا بسیاری از کاراکترهای اضافی به سبک خود اضافه کنید که نیازی به آن ندارید. این 4 سبک ممکن است به نظر نمیرسد، اما اگر این کار را در کل صفحه سبک خود ادامه دهید، خطوط افزوده میشوند و این ورق بسیار بزرگتر از آن است که باید باشد.
برای جلوگیری از این مشکلات، و برای ساده سازی فایل CSS، ما با استفاده از کاما سعی خواهیم کرد.
با استفاده از Commas به Selector های جداگانه
به جای نوشتن 4 انتخابگر CSS جداگانه و 4 قاعده، می توانید تمام این سبک ها را با استفاده از کاما از هم جدا کنید. در اینجا این است که چگونه این کار انجام می شود:
th، td، p.red، div # firstred {color: red؛ }
شخصیت کاما اساسا به عنوان کلمه "و" در داخل انتخابگر عمل می کند. بنابراین این برای تگ های t h و برچسب td و برچسب های پاراگراف با کلاس red و برچسب div با ID firstred به کار می رود. این دقیقا همان چیزی است که ما پیش از این داشتهایم، اما به جای نیاز به 4 قانون CSS، ما یک قانون واحد با انتخاب چندگانه داریم. این چیزی است که کاما در انتخابگر انجام می دهد، به ما اجازه می دهد تا در یک قاعده انتخاب چندگانه داشته باشیم.
این رویکرد نه تنها باعث می شود فایل های CSS نازک تر و تمیزتر، بلکه به روز رسانی های آینده نیز بسیار ساده تر می شود. حالا اگر میخواهید رنگ را از رنگ قرمز به رنگ آبی تغییر دهید، فقط باید تغییر در یک مکان به جای آن از قوانین 4 اصل اصلی ما داشته باشید! در مورد این صرفه جویی در زمان در کل فایل CSS فکر کنید و می توانید ببینید که چگونه این زمان و مکان را در طول عمق صرفه جویی می کند!
تغییرات نحو
بعضی از مردم می خواهند CSS را با جدا کردن هر selector در خط خود به راحتی قابل خواندن انجام دهند، به جای آن که تمام آن را در یک خط همانطور که در بالا ذکر شد، انجام دهید. این چگونگی انجام این کار است:
th
TD
p.red
div # firstred
{
رنگ: قرمز؛
}
توجه داشته باشید که پس از هر انتخابگر یک کاما قرار می دهید و سپس برای وارد شدن به گزینه ی بعدی، بر روی خط خاص خود بکشید. شما بعد از انتخاب نهایی کاما اضافه نمی کنید.
با استفاده از کاما بین selector ها، شما یک صفحه سبک تر جمع و جور را ایجاد می کنید که ساده تر شدن در آینده است و امروزه آسان تر است!
مقاله اصلی جنیفر کریینین. ویرایش شده توسط Jeremy Girard در تاریخ 5/8/17