بهبود خوانایی کد در 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 */
}