ไม่ว่าจะมีคนทำงานในโปรเจ็กต์เดียวกันกี่คน ตรวจสอบให้แน่ใจว่าโค้ดทุกบรรทัดดูเหมือนเขียนโดยคนคนเดียวกัน
1. ใช้ช่องว่างสองช่องแทนแท็บ - นี่เป็นวิธีเดียวที่จะรับประกันการแสดงผลที่สอดคล้องกันในทุกสภาพแวดล้อม
2. องค์ประกอบที่ซ้อนกันควรเยื้องหนึ่งครั้ง (เช่น ช่องว่าง 2 ช่อง)
3. สำหรับคำจำกัดความของแอตทริบิวต์ ตรวจสอบให้แน่ใจว่าใช้เครื่องหมายคำพูดคู่และอย่าใช้เครื่องหมายคำพูดเดี่ยว
4. อย่าเพิ่มเครื่องหมายทับต่อท้ายให้กับองค์ประกอบที่ปิดเอง – ข้อกำหนด HTML5 ระบุอย่างชัดเจนว่านี่เป็นทางเลือก
5. อย่าละเว้นแท็กปิดเพิ่มเติม
<!DOCTYPE html> <html> <หัว> <title>ชื่อหน้า</title> </หัว> <ร่างกาย> <img src="images/company-logo.png" alt="บริษัท"> <h1 class="hello-world">สวัสดีชาวโลก!</h1> </ร่างกาย> </html>
เพิ่มการประกาศโหมดมาตรฐานในบรรทัดแรกของหน้า HTML ทุกหน้าเพื่อให้แน่ใจว่ามีการนำเสนอที่สอดคล้องกันในทุกเบราว์เซอร์
<!DOCTYPE html> <html> <หัว> </หัว> </html>
ตามข้อกำหนด HTML5:
ขอแนะนำอย่างยิ่งให้ระบุแอตทริบิวต์ lang สำหรับองค์ประกอบรูท html เพื่อตั้งค่าภาษาที่ถูกต้องสำหรับเอกสาร ซึ่งจะช่วยให้เครื่องมือสังเคราะห์เสียงระบุการออกเสียงที่ควรใช้ ช่วยให้เครื่องมือแปลกำหนดกฎที่ควรปฏิบัติตามเมื่อแปล และอื่นๆ
<html lang="en-us"> - </html>
IE รองรับแท็กเฉพาะเพื่อกำหนดเวอร์ชันของ IE ที่ควรใช้ในการวาดหน้าปัจจุบัน เว้นแต่ว่ามีความต้องการพิเศษอย่างมาก วิธีที่ดีที่สุดคือตั้งค่าเป็นโหมด Edge เพื่อแจ้งให้ IE ทราบให้ใช้โหมดล่าสุดที่รองรับ
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
ด้วยการประกาศการเข้ารหัสอักขระอย่างชัดเจน คุณสามารถมั่นใจได้ว่าเบราว์เซอร์จะกำหนดวิธีการแสดงผลเนื้อหาของหน้าได้อย่างรวดเร็วและง่ายดาย ข้อดีคือ คุณสามารถหลีกเลี่ยงการใช้แท็กเอนทิตีอักขระใน HTML ได้ เพื่อให้ทุกอย่างสอดคล้องกับการเข้ารหัสเอกสาร (โดยปกติจะเป็นการเข้ารหัส UTF-8)
<หัว> <meta charset="UTF-8"> </หัว>
ตามข้อกำหนด HTML5 โดยทั่วไปไม่จำเป็นต้องระบุแอตทริบิวต์ type เมื่อแนะนำไฟล์ CSS และ JavaScript เนื่องจาก text/css และ text/javascript เป็นค่าเริ่มต้นตามลำดับ
<!-- CSS ภายนอก --> <link rel="stylesheet" href="code-guide.css"> <!-- CSS ในเอกสาร --> <สไตล์> - </สไตล์> <!-- จาวาสคริปต์ --> <script src="code-guide.js"></script>
พยายามปฏิบัติตามมาตรฐาน HTML และความหมาย แต่อย่าเสียสละการใช้งานจริง พยายามใช้แท็กให้น้อยที่สุดและรักษาความซับซ้อนให้น้อยที่สุดตลอดเวลา
ควรจัดเรียงแอตทริบิวต์ HTML ตามลำดับด้านล่างเพื่อให้แน่ใจว่าโค้ดสามารถอ่านได้
ระดับ
บัตรประจำตัว, ชื่อ
ข้อมูล-*
src สำหรับ พิมพ์ href ค่า
ชื่อ alt
บทบาท อาเรีย-*
class ใช้เพื่อระบุส่วนประกอบที่นำมาใช้ซ้ำได้สูง ดังนั้นจึงควรแสดงรายการไว้ก่อน รหัสนี้ใช้เพื่อระบุส่วนประกอบเฉพาะและควรใช้ด้วยความระมัดระวัง (เช่น บุ๊กมาร์กภายในหน้า) ดังนั้นจึงมาเป็นอันดับสอง
คุณสมบัติบูลีนสามารถประกาศได้โดยไม่มีค่า ข้อกำหนด XHTML กำหนดให้ต้องกำหนดค่า แต่ข้อกำหนด HTML5 ไม่ได้กำหนดไว้
สำหรับข้อมูลเพิ่มเติม โปรดดูที่ส่วน WhatWG เกี่ยวกับแอตทริบิวต์บูลีน:
หากแอตทริบิวต์บูลีนขององค์ประกอบมีค่า จะเป็นจริง หากไม่มีค่า จะเป็นเท็จ
หากคุณต้องกำหนดค่า โปรดดูข้อกำหนด WhatWG:
หากมีแอตทริบิวต์อยู่ ค่าของแอตทริบิวต์จะต้องเป็นสตริงว่างหรือ […] ชื่อตามรูปแบบบัญญัติของแอตทริบิวต์ โดยไม่มีช่องว่างนำหน้าหรือต่อท้าย
พูดง่ายๆ ก็คือไม่จำเป็นต้องกำหนดค่าใดๆ
เมื่อเขียนโค้ด HTML พยายามหลีกเลี่ยงองค์ประกอบหลักที่ซ้ำซ้อน หลายครั้งที่ต้องอาศัยการทำซ้ำและการปรับโครงสร้างใหม่จึงจะบรรลุผล โปรดดูกรณีต่อไปนี้:
<!-- ไม่ค่อยดีเท่าไหร่ --> <span class="อวตาร"> <img src="..."> </span> <!-- ดีกว่า --> <img class="อวาตาร์" src="...">
แท็กที่สร้างผ่าน JavaScript ทำให้เนื้อหาค้นหา แก้ไข และทำให้ประสิทธิภาพช้าลง หลีกเลี่ยงเมื่อคุณทำได้
1. ใช้ช่องว่างสองช่องแทนแท็บ - นี่เป็นวิธีเดียวที่จะรับประกันการแสดงผลที่สอดคล้องกันในทุกสภาพแวดล้อม
2. เมื่อจัดกลุ่มตัวเลือก ให้วางตัวเลือกแต่ละตัวไว้ในบรรทัดของตัวเอง
3. เพื่อให้อ่านโค้ดได้ง่าย ให้เพิ่มช่องว่างก่อนเครื่องหมายปีกกาเปิดของแต่ละบล็อกการประกาศ
4. วงเล็บปีกกาปิดของบล็อกการประกาศควรอยู่ในบรรทัดแยกกัน
5. ควรเว้นวรรคหลัง: ในแต่ละข้อความประกาศ
6. เพื่อการรายงานข้อผิดพลาดที่แม่นยำยิ่งขึ้น แต่ละข้อความควรอยู่ในบรรทัดของตัวเอง
7. ข้อความประกาศทั้งหมดควรลงท้ายด้วยเครื่องหมายอัฒภาค เครื่องหมายอัฒภาคหลังคำสั่งประกาศครั้งล่าสุดเป็นทางเลือก แต่ถ้าคุณไม่ใส่ โค้ดของคุณอาจมีข้อผิดพลาดได้ง่าย
8. สำหรับค่าแอตทริบิวต์ที่คั่นด้วยเครื่องหมายจุลภาค ควรแทรกช่องว่างหลังเครื่องหมายจุลภาคแต่ละตัว (เช่น box-shadow)
9. อย่าเว้นวรรคหลังเครื่องหมายจุลภาคภายในค่า rgb(), rgba(), hsl(), hsla() หรือ rect() ซึ่งช่วยแยกแยะค่าสีหลายสี (เฉพาะเครื่องหมายจุลภาค ไม่มีการเว้นวรรค) จากค่าแอตทริบิวต์หลายค่า (เครื่องหมายจุลภาคและช่องว่าง)
10. สำหรับค่าแอตทริบิวต์หรือพารามิเตอร์สี ให้ละเว้น 0 นำหน้าสำหรับทศนิยมที่น้อยกว่า 1 (เช่น .5 แทนที่จะเป็น 0.5; -.5px แทน -0.5px)
11/ค่า Hex ควรเป็นตัวพิมพ์เล็กทั้งหมด เช่น #fff อักขระตัวพิมพ์เล็กจะอ่านง่ายกว่าเมื่อสแกนเอกสารเนื่องจากรูปแบบจะแยกแยะได้ง่ายกว่า
12. ลองใช้ค่าเลขฐานสิบหกแบบย่อ เช่น ใช้ #fff แทน #ffffff
13. เพิ่มเครื่องหมายคำพูดคู่สำหรับแอตทริบิวต์ในตัวเลือก เช่น input[type="text"] เป็นทางเลือกในบางกรณีเท่านั้น แต่เพื่อความสอดคล้องของโค้ด ขอแนะนำให้ใช้เครื่องหมายคำพูดคู่
14. หลีกเลี่ยงการระบุหน่วยสำหรับค่า 0 เช่น ใช้ระยะขอบ: 0; แทนระยะขอบ: 0px;
/* CSS ไม่ดี */
.selector, .selector-รอง, .selector[type=text] {
ช่องว่างภายใน:15px;
ระยะขอบ:0px 0px 15px;
สีพื้นหลัง: RGBA (0, 0, 0, 0.5);
กล่องเงา: 0px 1px 2px #CCC,แทรก 0 1px 0 #FFFFFF
-
/* CSS ดี */
.ตัวเลือก,
.selector รอง
.selector[type="text"] {
ช่องว่างภายใน: 15px;
ขอบล่าง: 15px;
สีพื้นหลัง: rgba (0,0,0,.5);
กล่องเงา: 0 1px 2px #ccc, สิ่งที่ใส่เข้าไป 0 1px 0 #fff;
-คำสำแดงทรัพย์สินที่เกี่ยวข้องควรจัดกลุ่มเข้าด้วยกันและจัดเรียงตามลำดับต่อไปนี้:
การวางตำแหน่ง
แบบกล่อง
วิชาการพิมพ์
ภาพ
การวางตำแหน่งมาก่อนเนื่องจากจะลบองค์ประกอบออกจากโฟลว์เอกสารปกติ และสามารถแทนที่สไตล์ที่เกี่ยวข้องกับโมเดลของกล่องได้ รุ่นกล่องมาเป็นอันดับสองเนื่องจากเป็นตัวกำหนดขนาดและตำแหน่งของส่วนประกอบ
คุณสมบัติอื่นๆ มีผลเฉพาะภายในส่วนประกอบหรือไม่ส่งผลต่อคุณสมบัติสองกลุ่มแรก ดังนั้นจึงถูกจัดอันดับตามหลัง
.ประกาศคำสั่ง {
/* ตำแหน่ง */
ตำแหน่ง: แน่นอน;
ด้านบน: 0;
ขวา: 0;
ด้านล่าง: 0;
ซ้าย: 0;
ดัชนี z: 100;
/* รุ่นกล่อง */
จอแสดงผล: บล็อก;
ลอย: ขวา;
ความกว้าง: 100px;
ความสูง: 100px;
/* ตัวอักษร */
แบบอักษร: ปกติ 13px "Helvetica Neue", sans-serif;
ความสูงของเส้น: 1.5;
สี: #333;
การจัดแนวข้อความ: กึ่งกลาง;
/* ภาพ */
สีพื้นหลัง: #f5f5f5;
เส้นขอบ: 1px ทึบ #e5e5e5;
รัศมีเส้นขอบ: 3px;
/* อื่นๆ */
ความทึบ: 1;
-เมื่อเปรียบเทียบกับแท็กแล้ว คำสั่ง @import จะช้ากว่ามาก ซึ่งไม่เพียงเพิ่มจำนวนคำขอเพิ่มเติมเท่านั้น แต่ยังทำให้เกิดปัญหาที่คาดเดาไม่ได้อีกด้วย ทางเลือกอื่นได้แก่:
รวบรวมไฟล์ CSS หลายไฟล์เป็นไฟล์เดียวผ่านตัวประมวลผลล่วงหน้า CSS ที่คล้ายกับ Sass หรือ Less ฟังก์ชันการรวมไฟล์ CSS มีให้ผ่าน Rails, Jekyll หรือระบบอื่น ๆ
<!-- ใช้องค์ประกอบลิงก์ -->
<link rel="stylesheet" href="core.css">
<!-- หลีกเลี่ยง @imports -->
<สไตล์>
@import url("more.css");
</สไตล์>วางคำสั่งสื่อให้ใกล้กับกฎที่เกี่ยวข้องมากที่สุด อย่ารวมเป็นไฟล์รูปแบบเดียวหรือวางไว้ที่ด้านล่างของเอกสาร หากคุณแยกพวกเขาออกไป ทุกคนจะถูกลืมในอนาคตเท่านั้น ตัวอย่างทั่วไปได้รับด้านล่าง
.องค์ประกอบ { ... }
.element-อวตาร { ... }
.องค์ประกอบที่เลือก { ... }
@media (ความกว้างขั้นต่ำ: 480px) {
.องค์ประกอบ { ...}
.element-อวตาร { ... }
.องค์ประกอบที่เลือก { ... }
-สำหรับสไตล์ที่มีคำสั่งเดียว แนะนำให้วางคำสั่งในบรรทัดเดียวกันเพื่อให้อ่านได้ง่ายและแก้ไขได้อย่างรวดเร็ว สำหรับสไตล์ที่มีการประกาศหลายรายการ การประกาศควรยังคงแบ่งออกเป็นหลายบรรทัด
ปัจจัยสำคัญในการทำเช่นนี้คือการตรวจหาข้อผิดพลาด - ตัวอย่างเช่น เครื่องมือตรวจสอบ CSS ระบุว่ามีข้อผิดพลาดทางไวยากรณ์ในบรรทัด 183 หากเป็นคำสั่งเดียวในบรรทัดเดียว คุณจะไม่เพิกเฉยต่อข้อผิดพลาด หากมีหลายคำสั่งในบรรทัดเดียว คุณจะต้องวิเคราะห์อย่างระมัดระวังเพื่อหลีกเลี่ยงข้อผิดพลาด
/* ประกาศเดี่ยวในหนึ่งบรรทัด */
.span1 { ความกว้าง: 60px;
.span2 { ความกว้าง: 140px;
.span3 { ความกว้าง: 220px;
/* ประกาศหลายรายการ หนึ่งรายการต่อบรรทัด */
.สไปรท์ {
จอแสดงผล: อินไลน์บล็อก;
ความกว้าง: 16px;
ความสูง: 15px;
ภาพพื้นหลัง: url(../img/sprite.png);
-
.icon { ตำแหน่งพื้นหลัง: 0 0;
.icon-home { ตำแหน่งพื้นหลัง: 0 -20px;
.icon-account { ตำแหน่งพื้นหลัง: 0 -40px;ในกรณีที่คุณต้องตั้งค่าทั้งหมดอย่างชัดเจน คุณควรพยายามจำกัดการใช้การประกาศคุณสมบัติชวเลข การใช้คำประกาศทรัพย์สินโดยย่อในทางที่ผิดโดยทั่วไปมีดังต่อไปนี้:
ช่องว่างภายใน
ระยะขอบ
แบบอักษร
พื้นหลัง
ชายแดน
รัศมีชายแดน
ในกรณีส่วนใหญ่ เราไม่จำเป็นต้องระบุค่าทั้งหมดสำหรับการประกาศคุณสมบัติแบบชวเลข ตัวอย่างเช่น องค์ประกอบส่วนหัว HTML จำเป็นต้องตั้งค่าระยะขอบด้านบนและด้านล่างเท่านั้น ดังนั้นคุณจึงต้องแทนที่ค่าทั้งสองนี้เมื่อจำเป็นเท่านั้น การใช้การประกาศคุณสมบัติแบบชวเลขมากเกินไปอาจนำไปสู่รหัสที่ยุ่งเหยิง และอาจทำให้เกิดผลข้างเคียงที่ไม่ได้ตั้งใจ โดยทำให้เกิดการแทนที่ค่าคุณสมบัติโดยไม่จำเป็น
/* ตัวอย่างที่ไม่ดี */
.องค์ประกอบ {
ระยะขอบ: 0 0 10px;
พื้นหลัง: สีแดง;
พื้นหลัง: url("image.jpg");
รัศมีเส้นขอบ: 3px 3px 0 0;
-
/* ตัวอย่างที่ดี */
.องค์ประกอบ {
ขอบล่าง: 10px;
สีพื้นหลัง: สีแดง;
ภาพพื้นหลัง: url("image.jpg");
ขอบบนซ้ายรัศมี: 3px;
ขอบบนขวารัศมี: 3px;
-หลีกเลี่ยงการทำรังโดยไม่จำเป็น เนื่องจากถึงแม้คุณสามารถใช้การซ้อนได้ แต่ก็ไม่ได้หมายความว่าควรทำ ใช้การซ้อนเฉพาะเมื่อต้องจำกัดสไตล์ให้กับองค์ประกอบหลัก (เช่น ตัวเลือกสืบทอด) และมีหลายองค์ประกอบที่ต้องซ้อน
//โดยไม่ต้องทำรัง
.table > ส่วนหัว > tr > th { …
.table > ส่วนหัว > tr > td { …
//พร้อมทำรัง
.table > ส่วนหัว > tr {
> TH { … }
> td { …
-เพื่อปรับปรุงความสามารถในการอ่าน ให้เพิ่มช่องว่างระหว่างค่า ตัวแปร และตัวดำเนินการของนิพจน์ทางคณิตศาสตร์ที่อยู่ในวงเล็บ
// ตัวอย่างที่ไม่ดี
.องค์ประกอบ {
ระยะขอบ: 10px 0 @variable*2 10px;
-
//ตัวอย่างที่ดี
.องค์ประกอบ {
ระยะขอบ: 10px 0 (@ตัวแปร * 2) 10px;
-รหัสถูกเขียนและดูแลรักษาโดยผู้คน ตรวจสอบให้แน่ใจว่าโค้ดของคุณอธิบายตัวเอง มีความคิดเห็นดี และให้ผู้อื่นเข้าใจได้ง่าย ความคิดเห็นเกี่ยวกับโค้ดที่ดีสามารถสื่อถึงบริบทและวัตถุประสงค์ของโค้ดได้ อย่าเพียงกล่าวซ้ำชื่อส่วนประกอบหรือคลาส
สำหรับความคิดเห็นที่ยาวขึ้น อย่าลืมเขียนประโยคให้ครบถ้วน สำหรับความคิดเห็นทั่วไป คุณสามารถเขียนวลีที่กระชับได้
/* ตัวอย่างที่ไม่ดี */
/* ส่วนหัวโมดอล */
.modal-ส่วนหัว {
-
-
/* ตัวอย่างที่ดี */
/* องค์ประกอบการตัดคำสำหรับ .modal-title และ .modal-close */
.modal-ส่วนหัว {
-
- 1. เฉพาะอักขระตัวพิมพ์เล็กและขีดกลาง (ไม่ใช่ขีดล่างหรือตัวพิมพ์เล็ก) เท่านั้นที่สามารถปรากฏในชื่อคลาสได้ ขีดกลางควรใช้ในการตั้งชื่อคลาสที่เกี่ยวข้องกับการตั้งชื่อ (คล้ายกับเนมสเปซ) (เช่น .btn และ .btn-danger)
2. หลีกเลี่ยงการใช้คำย่อตามอำเภอใจมากเกินไป .btn หมายถึงปุ่ม แต่ .s ไม่สามารถแสดงความหมายใดๆ ได้
3.ชื่อชั้นเรียนควรสั้นที่สุดและมีความหมายชัดเจน
4. ใช้ชื่อที่มีความหมาย ใช้ชื่อที่จัดระเบียบหรือมีวัตถุประสงค์มากกว่าการนำเสนอ
5. ขึ้นอยู่กับคลาสพาเรนต์ที่ใกล้ที่สุดหรือคลาสพื้นฐานเป็นคำนำหน้าของคลาสใหม่
6. ใช้คลาส .js-* เพื่อระบุพฤติกรรม (ตรงข้ามกับสไตล์) และไม่รวมคลาสเหล่านี้ไว้ในไฟล์ CSS
/* ตัวอย่างที่ไม่ดี */
.ที { ... }
.สีแดง { ... }
.header { ... }
/* ตัวอย่างที่ดี */
.ทวีต { ... }
.สำคัญ { ... }
.twitter-header { ... } ใช้คลาสสำหรับองค์ประกอบทั่วไป ซึ่งจะช่วยเพิ่มประสิทธิภาพการเรนเดอร์
สำหรับส่วนประกอบที่เกิดขึ้นบ่อย ให้หลีกเลี่ยงการใช้ตัวเลือกแอตทริบิวต์ (เช่น [class^=”…”]) ประสิทธิภาพของเบราว์เซอร์อาจได้รับผลกระทบจากปัจจัยเหล่านี้
ตัวเลือกควรสั้นที่สุดเท่าที่จะทำได้ และพยายามจำกัดจำนวนองค์ประกอบที่ประกอบเป็นตัวเลือก ขอแนะนำไม่ให้เกิน 3 รายการ
จำกัดคลาสให้กับองค์ประกอบพาเรนต์ที่ใกล้ที่สุด (เช่น ตัวเลือกสืบทอด) เฉพาะเมื่อจำเป็นเท่านั้น (เช่น เมื่อไม่ได้ใช้คลาสที่มีคำนำหน้า คำนำหน้าก็เหมือนกับเนมสเปซ)
/* ตัวอย่างที่ไม่ดี */
ช่วง { ... }
.page-container #stream .stream-item .ทวีต .twitter-header .ชื่อผู้ใช้ { ... }
.อวตาร { ... }
/* ตัวอย่างที่ดี */
.อวตาร { ... }
.twitter-header .ชื่อผู้ใช้ { ... }
.ทวีต .อวตาร { ... }ตั้งค่าโปรแกรมแก้ไขของคุณดังต่อไปนี้เพื่อหลีกเลี่ยงความไม่สอดคล้องและความแตกต่างระหว่างโค้ดทั่วไป:
ใช้ช่องว่างสองช่องเพื่อแทนที่อักขระแท็บ (แท็บอ่อนหมายถึงการใช้ช่องว่างเพื่อแสดงอักขระแท็บ) เมื่อบันทึกไฟล์ ให้ลบอักขระช่องว่างต่อท้าย ตั้งค่าการเข้ารหัสไฟล์เป็น UTF-8 เพิ่มบรรทัดว่างที่ส่วนท้ายของไฟล์
โปรดดูเอกสารประกอบและเพิ่มข้อมูลการกำหนดค่านี้ลงในไฟล์ .editorconfig ของโปรเจ็กต์ของคุณ ตัวอย่างเช่น: อินสแตนซ์ .editorconfig ใน Bootstrap สำหรับข้อมูลเพิ่มเติม โปรดดูที่ EditorConfig