بهبود خوانایی کد در CSS با استفاده از بک‌اسلش (\)

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

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

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

نمونه زیر یک تکه کد خوانا در سی اس اس را نمایش میدهد:


.error-text {
  color: red;
  font-weight: bold;
}

.error-box {
  padding: 10px;
  border: 1px solid green;
}

برای بررسی بیشتر مواردی از این قبیل به CSS Guidelines مراجعه کنید.

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

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


background: #eee url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25"> <rect x="50" width="50" height="50" /> <rect y="50" width="50" height="50" /> </svg>');
background-size: 30px 30px;

خوشبختانه در سی اس اس این امکان وجود دارد و کافی است از کاراکتر بک‌اسلش (\) برای این کار استفاده کنیم.


background: #bbb url('data:image/svg+xml,\
 <svg xmlns="http://www.w3.org/2000/svg" \
 width="100" height="100"
 fill-opacity=".25">\
 <rect x="50" width="50" height="50" /> \
 <rect y="50" width="50" height="50" /> \
 </svg>');
background-size: 30px 30px;

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

نکته دیگر اینکه فرض کنید می خواهیم درون محتوای یک after یا before کاراکتر بک‌اسلش را نمایش دهیم، خواهیم داشت:


div::after {
  content: 'You \ I'; /* You I */
}

خروجی همانطور که در قسمت کامنت آمده است خواهد بود و مرورگر این کاراکتر را نادیده می گیرد.

برای نمایش این کاراکتر کافی است از مفسر بخواهیم تا بک‌اسلش را نادیده بگیرد که کافی است بصورت زیر عمل کنیم:


div::after {
  content: 'You \\ I'; /* You \ I */
}

بیشتر بخوانید

6 دیدگاه برای “بهبود خوانایی کد در CSS با استفاده از بک‌اسلش (\)

  1. اقا من چیکار کنم مثل کدهایی که شما تو سایتت گذاشتی خیلی واضح و زیبا و روشن هستن برای من هم تو برنامه نوت و پد + اینطوری بشه؟ خیلی مهمه برام.

  2. میشه کل مطالب این سایت، یا مثلا نکات مهمتر و کاربردی ترش رو روی سایت قرار بدین؟
    https://cssguidelin.es/

    اگر طبق این اصول بنویسیم مطمئنا ً تمیز تر و قابل فهم تر میشه، ولی من زبانم خوب نیست، درست درک نکردم مطلب رو و باید زمان خیلی زیادی صرف کنم برای خوندن متون ِ زبان اصلی.

    1. سلام سید اگه بخوای من میتونم کمک کنما، مطالب جالبی بود، اگه قابل بدونید، من خودم هم میخوام چیزای جدید یاد بگیرم، زبان هم یه چیزایی شکسته بسته بلدم، میتونم یه پیشنویس درست کنم، اگه تایید کردید بذارید، چطوره؟ :)

  3. سلام آقای سیدی ممون از سایت خوبتون
    یه سوال این علامتایی که خیلی از سایتا میزارن بالای صفحه کوچیکن نمیدونم چجوری بگم تو تایتل چطوری میتونیم ماهم بزاریم؟

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *