شما اینجا هستید :

Home » مقالات » توسعه سمت کاربر » بهینه نویسی در Css

بهینه نویسی در Css

شما همیشه باید تلاش کنید تا به بهترین و ساده ترین و همینطور خوانا ترین شکل ممکن کد های css رو بنویسید. حتما تا به حال شده که بعد از نوشتن کد های css از ناخوانا بودن و بهم ریخته بودن آن ها رنج ببرید. در این مطلب میخواهیم روش های ساده برای تمیز تر کردن کد های css به شما ارائه بدیم.

مشکلات

شاید مشکلات رایج که همه از آن رنج میبریم این ها باشند :

  • کد های تکراری و مشترک
  • پیشوند برای مررگر های مختلف
  • عدم مستند سازی
  • بیش از حد استفاده کردن از انتخاب گر های واجد شرایط
  • نام کلاس ضعیف (مرتبط نبودن نام ها)

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

یا اینکه شما به صورت گروهی روی یک پروژه مشترک کار میکنید خب در این صورت باید کد های خوانا تری بنویسید تا در صورت نیاز همکاران شما نیز از این کد های نوشته شده توسط شما سردر بیاورند تا بتوانند اصلاحات لازم را به راحتی انجام بدهند.

راه کار ها

مشخص است که روش های کامل و بی نقصی در رابطه با این کار وجود ندارد اما سعی در بهبود کد ها میتواند از ادامه روش های قدیمی بهتر و عاقلانه تر باشد.اما یک وبسایت  به نام css guidelines اثر harry roberts دستور العمل هایی ارائه داده که به گفته خودش میتونید “کد های css ای بسازید که در سطح بالایی از مدیریت ، انعطاف پذیری ، قابلیت خوانایی بالا قرار داره “. در اینجا کمی از این دستور العمل ها را با هم مرور میکنیم.

  •  کامنت گذاشتن

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

  • شی گرا کردن

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

به قطعه کد زیر دقت کنید :

در مثال بالا از کلاس btn به عنوان ساختار تشکیل عنصر استفاده شده که میتواند به هر قسمتی از کد html  شما نسبت داده شود. با گسترده تر کردن این کلاس میتوانید خصوصیات ظاهری را با جزئیات بشتر تعریف کنید و از آن استفاده کنید.

 

  • BEM

BEM مختصر شده (Block, Element, Modifier) و به معنیه (بلوک، عنصر، تغییردهنده) از دیگر راهکار هاست. مثال بارز کارایی BEM موتور جستجوی یاندکس است که یک شرکت فناوری اطلاعات روسی که بزرگترین موتور جستجوی روسیه و هشتمین متورجستجوی جهار را اداره میکند. BEM روشی از نامگذاری به صورت کامل است، ساده و کاربردی با توصیف کامل کارایی کلاس ها اما بدون جزئیات اضافه.

BEM به سه دسته تقسیم میشود:

Block : ریشه یا پایه یک جزء
Element : یک جزء در داخل یک بلوک
Modifier : تنوع و یا گسترش بلوک (منظور شکل ظاهری)

به ترتیب به صورت زیر :

با ( __ ) حد و مرز عناصر مشخص میشود و تغییر شکل با (–) .

در بالا میبینیم که کلاس .dog بلوک اصلی و ریشه عنصر است سپس کلاس .dog__tail که این هم یک عنصر است اما بخش کوچکی از عنصر والد خود یعنی .dog است و در نهایت کلاس .dog–small که یک تغییر دهنده برای عنصر.dog  می باشد. شما همچنین میتوانید تغییر دهنده ها رو به عناصر هم اضافه کنید. به طور مثال تغییر دهنده .dog__tail–short که برای عنصر dog__tail استفاده میشود. گاهی اوقات ممکن است شما نیاز به ساخت اسم های ترکیبی دیگری برای بلوک ها ، عناصر و تغییر دهنده ها داشته باشید. در هر صورت شما با استفاده از یک خط (-) میتوانید نام ها رو از هم جدا کنید.

همینطور متوانید از ابزاری به نام CSS Preprocessors برای نوشتن کد های css استفاده کنید که تفاوت هایی با زبان اصلی  css دارد اما این ابزار به شما قابلیت های بهتر و منعطفتری برای نوشتن می دهد و در انتها کد های شما را به زبان  css ترجمه میکند.

فرض کنید ۱۰۰۰ خط کد css دارید اما از اندازه فونت به کار برده شده در کد ها راضی نیستید در این حالت شما باید به تمام هزار خط کد سر بزنید تا اندازه فونت ها رو تغییر بدهید. اما در زبان های preprocessed با استفاده از متغییر ها میتوانید به راحتی اینکار را انجام دهید. preprocessed قابلیت های دیگری دارد که استفاده از متغییر ها یکی آن هاست.

چندین زبان preprocessors وجود دارد که از معروف ترین های آن میشود SASS و LESS را نام برد که کاراییی بسیار بالایی دارند و در این کار به شما کمک فراوان میکنند.

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

امیدواریم گفته های ما برای شما مفید واقع شود 🙂

مــطالب مشـــابه

تفاوت میان برنامه‌نویسی شئ‌گرا و تابعی

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

ارسال شده در شهریور ۷, ۱۳۹۷

جوملا چیه؟

جوملا یه سیستم مدیریت محتوای تحت وبه که مدیریت و انتشار مطالب رو به شکل ساده امکان پذیر میکنه، جوملا امکانات گسترده ایی و با ابزار های خودش امکان گسترش نرم افزارها رو فراهم میکنه. با جوملا میتونین وبسایت ها و سامانه های تحت وب…

ارسال شده در شهریور ۶, ۱۳۹۷

عناصر مهم در ایجاد یک وبسایت فوق العاده

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

ارسال شده در شهریور ۴, ۱۳۹۷

دیدگاهتان را بنویسید

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