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>
Dack Zee.. said,
August 4, 2007 @ 11:02 am
เพิ่งเข้ามาเว็บนี้ครั้งแรกครับ หาเว็บอย่างนี้มานานแล้ว ชอบมากๆ ขอให้ทีมงานสู้ๆๆ เป็นกำลังใจให้ครับ
utto said,
August 5, 2007 @ 2:46 pm
ไม่มีหรอกครับทีมงาน มีผมคนเดียวครับ
OLO said,
August 9, 2007 @ 6:22 pm
ไม่คิดว่า css จะมีแบบย่อๆ และวิธีใช้งานอย่างนี้ค่ัะ ครั้งก่อนสงสัยที่ทำไปไม่ช่วยลดโค๊ดเลย อิๆๆ
/
ขอบคุณสำหรับความมีน้ำใจแบ่งปันความรู้นะค่ะ
aomze said,
October 15, 2007 @ 5:49 pm
เปนเวบที่ดีมาก ให้ความรู้ดี ขอบคุณค่า
toey said,
October 30, 2007 @ 6:43 pm
ขอบคุณคะ ทำให้เข้าใจมากขึ้น ขอให้ช่วยทำต่อๆไปนะคะ
smile said,
January 30, 2008 @ 1:17 pm
Impressive mak mak leaw ka.
เก่งอย่างแบ่งปันจริงๆ ขอให้เจริญรุ่งเรืองยิ่งๆขึ้นไปนะคะ
ขอบคุณมากสำหรับความรู้
aekiji said,
February 13, 2008 @ 6:54 pm
ฮือๆๆ..ซึ้งจายยยย..มีเว็บดีๆแบบนี้ ขอบคุณมากคร้าบบบ
L said,
February 14, 2008 @ 1:53 pm
เป็นคนเก่งอย่างเดียวไม่ได้ ต้องเป็นคนดีอย่างคุณด้วย ขอบคุณคับ
pEo said,
February 15, 2008 @ 6:25 pm
เอ ถ้าผมเขียน table แบบนี้
<TABLE cellSpacing=0 cellPadding=0 width=730 border=0 >
<TR>
<TD WIDTH=470>Content</TD>
</TR>
<TR>
<TD WIDTH=250>Content</TD>
</TR>
</TABLE>
CSS จะเขียนยังไงครับ
ren said,
February 18, 2008 @ 1:20 am
ขอบคุณสำหรับความรู้ดีดีที่นำมาแบ่งปันนะคะ
ming9899 said,
March 26, 2008 @ 5:08 pm
เว็บนี้มีประโยชมากเลยครับจะเข้ามาอ่านเรื่อยๆ^^