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

خوانایی یا آن هم 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 */