خمس طرائق لكتابة CSS أفضل

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

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

خمس طرائق لكتابة CSS أفضل.

1- إعادة التصفير –  Reset: هذه الخطوة من أهم الخطوات في بداية الكتابة، لإعادة تصفير أغلب الخصائص لاختلاف المتصفحات هناك طريقتين مشهورتين يمكن استخدامهما دون الحاجة لكتابة طريقة خاصة بك.

Eric Meyer Reset
YUI Reset

كما يمكن كتابة طريقة لك على حسب احتياجاتك..
# html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
# pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

ولكن لا تستخدم هذا الريست العام لأنه يستغرق وقت كثير في تنفيذه..
* { margin: 0; padding: 0; }

2- الترتيب اﻷبجدي:

div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}

انظر بعد الترتيب الأبجدي أيهما أسهل في العثور على أي سطر..

div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
9. }

الترتيب الأبجدي سوف يساعدك في تقليل وقت البحث إذا أردت التعديل على أحد السطور،  كما أنه في نظري يريح العين.

3- التنظيم: من أهم أدوات التنظيم هو استخدام التعليقات عند كتابة الاكواد، ستظهر صفحة منظمة جدا بسهولة يمكنك الوصول إلى ما تريد.


/*****Reset*****/
Remove margin and padding from elements
هنا تعليق بداية إزاله الحشو والهوامش

/*****Basic Elements*****/
Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc.
الخطوط الأساسية للنص والفقرات

/*****Header*****/
Define all elements in the header
رأس الصفحة

/*****Content*****/

Define all elements in the content area
المحتويات

/*****Footer*****/
Define all elements in the footer
الذيل

وهكذا كإضافة بعد الاكواد الإضافية واستخدام الجافا اسكريبت.

4- الاتساق: كمجمل لهذه النقطة العناصر المرتبطة ببعضها بعض من الأحسن أنها تكون متتالية الاكواد الخاصة بالمحتوى مع بعضها، كذلك رأس الصفحة وهكذا..

div#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: right;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }

5- ابدأ من المكان الصحيح: أكثر من سايت قرأت فيه هذه الملحوظة (ابدأ من المكان الصحيح) يجب عليك الانتهاء أولا من بادية اكواد الهتميل وإتمام التجاتا الخاصة بالهتميل والانتهاء منها، ثم إضافة الاستايل بتدرج سيساعدك هذا كثير جدا في الانتهاء بالشكل المطلوب.

منتظر تعليقاتك والمناقشة عليها.

مصدر الصورة
  • موضوع جميل وأنا خاصتاً بديهياً استعمل التنظيم والإتساق في جميع تصميماتي

  • رائع جدا أخ أحمد .. مقال ممتاز جدا وفعلا طرقة بسيطة ولكن تأثيرها كبير على المدى البعيد وعندما تكثر وتكبر المشاريع ..

  • أبو نايف

    بارك الله فيك

    شغل مرتب

  • السلام عليكم.
    موضوع مميز.
    بخصوص المقالات العربية المميزة في مجال الCSS، هناك العديد من المواقع والمدونات.
    وخير مثال: http://www.cssbit.com

  • متشكر جدا ليكم يا جماعه وبجد شكرا على التشجيع
    وياريت اللى عنده اى استفسار او مناقشة اهلا بيه ونفيد بعد

    وكمان اللى حابب يضيف مصدر عربى اهلا بيه
    انا حشارك بمدونه فى المصنع كتوم سابقا بصراحه مدونه هايلة جدا

    http://almsn3.blogspot.com
    دوول افتكر اللى الهدف منهم هما الاتنين سى اس اس فقط

  • Nice Tips

  • شكراً على هذا الموضوع القيم .. نحن بحاجة فعلاً لدروس وإلماحات كثيرة حول CSS …

  • شهاب

    شكراً يا أخوي أحمد …
    عندي اضافة مهمه ربما تغني الموضوع …
    في السابق كنت أعتمد في كتابة CSS على التصميم في الفوتوشوب لكن بعد استخدامي لجريد سيستم 960
    http://960.gs/
    اختصر علي الوقت اكثر ثم انه اسهل واكثر تنظيماً
    وهذه بعض الموضوعات الرائعه :
    http://www.noupe.com/css/css-techniques-i-wish-i-knew-when-i-started-designing-websites.html

    http://www.noupe.com/css/15-effective-tips-and-tricks-from-the-masters-of-css.html

    والأخوه اللي عندهم وقت وخبرة في CSS ,وبإستطاعاتهم أن يترجمون المقالات ليستفيد باقي الأخوان والأخوات هذه بعض المواقع الرائعة :
    http://css-tricks.com/
    http://creativetechs.com/tipsblog/
    http://www.cssglobe.com/
    http://www.1stwebdesigner.com/category/css/
    http://www.noupe.com/category/css

  • خالد مسيعد

    شكرا على الموضوع وارجو ملاحظة انه هنالك خطأ في رابط Eric Meyer Reset يفترض ان يقودك الى هذه الصفحة http://meyerweb.com/eric/tools/css/reset/
    تحياتي

  • شهاب

    أخوي أحمد … جزاك الله ألف خير على هذا الموضوع الرائع …
    وهذه اضافة لإثراء الموضوع …..
    في السابق كنت أعتمد على توزيع CSS من خلال التصور ( تصميم الفوتوشوب ) ، أما حالياً فختلف الوضع من خلال تطبيق قريد سيستم 960
    فأصبح العمل أكثر تنسيق ، دقة وسهولة جداً في اختصار الوقت .
    ———————————————-
    حقيقة عندي مجموعة ضخمه من المواقع التي تتناول التقنيات والخفايا في Css .
    فالأخوه المتمكنين في CSS ومنهم أخوي عبدالملك وأنت أخي أحمد لو تترجمون المقالات ليستفيد منها كل الأخوان هنا .
    وهذه هي بعض المواقع في ملف تكست حتى لا يندرج هذا الرد تحت السبام :
    http://www.masaar.ae/css.txt

    • متشكر جدا اخ شهاب وشكرا على الاضافه على الموضوع
      انا شوفت المواقع ومتابع جيد ليها الحمد لله
      انا ارشح http://css-tricks.com
      لان مديره اعتقد او عبقرى فى هذا المجال
      كذلك اسماش ماجزين وان شاء الله احاول اقدم ما بوسعى فى هذا المجال

      • شهاب

        منتظرين ابداعاتك سيدي الفاضل

  • انا استخدم الخطوة رقم 1 ورقم 3 ورقم 4
    رقم 2 استخدم في الترتيب الشكل والخواص
    الشكل = السطر الطويل اسفل
    الخواص = المقاسات والالوان

  • موضوع ممتاز و شكرا ليك لكن لية ملاحظة واحدة انة من الممكن ان تكتب
    html,body{margin:0;padding:0}
    بدل من ان تكتب كل التاجات مثل
    # pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

  • الله يعطيك الف عافية

تعليقات عبر الفيسبوك