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

You may also like...

8 Responses

  1. Candela says:

    Finding this post sloves a problem for me. Thanks!

  2. Romby says:

    Ah, i see. Well that’s not too ticrky at all!”

  3. Astou says:

    Thnkiing like that is really impressive

  4. Karina says:

    Always the best content from these proigdoius writers.

  5. Coding Clean and Semantic Templates | iBarGamehgfhgfhhttp://cheapnfl.cc[url=http://cheapnfl.cc]Where to Get Cheap NFL Jerseys[/url] dhgfhgfghgfhhttp://51cheapjerseys.com[url=http://51cheapjerseys.com]jersey cheap nflghfgdfdfhhttp://1cheapnfl.cc[url=http://1cheapnfl.cc]nfl jerseys in china

  1. 19/08/2013

    buy toms…

    wholesale louis vuitton belts for men Coding Clean and Semantic Templates | iBarGame…

  2. 23/08/2013

    Louis Vuitton handbags for cheap…

    tell authentic louis vuitton purse Coding Clean and Semantic Templates | iBarGame…

Leave a Reply

Your email address will not be published.