CleanCode-Css

การเขียน Code HTML แบบสะอาดลดความซับซ้อนของ tag div

เชื่อว่าตอนเริ่มต้นเขียน style sheet css ก็จะเริ่มจาก div มันไปซะทุกอย่าง แต่เมื่อพอเขียนไปนานๆ ก็จะเริ่มรู้สึกละว่าใช้มันมากเกินไป มันก็มีวิธิ ที่ลดการใช้แท็ก div ลงเพื่อการทำงานโปรเจคที่ใหญ่ๆ มีจำนวนหลายๆเพจ และทำร่วมกันหลายๆคน บางครั้งการทำงานอาจจะมี designer css ต้องทำงานร่วมกันตัดเว็บมากกว่า 2 คน เพื่อประโยชน์ต่อตนเองและเพื่อนร่วมงานและเป็นไปตามทิศทางเว็บไซต์แบบใหม่ที่จะมาในอนาคต

1.ลดแท็ก div ที่ไม่จำเป็น

หลายครั้งที่เราสร้าง div เพื่อมาครอบ form หรือ ul เพิ่อสร้างคุม layout ไม่ปล่อยให้มันลอย แต่เราสามารถ แทรกชื่อคลาส หรือไอดี เ้ข้าใส่เข้าไปได้เลย ดังรูปตัวอย่าง


บางครั้งที่ต้องมีหัวข้อหรือเนื้อหาอยู่ด้านใน เราก็ใช้ความสามารถของ css กำหนดให้เป็น display:block; ทำหน้าที่เหมือนเป็น div เพื่อลดการใช้ div ลงได้อีก ดังรูปด้านล่าง

กำหนด h4 เป็นหัวข้อเรื่องแล้วต่อจาก h4 อาจจะใช้ p หรือ span ต่อ เพื่อเอาไว้ใส่รายละเอียดหัวข้อเรื่องได้

2. Use Semantic Markups


บางครั้งเราก็ใช้ div มากเกินไป ซึ่งจริงๆควรใช้มาร์ค ให้ถูกต้องตามความหมาย code HTML documents

3.การลดการใช้แท็ก div อีกวีธีนึง

Minimize The Use of < div > Tags

นักพัฒนาเว็บไซต์ส่วนใหญ่ เพื่อการทำงานที่ง่ายก็จะลดจำนวนแท็ก div ลงเพื่อให้ง่ายต่อการแก้ไข อย่างแท็ก p ก็น่าใช้สำหรับ breadcrumb navigation

อีกตัวอย่างการลดแท็ก div ลงโดยการใช้ < span > เข้ามาช่วย

4.จัดเรียงย่อหน้า code

เพื่อให้ง่ายต่อการแก้ไข และค้นหาแท็ก div ในส่วนที่เราจะต้องทำการเพิ่ม หรือลด

อย่าลืม คอมเม้นต์อธิบายตัวแท็กไว้ด้วยนะครับ ว่าเป็นคลาสหรือไอดี ที่เกี่ยวกับอะไร

< !-- Ryan iBarGame -- >

Comments

comments

8 thoughts on “CleanCode-Css

  1. Pingback: buy toms

Leave a Reply

Your email address will not be published.