بهینه سازی کدهای CSS با CSScomb

بهینه بودن کد چه در اجرای آن و چه در زمانی که در حال توسعه یک سایت یا وب اپلیکشن هستیم ضروری هست، اما اکثر برنامه نویسان  Front-end بنا به دلایلی که گفتن آن نیاز نیست بهینه سازی و کدنویسی تمیز را رعایت نمی‌کنند. در مورد Front-end شما می‌توانید کدهای CSS خود را با برنامه‌ای به نام CSScomb بهینه و مرتب نمایید.

CSScomb همچنین می تواند کمک کند تا خطاها را شناسایی کنید و پیشنهادهایی را برای بهینه شدن ارائه می‌دهد. ویژگی های CSScomb شامل موارد زیر است :

  • بهینه سازی فایل CSS شما به همراه تنظیمات مخصوص خودتان
  • قالب بندی تمام تورفتگی‌ها
  • قالب بندی تمام فاصله گذاری‌ها
  • حذف گزینه‌های تکراری
  • حذف گزینه‌های خالی

شما میتوانید کد های CSS را از طریق قسمت ابزار آنلاینی که در وب سایت پروژه هست بهینه کنید. ولی ممکن است سبک تنظیماتی که به صورت پیش‌فرض وجود دارد باب میل شما نباشد. قدرت اصلی CSScomb در ساختن الگوی و سبک تنظیمات خودتان است.

csscomb-online-usage

شروع استفاده‌ CSScomb

برای بهینه کردن آنلاین کد وارد منوی Try online  در سایت اصلی شود، سپس در سمت چپ کد خود را Paste کنید و بعد از کلیک روی Comb it نتیجه‌ی بهینه سازی شده و یا به اصطلاح شانه شده آن را در سمت راست دریافت کنید. ولی بهتر این است که برای ساختن الگو و سبک تنظیمات خود از طریق Build Config و طی کردن ۲۴ مرحله فایل تنظیمات خودتان را درست کنید. ولی برای این کار باید CSScomb  را روی سیستم خودتان نصب کنید.

لوکال از طریق ترمینال

برای نصب CSScomb شما باید node.js را نصب کنید. نحوه نصب رو مک رو در این لینک ببنید و برای نصب node.js روی لینوکس بخش اول این مطلب رو مطالعه کنید.

زمانی که node.js نصب شد، CSScomb را بصورت گلوبال بر سیستم خود نصب کنید:

 

یک فایل الگو (سبک تنطیمات) به نام  .csscomb.json در بالاترین سطح پروژه خود ایجاد کنید.

پیکربندی الگو (سبک تنطیمات)

آسانترین روش برای ساختن الگو (سبک تنطیمات) رفتن به منوی آنلاین Build Config و طی ۲۴ مرحله است. فقط به این ۲۴ مرحله را با حوصله و دقت انجام دهید تا بعدا کدهای شما دقیقا به سبکی که می‌خواهید بهینه شود.

csscomb-config

سپس تنظیمات مورد نظر را که شامل آکولاد باز و بسته هست کپی کرده و در فایل .csscomb.json  خود Paste کنید.

hive-CSScomb

اجرای CSScomb در ترمینال

در پوشه پروژه خود یک فایل CSS را شناسایی کنید:

CSScomb تغییرات را بصورت مستقیم در MYCSSFILE.css می‌نویسد. می‌توانید برای تمامی فایل های CSS موجود در پروژه خودتان از دستور زیر استفاده کنید.

استفاده از فایل الگو (سبک تنطیمات) در کارهای تیمی بسیار کاربردی هست و باعث می‌شود که کدهای نوشته شده توسط چند نفر یک سبک و روال واحد داشته باشد. اگر در تیم خودتان از git استفاده می‌کنید، می‌توانید قبل از هر Push به مخزن اصلی توسط CSScomb یک بار کد خودتان را بهینه کنید. همچین پلاگین‌های هم برای Grunt, Brackets و Sublime در دسترس هستند که می‌توانید در صفحه اصلی CSScomb لینک‌های آنها را مشاهده کنید.

امین ضیا

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

همچنین ممکن است دوست داشته باشید ...

۵ واکنش

  1. mohammad گفت:

    روی ios?
    نصب نود جی اس روی ios
    بعله خیلی جالبه از قابلیت های آیفون جدیده نصب nodejs?
    :d 😀 😀
    لطفا اصلاح کنید نصب رو مک

  2. مسعود گفت:

    نصب Node.JS روی iOS؟؟؟؟؟!!!!

  3. خسته نباشید مرسی به خاطر این وبسایت مفید

  4. خسته نباشید مرسی به خاطر این وبسایت کاربردی

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

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