الكود النظيف: لماذا لا تزال أساسيات HTML / CSS مهمة

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

حتى أفضل المطورين من الشركات الرائدة لا يتبعون دائمًا أفضل الممارسات ويكتبون التعليمات البرمجية التي يمكن تنظيفها وتحسينها.

عواقب القانون الفوضوي والقذر

للاقتباس من منشور مدونة قديم ولكنه لا يزال وثيق الصلة يناقش مبادئ الكود النظيف:

كود المصدر يشبه الدين المالي. لنفترض أنك تريد شراء منزل للعيش فيه. فمعظم الناس لا يملكون المال الكافي للدفع نقدًا لشراء منزل ، لذلك عليك الحصول على رهن عقاري بدلاً من ذلك. لكن الرهن العقاري في حد ذاته ليس بالأمر الرائع. إنها مسؤولية. عليك أن تدفع فائدة على دينك كل شهر ...

كذلك أيضًا في تطوير الويب. الكود له تكاليف مستمرة. عليك أن تفهمها ، عليك أن تحافظ عليها ، عليك أن تتكيف مع أهداف جديدة بمرور الوقت. كلما زاد عدد الكود لديك ، زادت التكاليف المستمرة. من مصلحتنا أن يكون لدينا أقل قدر ممكن من الكود المصدري مع الاستمرار في تحقيق أهداف أعمالنا.

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

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

بحلول الوقت الذي تنتهي فيه من قراءة هذا ، يجب أن يكون لديك فهم جيد لأساسيات كود الجودة وكيفية تسهيل الحفاظ على كود HTML و CSS وتوسيعه.

أساسيات تصميم الكود

لنبدأ بأساسيات كود HTML و CSS الجيد: صلاحية W3C ، اصطلاحات التسمية ، بنية الملف ، وما إلى ذلك.

كن على دراية بالهيكل منذ اليوم الأول.

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

استخدم المدققين للتحقق من الرمز الخاص بك.

حاول دائمًا استخدام مدققات HTML و CSS.

كود تالف:

 <figure> <div> <img src="demo.jpg" alt=""> <figcaption> <h2>Hello world</h2> </figcaption> </div> </figure> <picture> <source src="demo.webp" type="image/webp"> <img src="demo.jpg" alt=""> </picture> <details> <header> <summary>Expand details</summary> </header> <p>All content goes here</p> </details>

 p { font: 400 inherit/1.125 serif; }

كود جيد:

 <figure> <img src="demo.jpg" alt=""> <!-- figcaption should be child of element figure element, not div --> <figcaption> <h2>Hello world</h2> </figcaption> </figure> <picture> <!-- source should have srcset attribute --> <source type="image/webp"> <img src="demo.jpg" alt=""> </picture> <details> <!-- summary is not allowed as child of header --> <summary>Expand details</summary> <p>All content goes here</p> </details>

 p { font-weight: 400; font-size: inherit; line-height: 1.125; font-family: serif; }

استخدم نصًا بديلًا في علامات <img> للحصول على صلاحية مبادئ التعليمات البرمجية النظيفة.

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

كود تالف:

 <img src="demo.jpg">

كود جيد:

 <img src="demo.jpg" alt="This is placeholder of the image">

استخدم علبة الكباب (غلاف شوكي).

للأسماء ، حاول استخدام kebab-case ( spinal-case ) ولا تستخدم camelCase ، أو under_score . استخدم under_score فقط عند استخدام BEM ، على الرغم من أنك إذا كنت تستخدم Bootstrap ، فمن الأفضل الحفاظ على الاتساق والتوافق مع - كمحدد.

كود تالف:

 <section class="section_featured_Listing"> <h1 class="largeTitle">H1 title</h1> </section>

كود جيد:

 <section class="section-featured-listing"> <h1 class="large-title">H1 title</h1> </section>

kebab-case أكثر قابلية للقراءة من حالة camelCase under_score .

استخدم أسماء ذات معنى يمكن أن يفهمها أي شخص ، واجعلها مختصرة.

يجب أن تبدو أسماء الفئات بالشكل .noun-adjective .

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

كود تالف:

 <div class="team-wrapper"> <button class="large-button-green"></button> <p class="greenText-john-smith-description"></p> <div class="white-bg"></div> </div>

كود جيد:

 <div class="section-team"> <button class="btn-lg btn-success"></button> <p class="text-success"></p> <div class="bg-white"></div> </div>

لا تكتب سمات الكتابة لأوراق الأنماط والنصوص في HTML5.

إنها غير مطلوبة مع HTML5 ، ولكنها مطلوبة وفقًا لمعايير W3C في HTML4 / XHTML.

كود تالف:

 <link type="text/css" rel="stylesheet" href="../styles.css"> <script type="text/javascript" src="..//main.js"></script>

كود جيد:

 <link rel="stylesheet" href="styles.css"> <script src="app.js"></script>

استخدم فئات محددة عند الضرورة.

اجعل محدد CSS أكثر تحديدًا وحدد العناصر التي تحتاجها ؛ حاول ألا تذكر والديهم إذا لم يكن ذلك ضروريًا. سيسمح للشفرة بالتقديم بشكل أسرع وإزالة أي عوائق إدارية في المستقبل

كود تالف:

 section aside h1 span { margin-left: 25%; }

كود جيد:

 .left-offset { margin-left: 25%; }

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

أضف فئة إلى العنصر الأصل إذا كنت تريد إعطاء نمط آخر لنفس الكتلة.

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

كود تالف:

 <article> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> <article class=”another-article”> <h1 class=”other-styling-title”>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article>

 article { padding: 10px 15px; h1 { font-size: 32px; color: #ff0000; } } .another-article { padding-bottom: 30px; border-bottom: 4px solid #ccc; } h1.other-styling-title { font-size: 20px; }

كود جيد:

 <article> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> <article class=”other-styling”> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article>

 article { padding: 10px 15px; h1 { font-size: 32px; color: #ff0000; } &.other-styling { padding-bottom: 30px; border-bottom: 4px solid #ccc; /* you will have less classes */ h1 { font-size: 20px; } } }

إسقاط الوحدات من القيم الصفرية.

إضافة الوحدة غير ضرورية ولا تقدم أي قيمة إضافية. لا يوجد فرق بين 0px أو 0em أو 0٪ أو أي قيمة صفرية أخرى. الوحدات ليست مهمة لأن القيمة لا تزال صفرًا.

كود تالف:

 div { margin: 20px 0px; letter-spacing: 0%; padding: 0px 5px; }

كود جيد:

 div { margin: 20px 0; letter-spacing: 0; padding: 0 5px; }

لا تكتب border-bottom في CSS إذا كان بإمكانك إضافة علامة hr .

استخدم علامة hr بدلاً من كتابة محدد جديد وإضافة أنماط حدود في CSS. إنها تجعل الكود أكثر اعتمادًا على الترميز ، وهذا ما نسعى إليه.

كود تالف:

 <p class="border-bottom">I want this section to have a border.</p> <p>Lorem ipsum</p>

 .border-bottom { border-bottom: 1px solid #000; }

كود جيد:

 <p>I want this section to have a border.</p> <hr> <p>Lorem ipsum</p> // If necessary change hr variable in bootstrap

استخدم محدد A> B.

من المفيد جدًا استخدام محدد A > B ، والذي يطبق القواعد فقط لتوجيه الأطفال (الأطفال) ، في هذه الحالة لن تضطر إلى إعادة تعيين أنماط جميع الأطفال الآخرين الذين لا يحتاجون إلى هذا التصميم. على سبيل المثال ، يكون مفيدًا جدًا عند ترميز القوائم المتداخلة. لن تحتاج إلى إعادة تعريف أنماط القائمة الفرعية.

كود تالف:

 <ul> <li>List 1</li> <li>List 2</li> <li>List 3 <ul> <li>Submenu 1</li> <li>Submenu 2</li> </ul> </li> </ul>

 ul li { list-style-type: none; } li ul li { /* redefine to default value */ list-style-type: disc; }

كود جيد:

 <ul> <li>List 1</li> <li>List 2</li> <li>List 3 <ul> <li>Submenu 1</li> <li>Submenu 2</li> </ul> </li> </ul>

 ul > li { list-style-type: none; }

كيف تكتب HTML نظيف

بالانتقال إلى HTML ، ستكون الأولوية هي ضمان واجهة أمامية قوية وسهلة الصيانة.

حاول أن يكون لديك واجهة أمامية قائمة على الترميز قدر الإمكان.

اجعل كود الواجهة الأمامية يعتمد على الترميز بدلاً من كتابة الكثير من CSS.

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

كود تالف:

 <div class="main-content"> <p class="content-title">Main text title</p> <img src="http://via.placeholder.com/150x150" alt="example"> <p class="image-description">Here is image description</p> </div>

كود جيد:

 <main> <h1>Main text title</h1> <figure> <img src="http://via.placeholder.com/150x150" alt="example"> <figcaption> Here is image description </figcaption> </figure> </main>

تجنب استخدام أغلفة غير ضرورية في HTML.

حاول ألا تستخدم عناصر التضمين غير الضرورية في HTML. وجود أطنان من عناصر <div> و <span> أصبح شيئًا من الماضي. يتيح لك الاحتفاظ بالأشياء الدقيقة والخطية تحقيق الحد الأدنى من التعليمات البرمجية (انظر النقطة التالية).

كود تالف:

 <section class=”container”> <div class=”row”> <div class=”col-xs-12”> <div class=”inner-wrapper”> <span>Unnecessary br tags</span> </div> </div> </div> </section>

كود جيد:

 <section class=”container”> <p>Unnecessary br tags</p> </section>

استخدم الفئات الذرية للتصفيف.

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

كود تالف:

 <h1>Without using atomic class</h1> <p>Paragraph without atomic class</p> <section> <h1> Another h1 text</h1> <p>Paragraph inside div without class</p> </section>

 h1 { color: red; } section > h1 { color: blue; }

كود جيد:

 <h1 class="text-red">Without using atomic class</h1> <p>Paragraph without atomic class</p> <section> <h1 class="text-blue"> Another h1 text</h1> <p>Paragraph inside div without class</p> </section>

 .text-red { color: red; } .text-blue { color: blue; }

حاول الاحتفاظ بالفصول الحبيبية والذرية ، واستخدمها عند الحاجة. نتيجة لذلك ، ستصبح الواجهة الأمامية أكثر اعتمادًا على الترميز.

استفد من العناصر الدلالية.

يوفر استخدام الدلالات بنية أفضل ويجعل قراءة الكود والمحتوى أسهل.

كود تالف:

 <span class="heading"><strong>Welcome</strong></span> <span>This is unnecessary br tag.</span>

كود جيد:

 <h1>Welcome</h1> <p>This is unnecessary br tag.</p>

استخدم علامات HTML5.

تمنحك العلامات الجديدة مزيدًا من الحرية في التعبير وتوحيد العناصر المشتركة ، مما يحسن المعالجة التلقائية للمستندات. هنا قائمة صلبة لجميع العناصر. لقد اكتشفت أن الكثير من المطورين يستخدمون دائمًا الكثير من <div> و <span> ، ولكن يرجى أولاً التحقق من العلامات التي تناسب منطقيًا سياقك:

كود تالف:

 <div class="article-blue"> <div class="article-title-red">HTML 4 title</div> <div class="content"> Semantics <span class="boldtext">are</span> important. </div> </div>

كود جيد:

 <article> <h1>HTML5 title</h1> <p> Semantics <strong>are</strong> important. </p> </article>

الخلاصة: تعلم واستخدم عناصر جديدة في HTML5. إنها تستحق العناء!

CSS: كود نظيف ومعالجات أولية

عندما يتعلق الأمر بـ CSS ، من الصعب عدم البدء ببعض النصائح غير الأصلية ، ولكن الوقحة:

استخدم معالج CSS المسبق.

Sass هي لغة امتدادات CSS الأكثر نضجًا واستقرارًا وقوة في العالم.

هناك نوعان من الصيغ المتاحة لـ Sass. الأول ، المعروف باسم SCSS (Sassy CSS) والمستخدم في جميع أنحاء هذا المرجع ، هو امتداد لبناء جملة CSS. توفر الصيغة الثانية والأقدم ، والمعروفة باسم بناء الجملة ذي المسافة البادئة (أو أحيانًا "Sass" فقط) ، طريقة أكثر إيجازًا لكتابة CSS.

قم بتجميع المحددات الخاصة بك: استخدمextend في SASS.

من خلال تجميع المحددات الخاصة بك ، أو استخدامextend في @extend ، يجب أن تساعد في الحفاظ على الكود الخاص بك جافًا (لا تكرر الأمر بنفسك).

كود تالف:

 p { font-size: 22px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1 { font-size: 41px; color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

كود جيد:

 .font-smoothing { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p { font-size: 22px; @extend .font-smoothing; } h1 { font-size: 22px; @extend .font-smoothing; }

استخدم وحدات rem بدلاً من وحدات البكسل في CSS.

استخدم REMs للأحجام والمسافات ، على سبيل المثال أحجام الخطوط التي يتم إجراؤها بناءً على font-size لعنصر <html> الجذر. كما أنها تسمح لك بتوسيع نطاق مشروع بأكمله بسرعة عن طريق تغيير حجم خط الجذر (على سبيل المثال عند استعلام وسائط معين / حجم شاشة).

ستكتب رمزًا أقل لطرق العرض سريعة الاستجابة:

كود تالف:

 p { font-size: 22px; padding: 10px; } @media (max-width: 767px) { p { font-size: 16px; padding: 5px; } }

كود جيد:

 html { font-size: 14px; } @media (max-width: 767px) { html { font-size: 12px; } } p { font-size: 1.6rem; padding: 1rem; }

حاول تجنب وجود ارتفاع أو عرض ثابت في CSS.

حاول تجنب وجود ارتفاع أو عرض ثابت في CSS. يمكن إنشاء الارتفاعات من خلال وجود محتوى داخلي + حشوات ويمكن تحديد العرض بواسطة نظام شبكة (استخدم شبكة متداخلة إذا لزم الأمر).

كود تالف:

 <footer class="text-center"> <h2>Let's Get In Touch!</h2> <hr> <p>Ready to start your next project with us?</p> </footer>

 #footer { height: 130px; }

كود جيد:

 <footer class="text-center"> <h2>Let's Get In Touch!</h2> <hr> <p>Ready to start your next project with us?</p> </footer>

 #footer { padding-top: 23px; padding-bottom: 47px; }

تأكد من استخدام العنصر الأصلي مرة واحدة فقط في SCSS.

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

كود تالف:

 .section-parent-class { position: relative; h2 { color: #ff0; } header { margin: 2rem 1rem; } } @media (max-width: 767px) { .section-parent-class { footer { padding: .5rem; } } }

كود جيد:

 .section-parent-class { position: relative; h2 { color: #ff0; } header { margin: 2rem 1rem; } footer { @media (max-width: 767px) { padding: .5rem; } } }

فكر في العناصر التي ستتأثر قبل كتابة قاعدة CSS.

فكر دائمًا في العناصر التي ستتأثر قبل كتابة أي قاعدة CSS. إذا لم تكن تغييراتك شائعة ، فاكتب القواعد الخاصة بك بطريقة تؤثر فقط على عنصر معين ولا شيء آخر.

كود تالف:

 /* Commonly used class */ .title { color: #008000; }

كود جيد:

 /* Specify it not to affect other titles */ .section-blog .title { color: #008000; }

حاول البحث عن قواعد ومتغيرات CSS الحالية قبل كتابة متغيرات جديدة.

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

هذا مهم بشكل خاص عند العمل مع التطبيقات الكبيرة.

كود تالف:

 .jumbotron { margin-bottom: 20px; }

كود جيد:

 // change $jumbotron-padding from _variables.scss .jumbotron { margin-bottom: $jumbotron-padding; }

استخدم قواعد محددة.

إذا كانت للخلفية خاصية واحدة ، فإننا نحدد تلك الخاصية ، ولكن إذا كانت لها خصائص خلفية مختلفة ، فيمكننا أن نعطيها إعلانًا واحدًا.

كود تالف:

 .selector { background: #fff; }

كود جيد:

 .selector { /* This way background image will not be overwritten if there is any */ background-color: #fff; }

استخدم خصائص وقيم الاختزال.

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

كود تالف:

 img { margin-top: 5px; margin-right: 10px; margin-bottom: 25px; margin-left: 10px; } button { padding: 0 0 0 20px; }

كود جيد:

 img { /* Shorthand style */ margin: 5px 10px 25px; } button { /* Don't play with shorthand too much */ padding-left: 20px; }

استخدم em بدلاً من px لارتفاع الخط.

يمنحنا استخدام وحدات em و px مرونة في تصميماتنا والقدرة على توسيع نطاق العناصر لأعلى ولأسفل بدلاً من الوقوع في أحجام ثابتة. يمكننا استخدام هذه المرونة لجعل تصميماتنا أسهل في التعديل أثناء التطوير وأكثر استجابة وكذلك السماح لمستخدمي المتصفح بالتحكم في النطاق العام للمواقع لتحقيق أقصى قدر من القراءة.

كود تالف:

 p { font-size: 12px; line-height: 24px; }

كود جيد:

 p { font-size: 12px; line-height: 2em; /* or just line-height: 2; */ }

استخدم فئات Bootstrap قدر الإمكان.

على الرغم من أن هذه القاعدة يمكن أن تنطبق على أطر عمل واجهة المستخدم بشكل عام ، إلا أنني أستخدم Bootstrap كمثال ، لأنها أشهر مكتبة مكونة للواجهة الأمامية في العالم.

يتيح لك Bootstrap استخدام الكثير من الفصول الدراسية الجاهزة ، مما يجعل عملك أسهل. حاول استخدام فئات Bootstrap قدر الإمكان لعمل المزيد من الترميز المستند إلى HTML.

كود تالف:

 <section class="without-bootstrap"> <div class="first-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> <div class="second-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> </section>

 .first-column, .second-column { width: 25%; float: left; padding-left: 15px; padding-right: 15px; } ...

كود جيد:

 <section class="row"> <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> </section>

تخصيص إطار العمل الخاص بك بشكل صحيح.

يعتمد Bootstrap على ملف variables.scss ، والذي يسمح لك بسهولة تكوين الواجهة الأمامية وتخصيصها دون كتابة سطر واحد من التعليمات البرمجية. بخلاف ذلك ، إذا كنت ستكتب جميع التخصيصات يدويًا بنفسك ، فمن الأفضل عدم استخدام إطار عمل على الإطلاق.

يتجنب بعض المطورين تغيير variables.scss ، معتقدين أنهم سيظلون قادرين على ترقية Bootstrap إلى إصدار جديد دون الكثير من المتاعب ، ولكن يمكن أن تكون مهمة شاقة. حتى التحديثات الطفيفة تتطلب من المطورين قراءة التغيير ، وتصفح جميع الترميز و CSS ، والترحيل إلى الإصدار الجديد يدويًا.

كود تالف:

 navbar { padding: 20px 10px; } .carousel-indicators { li { width: 6px; height: 6px; margin-right: 3px; margin-left: 3px; } }

كود جيد:

 $navbar-padding-y: ($spacer / 2) !default; $navbar-padding-x: $spacer !default; $carousel-indicator-width: 30px !default; $carousel-indicator-height: 3px !default; $carousel-indicator-spacer: 3px !default;

لا تقم بالكتابة فوق عرض .container .

حاول عدم الكتابة فوق عرض .container . حاول استخدام نظام الشبكة بدلاً من ذلك ، أو قم فقط بتغيير عرض الحاوية في _variables.scss . إذا كنت بحاجة إلى تقليل عرضه ، فما عليك سوى استخدام max-width بدلاً من العرض. في هذه الحالة ، .container من Bootstrap كما هو في طرق العرض سريعة الاستجابة.

كود تالف:

 .container { @media (min-width: $screen-lg-min) { width: 1300px; } }

كود جيد:

 // change $container-lg from _variables.scss .container { @media (min-width: $screen-lg-min) { width: $container-lg; } }

استخدم فئات Bootstrap 4 واكتب أقل من CSS.

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

كود تالف:

 <div class="flex-ex"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div> <div class="flex-ex flex-reverse"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div>

 .flex-ex { display: flex; > div { padding: 2px; } &.flex-reverse { flex-direction: row-reverse; } li { list-style: none; padding: .5rem; } }

كود جيد:

 <ul class="list-unstyled list-inline d-flex flex-row"> <li class="p-2">Flex item 1</li> <li class="p-2">Flex item 2</li> <li class="p-2">Flex item 3</li> </ul> <ul class="list-unstyled list-inline d-flex flex-row-reverse"> <li class="p-2">Flex item 1</li> <li class="p-2">Flex item 2</li> <li class="p-2">Flex item 3</li> </ul>

الآن يمكننا تعيين فئات لعنصر لإزالة كل الحدود أو بعض الحدود.

كود تالف:

 <div class="border-example2 py-5"> <span class="border0"></span> <span class="border-top0"></span> <span class="border-right0"></span> <span class="border-bottom0"></span> <span class="border-left0"></span> </div>

 border-example2 { > span { width: 100px; height: 100px; display: inline-block; margin: .50rem; background-color: #e1e1e1; border: 1px solid; &.border0 { border: none; } &.border-top0 { border-top: none; } &.border-right0 { border-right: none; } &.border-bottom0 { border-bottom: none; } &.border-left0 { border-left: none; } } }

كود جيد:

 <div class="border-example py-5"> <span class="d-inline-block m-2 border-0"></span> <span class="d-inline-block m-2 border-top-0"></span> <span class="d-inline-block m-2 border-right-0"></span> <span class="d-inline-block m-2 border-bottom-0"></span> <span class="d-inline-block m-2 border-left-0"></span> </div>

 .border-example { > span { width: 100px; height: 100px; background-color: #e1e1e1; border: 1px solid; } }

استخدم .col-sm-X إذا كان .col-md-X و .col-lg-X لهما نفس القيمة لـ X.

لا تكتب .col-md-X و .col-lg-X إذا كان .col-sm-X له نفس القيمة لـ X. على سبيل المثال ، ليست هناك حاجة لكتابة .col-lg-10 لأننا نكتب .col-md-10 ، نقوم تلقائيًا بتضمين .col-lg-10 فيه.

كود تالف:

 <ul class="press-list list-inline row"> <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li> <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li> </ul>

كود جيد:

 <ul class="press-list list-inline row"> <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li> <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li> </ul>

لا تستخدم .col-xs-12 .

لا تستخدم .col-xs-12 لأنه إذا لم يتم تعيين .col-xs-X ، فسيكون .col-xs-12 افتراضيًا.

كود تالف:

 <section> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>Services</h2> <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3> </div> </div> <div class="row text-center"> <div class="col-md-6 col-xs-12"> <h4>E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p> </div> </div> </div> </section>

كود جيد:

 <section class="text-center"> <div class="container"> <h2>Services</h2> <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3> <div class="row"> <div class="col-md-6"> <h4>E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p> </div> </div> </div> </section>

لا تستخدم reset.css ؛ استخدم normalize.css بدلا من ذلك.

إذا كنت تستخدم Bootstrap ، فسيتم تضمين normalize.css هناك بالفعل ، ولا داعي لتضمينه مرتين.

اتبع الإرشادات ، حتى لو لم تكن من أفضل الممارسات.

من أجل الاتساق ، من الأفضل دائمًا اتباع القواعد والإرشادات التي بدأت بها (سواء كانت تتعلق بالتسمية أو نمط الكود أو بنية الملف)

تغليف

آمل أن تكون قادرًا على التخلص من شيء مفيد وأنك ستفكر أكثر في كتابة الحد الأدنى من كود HTML و CSS مع أفضل الممارسات.

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

آمل أن أتوسع إلى مواضيع أكثر تقدمًا في المنشورات المستقبلية ، حيث أعتزم التحدث عن أتمتة عملية الترميز ، باستخدام مهام Gulp / Grunt ، و Linters ، وإضافات المحرر ، والأدوات التي تنشئ الكود ، وأدوات الذكاء الاصطناعي التي تكتب الكود بدلاً منك ، وغيرها مواضيع ذات صلة.

آمل أن تكون هذه قراءة ممتعة وغنية بالمعلومات. حظا سعيدا في مساعيك الترميز.

مزيد من القراءة على مدونة Toptal Engineering:

• كيفية التعامل مع رسوم SVG المتحركة في CSS