איך לכתוב קוד ברור ב HTML-CSS-JavaScript

יש בעיקרון שלושה דברים שניתן לעשות כדי לכתוב קוד ברור ב HTML-CSS-JavaScript.

להקפיד על קריאות

בפיתוח תוכנה, המונח קריאות (באנגלית: Readability) משמש לתאר כמה קל למפתח תוכנה או לצוות פיתוח תוכנה לקרוא ולהבין קובץ קוד מקור של תוכנה שלא הם כתבו בעצמם או שהם כתבו בעצמם אבל לא ערכו במשך שבוע או יותר (חודש, שנה וכו').

קריאות מושגת, לדוגמה, דרך המאפיינים להלן:

1. רכיבי קוד מקור התוכנה עברו קינון (nesting) טוב וברור.
2. פרוצדורות עברו שיום (naming) טוב וברור.
3. פרמטרים כמו קבועים ומשתנים עברו שיום (naming) טוב וברור.
4. הלקסיקון של שפת המחשב מכיל תוים ומילים שמפתחי התוכנה מכירים משפות אנושיות.
5. התחביר של שפת המחשב ברור מאד כך ששילובי תוים הם ברורים ואינטואיטיביים ולא מבלבלים (לדוגמה, אנשים יכולים להתבלבל בין סימן שוויון אחד לצורך השמה לבין שני סימני שוויון לצורך השוואה ולכן עדיף תו מיוחד לכל אחת משתי פעולות אלה).
6. הימנעות משימוש בתחביר מקוצר (sugar syntax).
7. הימנעות משימוש בספריות קוד (libraries) ככל הניתן. לדוגמה הימנעות משימוש ב jQuery ככל הניתן כשכותבים JavaScript.

ייתכנו עוד עקרונות מוגדרים, כגון הקפדה על סטנדרטיי קידוד (coding standards) של פריימוורק קהילתי נפוץ.

להשתמש בהערות קוד

הערת קוד היא הערה בשפת תקשורת כללית העטופה בתחביר של שפת מחשב מסוימת.
הערת קוד נכתבת לעתים קרובות בתוך תחום קוד במטרה לבאר חלקי קוד מסוימים (לרוב מורכבים מאד).

מפתחי תוכנה רבים מעידים שלפעמים אם הם מסתכלים על קוד מסוים שהם כתבו חודש או שבוע ואף לפעמים יום לאחר מכן הם לא בדיוק זוכרים מה הם עשו ומה הם ניסו להשיג בכך או לא נזכרים בכך במהירות מספקת אך הערות עוזרות להם למנוע תופעה זו.

באופן כללי, לכל שפת מחשב יש את התחביר שלה להוספת הערה; חלק משפות המחשב מאפשרות הערה רק בשורה בודדה וחלק מאפשרות הערה רבת שורות.

דוגמה

בשפת JavaScript ניתן להוסיף הערה חד-שורתית בתחביר זה:

// This is a single-line comment

וכן בשפת JavaScript ניתן גם להוסיף הערה רב-שורתית בתחביר זה:

*/
This is a
multi-line
comment
*/

• אני אישית נוטה לתחום הערת קוד חד שורתית עם סימן נקודה (.) כי זה שונה אסתטית מתחימה של קוד בשפת JavaScript אשר בעיקר איתה אני מתכנת.

לנקוט גישה מודולרית בקידוד

המונח מודולריות ראוי למאמר עצמאי אבל בהקשר זה (HTML-CSS-JavaScript) העיקר הוא פיצול קוד המקור לקבצים שונים המבצעים כל אחד פעולה אחרת, ככל שהדבר אפשרי. 

בשפת HTML ניתן להשיג מודולריות דרך כתיבת הקוד בתוך קבצי PHP הכוללים include לקבצים אחרים.

בקבצי JavaScript מריצים סקריפטים שונים לפי תנאי מוגדר היטב.

בקבצי CSS ניתן להשיג מודולריות דרך מתן שמות שונים לקבצים לפי הקשר (כגון header.css, fotter.css וכדומה).

הערות כלליות

• תמיד טוב להשתמש בשפת מחשב נגישה עם תחביר שכולל כמה שפחות שימוש בתוים קטנים כמו גרש יחיד ('), בקטיק (`) וגרש כפול ("). עם זאת, שפת JavaScript, לפחות בגרסאות סביב שנת 2025, כוללת שימוש נרחב בתוים אלה.