แนวทางการตรวจสอบโค้ดสำหรับ CSS, JS และ HTML


9

ฉันถูกขอให้สร้างแนวทางสำหรับการตรวจสอบ CSS, JS และ HTML ฉันรู้ว่ามีแนวทางการเข้ารหัสสำหรับ JS แต่ฉันไม่รู้เกี่ยวกับ HTML และ CSS ในการตรวจสอบ JS ฉันจะทำตามแนวทางเหล่านั้นอย่างแน่นอนและกล่าวถึงพวกเขา แต่ CSS และ HTML เป็นอย่างไร นอกเหนือจากข้อผิดพลาดเชิงตรรกะและปัญหาการเยื้องสิ่งใดที่ฉันต้องตรวจสอบเมื่อฉันตรวจสอบมาร์กอัปและหรือ CSS?


1
นี่เป็นเพียง HN วันนี้อาจเป็นจุดเริ่มต้นที่ดี taitems.github.com/Front-End-Development-Guidelines
agradl

คำตอบ:


5

บางสิ่งที่จะมองหา:

  • มีการระบุข้อมูลที่มีโครงสร้างโดยใช้แท็ก HTML ที่เหมาะสมหรือไม่ H1- H6สำหรับส่วนหัวUL/ OLและLIสำหรับรายการเป็นต้น?
  • จะไม่มีแท็กมรดก HTML ( <b>, <i>, <center>, <font>) ใช้?
  • ไซต์ใช้จำนวนมาร์กอัปน้อยที่สุดเท่าที่เป็นไปได้หรือไม่
  • ข้อมูลสไตล์ถูกส่งออกไปยังไฟล์ CSS หรือไม่
  • Javascript ทั้งหมดถูกทำให้เป็นภายนอกหรือไม่ รวมถึงเครื่องมือจัดการเหตุการณ์?
  • ชื่อคลาส CSS อ้างถึงฟังก์ชันในหน้า ( img-caption) และไม่ใช่แบบฟอร์ม ( bold-red) หรือเนื้อหา ( pink-elephant) หรือไม่?
  • รูปภาพในรูปแบบที่เหมาะสม (PNG หรือ JPEG หรือไม่ขึ้นอยู่กับประเภท)
  • มีการใช้ห้องสมุด Javascript เวอร์ชันย่อขนาดเล็กสุดหรือไม่?
  • อีกทางเลือกหนึ่งคือลดขนาดไฟล์ Javascript และ CSS ที่พัฒนาขึ้นในเครื่องหรือไม่
  • HTML / CSS ตรวจสอบความถูกต้องหรือไม่
  • มีการใช้ YSlow (หรือคล้ายกัน) เพื่อตรวจสอบ / เพิ่มประสิทธิภาพหรือไม่
  • (ส่วนใหญ่) [SEO] เว็บไซต์สามารถเข้าถึงได้ด้วย Javascript หรือไม่
  • [SEO] เนื้อหาที่เกี่ยวข้องมากที่สุดอยู่ที่ด้านบนสุดของ HTML หรือไม่

ฉันเพิ่งพบหนังสือของ Steve Saunders บนเว็บไซต์ที่เร็วขึ้น มันค่อนข้างมีประโยชน์และบางจุดที่คุณพูดถึงเป็นสิ่งที่ดี
Kumar

0

หนึ่งในองค์ประกอบที่สำคัญของรูปแบบที่ดีในรูปแบบ HTML คือการเพิ่มประสิทธิภาพของความก้าวหน้า ซึ่งหมายความว่าเค้าโครง HTML จะแสดงผลที่ดีแม้ไม่มี CSS หรือ JavaScript จากนั้นเมื่อประมวลผล JS / CSS แล้วมันจะดูดีขึ้น (เช่น<select>ดรอปดาวน์HTML แบบเก่าจะกลายเป็นภาพเคลื่อนไหว)

สิ่งนี้เกี่ยวข้องกับมาร์กอัปที่ไม่ล่วงล้ำ แทนการอย่างใดอย่างหนึ่งจะใช้<font style="color:red;font-size:16pt">Hello</font><div class="red-colored-big-fond">Hello</div>

เหมือนกันกับ JavaScript แทนที่จะมี<button onclick="javascript:alert('a');">Clickme</button>ใครต้องการระบุ class / ID ของปุ่มและกำหนดเป้าหมายจาก JavaScript นอกจากนี้ยังทำให้รหัสมาร์คอัปของคุณง่ายต่อการบำรุงรักษา


0

ตรวจสอบว่ามาร์กอัพจำนวนน้อยที่สุดถูกใช้เพื่อทำงานให้สำเร็จ ตรวจสอบให้แน่ใจว่ามาร์กอัปมีความหมายเช่นกันอย่าใช้เมื่อแท็กทำสิ่งเดียวกันและให้ข้อมูลเพิ่มเติม ตรวจสอบว่าช่วงเวลานั้นไม่ได้ถูกสร้างขึ้นจากองค์ประกอบบล็อกและในทางกลับกัน

นอกจากนี้ alex ยังนำเสนอจุดที่ดีในทางอ้อม ตรวจสอบให้แน่ใจว่าไม่มีใครใช้ชื่อ class เช่น "red-colour-big-font" เพราะประมาณ 20 วินาทีหลังจากที่มันถูกนำไปใช้กับคนจริงจะเปลี่ยนเป็นฟอนต์สีน้ำเงินเล็ก ๆ ฉันเห็น CSS นี้จริงๆแล้ว:

.arial12pt { font-family: Verdana; font-size: 8pt; }

ทุกสิ่งในมาร์กอัปของคุณควรอธิบายว่าหน้านั้นเป็นอย่างไร ฉันเห็นด้วยอย่างแน่นอนเกี่ยวกับการปรับปรุงที่ก้าวหน้า แต่อีกครั้งในทางอ้อม หน้านั้นไม่มีข้อกำหนดให้ดูได้ทุกที่ใกล้เคียงกับ CSS โดยที่ไม่มีมัน อย่าพยายามทำให้มันดูเหมือนกันเพราะคุณจะกลับมาที่พื้นโต๊ะและ spacer.gif


0

เท่าที่ HTML ไปฉันจะชี้ไปที่มีลำดับชั้นและการเยื้องในไฟล์ของฉัน ตัวอย่างเช่นถ้าฉันมีกลุ่ม divs:

<div id="content">
   <div id="post">
     <div class="title">
       Blah Blah Title
     </div>
   </div>
</div>

ฉันคิดว่ามันค่อนข้างชัดเจนกับคนส่วนใหญ่ที่สร้างเลย์เอาต์และเทมเพลต แต่บ่อยกว่าที่ฉันเห็น HTML ที่อ่านไม่ออกซึ่งไม่มีลำดับชั้นโครงสร้างใด ๆ เลยทำให้อ่านคนอื่นได้ยาก ฉันเดาว่ามาจากพื้นหลัง CS มากกว่านี้เป็นสิ่งที่ติดอยู่ในใจของฉัน เช่นเดียวกันกับ CSS เช่นกัน สมมติว่าคุณกำลังออกแบบ div:

#whatever{
    background-image: url('blah.gif');
    color: #FFF000;
}

การเยื้องทำให้ง่ายต่อการอ่านอย่างรวดเร็วยิ่งขึ้นเมื่อคุณคุ้นเคยกับภาษาอื่นที่มีความหลากหลายเช่น PHP / Ruby / ก็ตาม อีกครั้งมันขึ้นอยู่กับวิธีที่คุณทำงานได้ดีที่สุด แต่เมื่อคนอื่นอ่าน HTML ของฉันฉันชอบที่จะทำให้มันเป็นระเบียบ :)

นอกจากนี้ตามที่กล่าวไว้ข้างต้นคุณควรตั้งชื่อคลาส CSS และรหัสที่เกี่ยวข้องกับเลย์เอาต์ของคุณโดยเฉพาะอย่างยิ่งเมื่อมีปัญหา (เช่นการตั้งชื่อตัวแปรและวิธีการในภาษาอื่น) สิ่งอื่นที่ต้องระวังคือ "การคาดเดาและตรวจสอบ" ของระยะขอบช่องว่างภายในและปัญหาการจัดตำแหน่งอื่น ๆ สิ่งที่ฉันพยายามหลีกเลี่ยงบ่อย ๆ คือการใส่ตัวเลขติดลบในระยะขอบและแผ่นรอง มันอาจสร้างความสับสนหากคุณไม่ได้สร้างเลย์เอาต์ด้วยตนเองและหากคุณต้องการกลับมาใช้มันในภายหลังและแก้ไขมันคุณอาจต้องยกเครื่องใหม่ ในความคิดของฉันมันเป็นความคิดที่ดีเสมอที่จะไม่ลองอะไรที่ hokey หรือ "kludgy" ใน CSS แม้ว่ามันจะดูดีก็ตาม โดยปกติจะมีวิธีที่ดีกว่าในการทำแม้ว่าคุณจะต้องปรับโครงสร้าง CSS ของคุณ!


0

สำหรับ Javascript ฉันมักจะต้องการให้มันตรวจสอบกับ JSLint ฉันสามารถคิดถึงข้อบกพร่องมากมายที่ JSLint จับได้ว่าไม่ได้ใช้มันเป็นเรื่องที่บ้า


0

ฉันเจอเอกสารมาตรฐานที่ฉันชอบ ฉันจะสะท้อนสิ่งที่พูดเกี่ยวกับการปรับปรุงแบบก้าวหน้า โดยทั่วไปหากคนอื่นเขียน HTML / CSS คุณควรจะสามารถมองเห็นมันได้ในภายหลังและรู้สึกประหลาดใจที่มาร์กอัปที่ไม่เลวนั้นน่าพึงพอใจและสามารถปรับแต่งสไตล์ที่เรียบง่ายได้อย่างง่ายดายและมีประสิทธิภาพ

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.