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

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