10 ข้อเบสิคควรทำเมื่อเริ่มเขียน CSS part1


หน้าแรก CSS 10 ข้อเบสิคควรทำเมื่อเริ่มเขียน CSS part1

      การเขียนเว็บด้วย CSS นั้นก็เพื่อลดปริมาณการ coding ลง ถ้ายิ่งเขียนแล้วโค้ดเพิ่มมากขึ้น นั่นก็คงไม่ใช่วิธีการเขียนที่ถูกต้อง เพราะเว็บที่ใช้ CSS นั้นจะต้อง

  • ดาวน์โหลดเร็ว
  • แสดงผลเร็ว
  • แสดงผลเหมือนกันในหลาย browser
  • สามารถแก้ไขปรับปรุงเปลี่ยนแปลงได้ง่าย

1. Use external style sheets
   คุณควรใช้ CSS โดยการการเรียกจากภายนอกทุกครั้ง เท่าที่จะเป็นไปได้ แทนที่จะเขียนอยู่ใน xhtml ของคุณโดยตรง แน่นอนว่าวิธีนี้จะช่วยให้หน้าเว็ยเพจของคุณมีขนาดเล็กลง และก็จะทำให้ดาวน์โหลดได้เร็วมากขึ้น และก็ช่วยเซฟ Bandwitch อีกด้วย

<link rel="stylesheet" type="text/css" href="/css/styles.css" />

หรือสามารถเรียกโดยใช้ @import

<style type="text/css">       

    @import '/css/styles.css';       

</style>

2. Use CSS for all styling
หลาย tag ที่เราใช้กันใน html ไม่ว่าจะเป็นการ layout หรือจัดรูปแบบต่าง สามารถที่จะเขียนแทนที่ด้วย CSS ตัวอย่าง

Bad:  <table align="center">
Good: <table style="margin: auto">    

Bad:  <td valign="top">
Good: <td style="vertical-align: top">    

Bad:  <body bgcolor="#FFFFFF" marginwidth="10" marginheight="10"
                 leftmargin="10" rightmargin="10" topmargin="10">
Good: <body style="background: #fff; margin : 10px;">

ตัวอย่างนี้แสดงให้เห็นถึง การแทนที่กันได้ ของ css เท่านั้นครับ ส่วนรูปแบบการเขียนนั้น เรามาดูข้อต่อไป

3. Try to avoid using the ‘style’ attribute
เราควรหลีกเลี่ยงการเขียน style=”" ฝังลงใน tag ทำไมล่ะ?

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

เราจะใช้เวลาในการวางแผนล่วงหน้าซักเล็กน้อยครับ แล้วใช้ CSS classes and ID เข้าไปแทนที่ style จะทำให้ code ดูดีขึ้นมากเลย

4. Reproducing cellspacing=”0” with CSS
ลดการใช้ cellspacing=”0″ ด้วย css เรามาดูกัน

อย่างนี้สงสัยไม่ดี:    

    <table cellspacing="0" cellpadding="3" border="1">
        <tr>
            <td>Example</td>
        </tr>
    </table>    

อย่างนี้ดีกว่านะ:    

    <style type="text/css">
        table { border-collapse : collapse; }
        td { padding : 3px; border : 1px solid #000; }
    </style>    

    <table>
        <tr>
            <td>Example</td>
        </tr>
    </table>

5. Id’s once, classes many
มีหลายๆคนเลยนะครับ ที่ใช้ id กับ class อย่างสับสนปนเปกัน โดยไม่รู้ว่า มันใช้ต่างกันอย่างไร ให้จำไว้เลยนะครับว่า ID ใช้เมื่อมันมีอันเดียว 1 เดียว และเป็นอะไรที่สำคัญๆครับ ส่วน class จะใช้เมื่อมันมีหลายๆอัน ซ้ำๆกัน คล้ายๆกับ แม่กับลูกอะนะ แม่1 คนมีลูกหลายคนอะ อธิบายแบบชาวบ้านๆ :) อิอิ

แบบนี้ไม่ถูก:
    <p id="some-style">
        Para 1.
    </p>    

    <p id="some-style">
        Para 2.
    </p>    

แบบนี้ถูก:
    <p class="some-style" id="para-1">
        Para 1.
    </p>
    <p class="some-style" id="para-2">
        Para 2.
    </p>



ขึ้นไปด้านบน