Back to iWebsmile.com

หยุดใช้ IDs Selector กับ CSS

หยุดใช้ IDs Selector กับ CSS

จริงๆ เรื่องนี้ไม่ใช่เรื่องใหม่แต่อย่างใด ในเมืืองนอกได้มีการเขียนเกี่ยวบทความนี้ไว้หลายครั้งมาก ซึ่งผมเองก็เพิ่งจะได้ลองศึกษาอ่านดู ก่อนอื่นเราต้องทำความเข้าใจก่อนว่า Selector ใน CSS นั้นจะมี Points อยู่ เช่น

Element Selector (body, ul, li) = 1 points
Class Selector (.classname) = 10 points
IDs Selector (#content) = 100 points
Attribute Selector (<a style=”….”>) = 1000 points
!important (background: #000 !important) = Win forever

การใช้ Class และ IDs นั้น เราจำได้สั้นว่า Class นั้นจะใช้ต่อเมื่อ มีการใช้งานซ้ำๆ กันหลายๆ ตำแหน่งในหน้าเดียวกันกันได้ เช่น

.colorRed { color: red; }
<h1 class=”colorRed”>Heading 1</h1>
<p>Lorem ipsum sitaemt</p>
<a class=”colorRed”>Read more</a>

ส่วน IDs Selector นั้นเราจะใช้ที่ ตำแหน่งที่มีการเรียกใช้เพียงแค่ครั้งเดียวใน 1 หน้า เช่น

<ul class=”ourTeam”>
<li id=”001″>นายกอ</li>
<li id=”002″>นายขอ</li>
<li id=”003″>นายคอ</li>
</ul>

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

นอกจากนี้คะแนนของ Selector ด้านบนระบุอยู่ชัดแล้วว่า IDs Selector นั้นมีคะแนนมากกว่า คือ 100 point ดังนั้น Browser จะให้ความสำคัญกับ IDs Selector มากกว่า

หลายคนสงสัยแล้วว่า เอ๋ะ!! แล้วในเมื่อ IDs Selector โหลดได้เร็วกว่า Class Selector แล้วทำไมถึงรณงค์ให้มาใช้ Class selector ละ อีกเหตุผลหนึ่ง นอกจากการใช้ Class และ IDs Selector ให้ถูกต้องแล้ว อัตราการโหลดใน Browser ก็มีส่วนสำคัญ ตารางด้านล่างนี้จะแสดงระยะเวลาของการโหลด CSS จาก Google Chrome version 12

 

ข้อมูลด้านบนนี้คือผลจากการทดสอบของ Steve Souders วิศวกรด้านประสิทธิภาพเว็บไซต์ จาก Google ได้ทดสอบแล้วว่า เมื่อใช้งาน IDs Selector นั้นสามารถเรียกได้เร็วกว่าเพียงแค่ 90.3มิลลิวินาที ส่วน Class Selector ใช้ 91.5 มิลลิวินาที แต่ถ้าหากว่า เมื่อใดที่เรามีการใช้งาน IDs Selector แล้วตามด้วย Elements ใดๆ ก็ตามจะทำให้ระยะเวลาในโหลดนานขึ้นไปถึง 104 มิลลิวินาที ซึ่งนานขึ้นอีกมากครับ

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

อ้างอิงจาก :

http://oli.jp/2011/ids/

http://screwlewse.com/2010/07/dont-use-id-selectors-in-css/

http://www.stevesouders.com/

Categories: CSS, Tips & Tricks

The difference between JPG and JPEG » « CSS Short hands

1 Comment

  1. There’s a terrific amount of knoelwdge in this article!

Leave a Reply

Your email address will not be published.

*


+ 1 = three

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© 2010-2013 iWebSmile — all right reserved.