You are currently viewing برامج تحرير CSS: ما تحتاج إلى معرفته (بالإضافة إلى 10 خيارات رائعة للاختيار من بينها)

برامج تحرير CSS: ما تحتاج إلى معرفته (بالإضافة إلى 10 خيارات رائعة للاختيار من بينها)

برامج تحرير CSS: ما تحتاج إلى معرفته (بالإضافة إلى 10 خيارات رائعة للاختيار من بينها)

للكاتب تونى هو تران /المصدر انفجن

CSS editors: What you need to know (plus 10 great options to choose from)

على الرغم من أن الكتابة أو العمل باستخدام الكود قد لا تكون وظيفتك الأساسية كمصمم UX (أو في وصف وظيفتك على الإطلاق) ، إلا أنها مهارة ستأخذ عملك بعيدًا. إن فهمك الأساسي للغات التي يستخدمها المطورون والمهندسون لن يمنحك فقط رؤية أفضل لكيفية ظهور تصميماتك ويساعدك على التواصل بين الفرق ، بل سيسمح لك أيضًا بأن تصبح أكثر ذكاءً في عمليات عملك. (تحذير عادل: قد يفوتك أصدقاء مطور البرامج الخاصة بك Slacks من حين لآخر يطلب تغييرات طفيفة.)

على الرغم من وجود العديد من اللغات المستخدمة في إنشاء موقع ويب ، إلا أن CSS هي واحدة من لغات صفحات الأنماط الأكثر استخدامًا والتي قد ترغب في التعرف عليها بشكل أفضل. ربما تكون قد عملت معها بالفعل أثناء إجراء عمليات تدقيق مع المطورين ، أو إجراء تعديلات صغيرة على الأسلوب لتصميمات مدمجة ، أو بناء نماذج تفاعلية خاصة بك خارج InVision Studio.

لتسهيل هذه المهام (وأكثر) ، يساعد وجود محرر CSS رائع في صندوق الأدوات. سواء كنت في السوق للحصول على واحدة جديدة (أو تريد المساعدة في اختيار الأولى الخاصة بك) ، فقد قمنا بتجميع قائمة 10 من الأفضل في السوق.

… ولكن قبل أن نغطس فيها ، دعنا نذهب إلى نفس الصفحة:

ما هو CSS؟

مجرد تجديد سريع: CSS تعني “Cascading Style Sheets”. إنها لغة ورقة أنماط تساعدك في التحكم في مظهر عدة صفحات (مثل لون الخلفية أو الرسم) على موقع ويب مرة واحدة باستخدام ملف واحد فقط. بدلاً من الاضطرار إلى الدخول إلى تعليمات HTML البرمجية لكل صفحة على حدة وإجراء التغييرات يدويًا ، يمكن لملفات .css إجراء تغييرات واسعة عبر جميع الصفحات على الموقع.

لماذا يحتاج المصممون إلى محرري CSS؟

لقد تطرقنا إليها أعلاه ، لكن المصممين يحتاجون إلى محرري CSS للوصول بسهولة وإجراء أي تغييرات على ملف .css عند التعاون مع المهندسين أو المطورين ، أو بناء تصاميمهم الخاصة. لا يسمح لك محرر CSS بإجراء هذه التغييرات فحسب ، بل إنه يقدم الكود بطريقة بسيطة تقلل من فرصة إدخال الأخطاء في الملف.

حسنًا ، عد الآن إلى خياراتك لمحرري CSS:

10 برامج تحرير CSS رائعة يمكنك استخدامها

1. الأكثر شعبية: Sublime Text

Source: Sublime Text

السعر: مجاني “للتنزيل والتقييم” ، لكن لا يوجد حد رسمي لفترة التقييم هذه. يبلغ الرخصة التجارية للاستخدام المستمر 80 دولارًا.

أنظمة التشغيل:

  • نظام التشغيل Mac OS X (الإصدار 10.7 أو الأحدث مطلوب)
  • ويندوز
  • ويندوز 64 بت
  • مستودع لينكس

Sublime Text هو محرر CSS سريع الاستجابة وسريع ، وهو واحد من أكثر المحلات شعبية في السوق. إنه يتميز بعناصر لغة مشفرة بالألوان لإبقاء الأشياء في مسارها بسهولة وبصريا ، وميزة الإكمال التلقائي للرمز للسرعة على طول تخصيص موقع الويب.

2. عظيم للتعاون: Atom

Source: Atom

مجاني

أنظمة التشغيل:

  • نظام التشغيل Mac OS X (الإصدار 10.9 أو الأحدث)
  • ويندوز (7 أو أحدث)
  • Linux (RedHat أو Ubuntu)

Atom عبارة عن محرر CSS سهل الاستخدام ومفتوح المصدر يتيح التعاون في الوقت الفعلي مع الآخرين على الكود (مثل أي مطورين يحتاجون إلى إضافة تعديلات خاصة بهم.)

تأتي المنصة أيضًا مع بعض الميزات البسيطة ، مثل:

  • الإكمال التلقائي لمساعدتك في كتابة التعليمات البرمجية الخاصة بك بسرعة أكبر
  • متصفح نظام ملفات ، حتى تتمكن من فتح مشروع واحد أو أكثر في نافذة واحدة
  • خيار تثبيت “حزم” متعددة تعمل كملحقات سهلة الاستخدام لـ Atom – مما يمنحك المزيد من الميزات للعمل معها

3. عظيم أيضا للتعاون: Brackets

Source: Brackets

السعر : مجاني

أنظمة التشغيل:

  • نظام التشغيل Mac OS (Mojave أو الأحدث)
  • ويندوز (7 أو أحدث)
  • Linux (Ubuntu أو Mint)

Brackets هو أيضًا محرر CSS مفتوح المصدر يأتي مع عدد من الميزات ، مثل خيار المعاينة المباشرة الذي يرتبط بمتصفحك حتى تتمكن من رؤية التغييرات التي تم إجراؤها مباشرة على موقع الويب الخاص بك. كما أن لديها عددًا من الملحقات المتاحة التي تتيح المزيد من التخصيص.

4. كبيرة لمستخدمي ماك:Espresso

Source: Espresso

السعر: 79 دولار (يأتي مع نسخة تجريبية مجانية)

أنظمة التشغيل: Mac OS (X أو الأحدث

Espresso هو محرر CSS مخصص حصريًا لنظام التشغيل Mac OS. مثل Brackets ، يأتي مع أداة معاينة مباشرة سهلة الاستخدام تتيح لك رؤية التغييرات التي تجريها على موقع الويب الخاص بك في الوقت الحقيقي. يمكن لمصممي مواقع الويب أيضًا العمل بسرعة مع ميزات مثل البحث والاستبدال ، وأداة تحرير متعددة رائعة تتيح لك إجراء تعديلات جماعية دفعة واحدة.

5. محرر رائع لـ HTML و CSS وعدد قليل من اللغات الأخرى: Notepad ++

Source: Notepad++

السعر : مجاني

أنظمة التشغيل: ويندوز (X أو الأحدث)

يعد Notepad ++ أحد أكثر برامج تحرير CSS شيوعًا المتاحة للتنزيل – ولسبب وجيه. النظام الأساسي مليء بالميزات بما في ذلك الإكمال التلقائي ، والعثور على واستبدال ، و multiview ، حتى تتمكن من النظر في مشاريع مختلفة في وقت واحد. يدعم Notepad ++ أيضًا أكثر من 20 لغة بما في ذلك CSS ، حتى تتمكن من الدخول إلى الأعشاب الضارة باستخدام تصميماتك. اعتبارًا من عام 2019 ، يتوفر محرر CSS لنظام Windows فقط.

6. عظيم بالنسبة لأولئك الذين يحبون إبقائه بسيطًا: تحرير كومودو

Source: ActiveState

السعر: مجاني لـ Komodo Edit ، لكن نظامهم الأساسي القوي Komodo IDE يبدأ من 295 دولارًا للحصول على ترخيص واحد.

أنظمة التشغيل:

  • ويندوز
  • نظام التشغيل Mac OS (X أو الأحدث)
  • لينكس

السعر: مجاني لـ Komodo Edit ، لكن نظامهم الأساسي القوي Komodo IDE يبدأ من 295 دولارًا للحصول على ترخيص واحد.

7. Great for newbies: Stylizer

Source: Skybound

السعر: هناك نسخة تجريبية مجانية وشراء ترخيص لمرة واحدة بقيمة 79 دولارًا يمنحك مفتاح منتج يعمل على نظام Windows أو Mac ، بالإضافة إلى ضمان استرداد الأموال لمدة 30 يومًا فقط في حالة الرغبة في التراجع.

أنظمة التشغيل:

  • نظام التشغيل Mac OS
  • ويندوز

Stylizer هو محرر WYSIWYG CSS الذي يميزه وضع المعاينة المباشرة الخاص به عن محرري CSS الآخرين في السوق. باستخدام المعاينة في الوقت الفعلي ، يمكنك رؤية كل التغييرات على متصفحك أثناء إجرائها. كما يوفر لك قائمة “تحذيرات” بأية أخطاء تعتقد أنها قد ارتكبتها أثناء الترميز. هذا مثالي لأي محررين مبتدئين في CSS.

8. رائعة لأولئك الذين يبحثون عن محرر CSS مجاني قوي: Visual Studio Code by Microsoft

السعر : مجاني

أنظمة التشغيل:

  • نظام التشغيل Mac OS (X أو الأحدث)
  • ويندوز (7 أو أحدث)
  • Linux (دبيان ، أوبونتو ، ريد هات ، فيدورا ، أو سوس)
    Visual Studio Code (VSX) هو محرر CSS حسب الطلب من Microsoft ويأتي مع جميع الميزات القوية التي تتوقعها منهم. هذا محرر CSS سريع للغاية ، مع ميزات مثل IntelliSense التي “تتجاوز التمييز في بناء الجملة والإكمال التلقائي” من خلال إكمال التعليمات البرمجية استنادًا إلى “أنواع المتغيرات وتعريفات الوظائف والوحدات النمطية المستوردة”. كما يتيح لك VSX تصحيح التعليمات البرمجية مباشرة من المحرر.

9. عظيم لأولئك الذين يحبون الأشياء بسرعة وسهولة: السمكة الزرقاء Bluefish

Source: Bluefish

السعر : مجاني

أنظمة التشغيل:

  • نظام التشغيل Mac OS (X أو الأحدث)
  • ويندوز (XP أو أحدث)
  • Linux (Ubuntu, Debian, and Fedora)
    Bluefish هو محرر CSS بسيط من صانعي برنامج الإنتاجية في مكان العمل OpenOffice. إنه أساسي إلى حد ما من حيث الصور المرئية والواجهة ، ولكن هذا أيضًا ما يجعله لطيفًا وسريعًا. لن تتعثر بسبب مجموعة من الميزات التي لا تحتاج إليها ، نظرًا لعدم وجود أي سمنة في هذا البرنامج.

10. رائعة لأولئك الذين يريدون محررًا قويًا ولا يمانعون في الدفع مقابل ذلك: Rapid CSS

Source: Rapid CSS

السعر: يبدأ بـ 39.95 دولار (مع نسخة تجريبية مجانية) للحصول على ترخيص شخصي غير تجاري ؛ 49،95 دولار للاستخدام المهني.

أنظمة التشغيل: ويندوز (7 أو أحدث)

يعد Rapid CSS محررًا قويًا متعدد الشفرات مزودًا بميزات مثل تمييز بناء الجملة والمعاينة المباشرة وأداة بحث واستبدال متقدمة وحتى “مكتبة مقتطفات برمجية” لقوالبك.

هل قمت بتنزيل محرر CSS ولكن ما زلت بحاجة إلى بعض النصائح حول الحفاظ على كل شيء لطيفًا ومنظمًا؟ هنا ، كيفية تجنب الفوضى في أوراق الأنماط الخاصة بك.