เขียน CSS ใช้ Class เยอะหรือน้อยถึงจะดี ?

หลังจากการเข้ามาของ css ทำให้คนเขียนโค้ดหันมาใส่ class ให้กับ html elements มากขึ้น เพื่อจุดประสงค์ในการกำหนดสไตล์ให้กับ element นั้นๆ บางคนใส่มาก บางคนใส่น้อย คำถามคือ แล้วแบบไหนมันดีกว่ากัน ?

Class ไม่ได้มีไว้กำหนดสไตล์ให้กับ HTML Elements

W3C Recommendation เขียนไว้ว่า id และ class นั้นต่างก็เป็น “Element Identifiers” หรือตัวที่ทำหน้าที่แยกแยะ element ว่าใครเป็นใครนั่นเอง ซึ่งหมายความว่ามันไม่ได้ถือกำเนิดขึ้นมาเพื่อให้เราใช้เป็น css selector แต่อย่างใด (แต่ก็ไม่ได้แปลว่าเราจะใช้มันเป็น selector ไม่ได้) ด้วยเหตุผลนี้เอง ที่ทำให้คนเขียนโค้ดบางส่วน ไม่นิยมใส่ class ให้กับ html หากไม่จำเป็นจริงๆ

แนวคิด Classless CSS

“Classless CSS” คือการเขียนโค้ดโดยลดการใช้ class ให้เหลือน้อยที่สุด ซึ่งมันจะมีข้อดีตรงที่โค้ดของเราจะสะอาดขึ้น สมมติเดิมโค้ด html ของเราเป็นแบบนี้

<div class="primary">
    <div class="latest-news-box">
        <ul class="latest-news-list">
            <li class="latest-news-item">
                <a class="latest-news-link" href="#">
                    <img class="latest-news-image" src="image.png" alt="">
                </a>
            </li>
        </ul>
    </div>
</div>

เราจะเห็นว่า class ของเราค่อนข้างเยอะไปหน่อย เราเลยหันมาเขียนแบบ classless แทน โค้ด html ของเราก็จะสั้นลงเหลือแค่นี้

<div class="primary">
    <div class="latest-news">
        <ul>
            <li>
                <a href="#">
                    <img src="image.png" alt="">
                </a>
            </li>
        </ul>
    </div>
</div>

การเขียนแบบ classless นั้นไม่ได้หมายความว่ามันจะไม่มี class หลงเหลืออยู่เลย แต่จะหมายถึงการใส่ class เฉพาะ elements ที่จำเป็นจริงๆ เท่านั้น เช่น container หลักๆ เป็นต้น แล้วเวลาจะกำหนดสไตล์ให้กับ elements ข้างใน เราก็จะใช้ descendant selector หรือ child selector เข้ามาช่วย

ผลเสียจากการใช้ Class น้อยเกินไป

อย่างไรก็ตาม การใช้ class น้อยเกินไปนั้น ก็ต้องแลกมาด้วย performance ที่ลดลงตามไปด้วย จากตัวอย่างก่อนหน้านี้ หากเราจะกำหนดสไตล์ให้กับ img โค้ด css ของเราจะได้ประมาณนี้

.primary .latest-news ul li a img { }

จากข้อเท็จจริงเกี่ยวกับการอ่าน selectors ของ web browsers ที่ได้พูดถึงในบทความ “เขียน CSS Selectors อย่างไรให้มีประสิทธิภาพ ?” การใช้ descendant selector และ child selector นั้นจะมีปัญหาในเรื่องของ performance ยิ่งเราใช้กับเว็บที่มี html elements มากๆ performance ก็จะยิ่งลดลงอย่างเห็นได้ชัด

.latest-news-image { }

ส่วนการใส่ class ไปที่ element ที่เราต้องการจะกำหนดสไตล์เลย แม้ว่าจะดีต่อ performance ก็จริง แต่ก็จะส่งผลให้โค้ด html มี class เต็มไปหมด

บทสรุปเกี่ยวกับการใช้ Class

การจะตัดสินว่าควรใส่ class ให้กับ elements ไหนบ้างนั้น เราควรกำหนดให้ balance กันระหว่าง performance กับ ความสะอาดของโค้ด หากเรามี elements ที่ซ้อนกันหลายๆ ชั้น การเขียน selectors ไล่เข้าไปถึง element ที่อยู่ในสุด อาจไม่ดีต่อ performance และยังทำให้การ maintenance ทำได้ลำบากอีกด้วย เราอาจใช้วิธีใส่ class ให้กับ container หลักๆ รวมไปถึง container ย่อยๆ เข้ามาช่วย วิธีนี้จะลดความซับซ้อนของ selectors ลงได้พอสมควร ในขณะที่โค้ด html ก็ยังคงสะอาดอยู่