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

cssBetter1

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

این موضوع در مورد کدهای CSS نیز کاملا صادق است. نکاتی وجود دارد که باید هنگام نوشتن CSS به آنها توجه کنیم. در این پست می خواهم برخی از مهمترین موارد را با شما به اشتراک بگذارم. من معتقدم که این 7 نکته به شما در بهبود کیفیت کدهای CSS کمک می کند.

1. DRY

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

برای مثال میتوانیم 3 کلاس CSS برای 3 دکمه به شکل زیر داشته باشیم :

.primary-button {
  background: blue;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.form-button {
  background: green;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.cancel-button {
  background: red;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

اما همین کد بالا را میتوان با نوشتن بخش های مشترک در یک کلاس به صورت زیر اصلاح کنیم:

.button {
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.primary-button {
  background: blue;
}

.form-button {
  background: green;
}

.cancel-button {
  background: red;
}

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

2. نامگذاری

نامگذاری انتخابگرهای CSS نکته مهم دیگری برای نوشتن بهتر کدهای CSS است. نام یک انتخاب کننده باید توصیفی  و قابل خواندن باشد:

// BAD NAMING

.p {
  // Rules
}

.myFirstForm {
  // Rules
}

به طور معمول، <p> یک عنصر از HTML است و مخفف پاراگراف است. در کد بالا واقعاً نمی توانیم درک کنیم که کلاس p چیست. همچنین، شما باید از نامگذاری به شکل myFirstForm خودداری کنید، این نوع نامگذاری از قاعده کمل-کیس استفاده میکند.

در عوض بهتر است از اسم های با معنی استفاده کنید که با علامت (-) از هم جدا شده اند :

// GOOD NAMING

.article-paragraph {
  // Rules
}

.contact-form {
  // Rules
}

نامگذاری در برنامه نویسی کار چندان آسانی نیست، اما کنوانسیون های مختلف نامگذاری وجود دارد که می توانید در پروژه خود از آنها استفاده کنید. BEM یکی از آنهاست. من قبلاً با BEM کار کرده ام و می توانم آن را توصیه کنم.

3. از روش Inline برای اعمال کدهای CSS استفاده نکنید

خوب، استدلال هایی در این زمینه در وب وجود دارد: برخی به شما می گویند هرگز از سبک های درون خطی استفاده نکنید، در حالی که برخی دیگر استدلال می کنند که در بعضی موارد می تواند مفید باشد. به نظر من از این سبک در اعمال کدهای CSS پرهیز کنید. زیرا باعث شلوغ شدن های کدهای HTML شما میشود و در آینده نیز مدیریت آنها دشوار است.

جدایی بخش های مختلف

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

<div style="font-size: 16px; color: red;">Some Text</div>

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

مشکلات در جستجو

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

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

<div class="text-bold">Some Text</div>

پس از اینکه نام کلاس را پیدا کردیم، کافی است به فایل حاوی کدهای CSS رفته، جستجو کرده و استایل مورد نظر را تغییر دهید:

.text-bold {
  font-size: 16px;    // change the font-size to 14px
  font-weight: bold;
}

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

<div style="font-size: 16px; font-weight: bold">Some Text</div>

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

مشکلات مربوط به اولویت ها

استفاده از روش inline در اعمال کدهای CSS از نظر اولویت اعمال همیشه در جایگاه بالاتری قرار دارد. فرض کنید که هم از کلاس و هم از روش inline برای اعمال استایل مورد نظر استفاده کنیم:

.text-bold {
  font-size: 16px;
  font-weight: bold;
}
<div class="text-bold" style="font-size: 14px">Some Text</div>

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

.text-bold {
  font-size: 20px;
  font-weight: bold;
}

اندازه فونت همچنان برابر با مقدار 14 است، بنابراین تغییر در کلاس های CSS برای شما کار نخواهد کرد، این موضوع میتواند باعث سردرگمی شما شود. با این حال برای رفع این مشکل میتوانید از important استفاده کنید :

.text-bold {
  font-size: 20px !important;
  font-weight: bold;
}

4. از برچسب important! استفاده نکنید

خوب، وقتی کد شما به خوبی کار نکند، احتمالا از برچسب important! برای آن استفاده میکنید:

!important

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

5. از یک پیش پردازنده استفاده کنید

کار با پیش پردازنده CSS مانند Sass یا LESS در پروژه های بزرگ بسیار مفید است. یک پیش پردازنده ویژگی های اضافی را به کد CSS ما وارد می کند که به طور معمول نمی توانیم انجام دهیم.

به عنوان مثال، می توانیم متغیرها، توابع و میکسین ها را تعریف کنیم ، می توانیم فایلهای CSS خود را در سایر فایلهای CSS وارد و خارج کنیم و می توانیم کد CSS تو در تو را بنویسیم:
resim
هر پیش پردازنده نحو خاص خود را دارد، و در انتها هم کدهای آن به کدهای CSS تبدیل خواهد شد.

6. از شکل های کوتاه تر شده کدها استفاده کنید

برخی از خصوصیات CSS مانند padding ، margin ، فونت ها و border را می توان به روش بسیار ساده تری نوشت. استفاده از شکل کوتاه تر شده کدها به شما کمک خواهد کرد، حجم کمتری از کدها را بنویسید. برای مثال نمونه مثال زیر را میتوان به شکل ساده تری هم نوشت:

.article-container {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 15px;
  margin-right: 15px;
  border-width: 1px;
  border-style: solid:
  border-color: black;
}

شکل ساده تر :

.article-container {
  padding: 10px 15px 20px 15px;
  margin: 10px 15px;
  border: 1px solid black;
}

7. جاهایی که ضرورت دارد از کامنت ها استفاده کنید

به طور معمول کدهایی که خوب نوشته شده باشند، نیازی به کامنت ها ندارند، با این حال مواردی نیز وجود دارد، که باید توضیحاتی را در کد خود ذکر کنید، در اینجا میتوانید از کامنت ها کمک بگیرید.

// Your Comments
.example-class {
  // your rules
}

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

برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام لرن سورس عضو شوید.