أولا وقبل مشاهدة أي شيء في المقال, إذا كتبت ال Code بأي طريقة مهما كانت سوف يعمل ال Code ولكن إذا لم تقم بالتنسيق وتكتب ال Code بنمط واحد سوف تواجه مشاكل عند التعامل مع فريق, وفي الأعمال الإحترافية ولذلك يجب أن يكون لديك نمط واحد لكتابة ال Code بالمعايير التي يتبعها العالم ( Pattern ) وهنا مشاكل التنسيق التي يقع فيها البعض
التسمية
عند تسميه ال Class أو ال ID يجب أن تراعي أن يكون الإسم معبر عن العنصر الخاص به ويجب أن تبتعد عن عمل الإسم Capital أو بطريقة ال camelCase ويجب ألا تستعمل ال Underscore للفصل بين الكلمات إلا في حالة أنك تستعمل طريقة ال
BEM شاهد المثال لتوضيح الفكرة
المسافات بين ال Selectors
الكثير من الذين يبدأون حياتهم في التعلم يضع مسافات بين ال Selectors مرة ومرة أخرى لا لذلك يجب أن توحد الطريقة إذا قمت بوضع مسافة يجب وضعها بين الكل والعكس والمثال يوضح لك سوف تجد أنه لا توجد مسافة بين ال Class الأول والثاني ولكن هناك مسافة بين الثاني والثالث لذلك لا يوجد نمط للكتابة الآن
الآن هذه هي الطريقة الصحيحة لا توجد مسافات بينهم
وإذا أحببت وضع مسافة يجب أن تكون المسافة بين جميع ال Selectors كما في المثال
المسافات بعد إسم ال Class
البعض يقوم بوضع إسم ال Class وبعده فتحه القوس مباشرة ولا داعي لعمل هذه الحركة إلا في حالة أنك تريد ضغط ال Code وعمل نسخة ( Minified ) لذلك دائما ضع مسافة بعد إسم ال Class
المسافات بعد إسم ال Property
البعض يقوم بوضع خاصية ( Property ) وبعدها علامة ال Colon ( : ) ولا يقوم بوضع مسافة بعدها والأفضل أن يكون هناك مسافة بعدها, شاهد المثال
بداية القوس في نفس السطر
يجب عليك كتابة بداية القوس في أول صف وليس في صف جديد وللعلم قديما في بداية الدورات التعليمية كنت أقوم بوضعها في سطر جديد لكن أحببت أن نصلح دائما طريقة الكتابة
الخواص المرتبطة مع بعضها
عندما تعمل في مشاريع كبيرة سوف تجد أن هناك Selector يمكن أن تكتب فيه الكثير جدا من الخواص ويفضل أن تضع الخواص المرتبطة مع بعضها حتى لا تتعب في التعديل ولا تقوم بكتابة الخاصية أكثر من مرة وعلى سبيل المثال تجمع كل ما يخص ال Position مع بعضها وخواص الطول والعرض مع بعضها وخواص ال Font مثلا مع بعضها, شاهد المثال لتوضيح الفكرة وطبعا لا داعي لوضع التعليق هو لتوضيح الفكرة فقط ولتنظيم الخواص في المثال
تجميع ال Selectors
إذا كان هناك أكثر من Selector لهم نفس الخواص وتريد عمل Grouping لهم ضع كل واحد في سطر وليس على سطر واحد
ترتيب ال Vendor Prefixes
إذا كانت الخواص التي تستعملها تحتاج لكتابة ال Vendor Prefixes يجب أن تكتبها بنفس الترتيب دائما ولا تغير الترتيب
0 تعليقات