หากคุณต้องการเป็นผู้เชี่ยวชาญ CSS การใช้ตัวเลือก CSS ยังไม่เพียงพอ นอกจากนี้ยังอยู่ในการวางแผนโดยรวมของงาน การควบคุมขั้นตอนการทำงาน และปรับปรุงการบำรุงรักษาและประสิทธิภาพของสไตล์ชีต ในบทความนี้ Jina Bolton เลือกเทคนิคการใช้งาน CSS 10 เทคนิคจากนักออกแบบชั้นนำ 12 คน และแนะนำให้ทุกคนรู้จัก
เมื่อเร็วๆ นี้ ฉันมองหาวิธีสร้างสไตล์ชีตที่น่าสนใจมากขึ้น การใช้ CSS เราสามารถสร้างเว็บไซต์ที่ยอดเยี่ยมที่เราต้องการได้ และการเขียน CSS ก็มีความสุขในตัวมันเอง
จะสร้างสไตล์ชีตให้น่าดึงดูดยิ่งขึ้นได้อย่างไร? สไตล์ชีทของคุณควรมีคุณสมบัติอะไรบ้าง?
เมื่อไม่กี่เดือนที่ผ่านมา ฉันมีความยินดีที่ได้เข้าร่วมการประชุม Web Vision Conference ประจำปี 2007 ที่เมืองพอร์ตแลนด์ รัฐออริกอน สหรัฐอเมริกา สำหรับงานนี้ ฉันค้นคว้านักออกแบบ 12 คนที่มีส่วนช่วยในการออกแบบและพัฒนาเว็บไซต์อย่างโดดเด่น ผลการวิจัยนี้เมื่อรวมกับประสบการณ์การทำงานของฉันเอง ช่วยให้ฉันสรุปชุดวิธีดีๆ ในการทำสไตล์ชีตที่สวยงามได้
01. อย่าปล่อยให้ css มีแท็กมากเกินไป
การเชื่อมโยงหรือการนำเข้าสไตล์ชีตอาจฟังดูเป็นงานที่น่าสับสน แต่ฉันอยากจะเน้นว่าทำไมสิ่งนี้ถึงสำคัญมาก ฉันเคยเห็นนักพัฒนาเว็บไซต์จำนวนมากมีเอกสาร CSS ที่เรียบร้อยและมีการจัดระเบียบอย่างดี แต่ช้าๆ เพราะพวกเขาอาจไม่สามารถอัปเดตได้อย่างรวดเร็วในช่วงเวลาสั้นๆ หรือขี้เกียจเกินไปที่จะจัดการมัน สไตล์ชีทอันประณีตที่สร้างขึ้นก่อนหน้านี้ หายไปแล้ว.
ลองนึกภาพคุณกำลังทำงานกับเว็บไซต์ขนาดใหญ่ที่ต้องการเผยแพร่เนื้อหาหลายร้อยชิ้น เนื่องจากเวลามีจำกัด คุณจึงต้องทำการเปลี่ยนแปลงหรืออัปเดตอย่างรวดเร็วโดยการซ้อนหรือจัดเรียง CSS ปีแล้วปีเล่าที่ผ่านไป และนิสัยนี้ยังคงดำเนินต่อไป จนกระทั่งวันหนึ่งคุณได้รับแจ้งว่าเว็บไซต์กำลังจะได้รับการออกแบบใหม่ทั้งหมด (แต่เนื้อหาจะยังคงเหมือนเดิม) และคุณมีเวลาเพียงสัปดาห์เดียวในการสร้างมันขึ้นมา (รวมถึงการทดสอบด้วย)
โดยปกติแล้ว การอัปเดตสไตล์ชีตเป็นวิธีการที่ง่ายมาก เว้นแต่คุณจะทำการเปลี่ยนแปลงพื้นที่กระจัดกระจายของเว็บไซต์เป็นเวลานาน คุณไม่สามารถเข้าใจโครงสร้างสไตล์ชีตของเว็บไซต์โดยรวมได้ ตอนนี้คุณมีสองทางเลือก: ก. จัดระเบียบทุกอย่างและออกแบบใหม่ภายในหนึ่งเดือน (โชคดี);
อย่าปล่อยให้งานของคุณเป็นแบบนี้ การเชื่อมโยงหรือการนำเข้าสไตล์ชีทของคุณไม่ใช่เรื่องปกติ สร้างสไตล์ชีตที่สะอาดและเป็นระเบียบและเก็บไว้ที่นั่น แล้วคุณจะมีความสุขมากขึ้นในที่ทำงาน
หมายเหตุ: อย่าเพิ่มมาร์กอัปมากเกินไปในสไตล์ชีตของคุณ หากคุณพยายามสร้างสไตล์ชีตใหม่ทุกครั้งที่คุณอัปเดตหรือเพิ่มเนื้อหาใหม่ คุณจะต้องประสบปัญหาอย่างแน่นอน ลิงก์และสไตล์ชีตที่นำเข้ามากเกินไปจะทำให้การกำจัดจุดบกพร่องทำได้ยาก และทำให้สไตล์ชีตของคุณบำรุงรักษาได้ยาก เป็นเรื่องที่เข้าใจได้สำหรับเว็บไซต์ขนาดใหญ่ที่จะสร้างสไตล์ชีตแยกกันสำหรับส่วนต่างๆ เพียงระวังอย่าให้มากเกินไป
เป็นที่น่าสังเกตว่าการเพิ่มสไตล์ชีตจำนวนมากจะช่วยเพิ่มคำขอ http มากขึ้น ซึ่งอาจส่งผลต่อการทำงานในภายหลังด้วย นอกจากนี้ เบราว์เซอร์ Microsoft IE6 ยังมีข้อจำกัดบางประการเกี่ยวกับสไตล์ชีตการเชื่อมต่อ 32 รายการ -
02. ความหมายไม่ได้เป็นเพียงคำศัพท์ทางอุตสาหกรรมเท่านั้น
คุณรู้ไหมว่าฉันต้องพูดถึงมัน ความหมายจะเป็นเพื่อนที่ดีของคุณ นอกเหนือจากการเลือกองค์ประกอบที่เหมาะสมและมีความหมายที่สุดในการแสดงเนื้อหาของคุณแล้ว คุณยังต้องแน่ใจว่าคุณเลือกค่าแอตทริบิวต์คลาสและรหัสด้วย นอกเหนือจากงานของคุณ มันจะทำให้ชีวิตของคุณง่ายขึ้น (และยังจะทำให้ชีวิตของทีมงานของคุณง่ายขึ้นด้วย - ถ้าคุณทำงานเป็นทีม) ดูคำจำกัดความด้านล่าง:
.l13k { สี: #369;
ถ้าคุณเพิ่งมาทำงานแล้วเห็นคลาสนี้ในไฟล์ css นี้ คุณจะเจอคลาสนี้ทันทีหรือไม่? อาจเป็นไปไม่ได้เพราะชื่อของชั้นเรียนนี้อาจเป็นคำย่อ ดังนั้นจึงไม่มีวิธีที่ถูกต้องที่คุณจะบอกได้ทันที หรือบางทีคุณอาจใส่ไว้ตรงนั้นแล้วคุณก็รู้ความหมายของวันนี้ แต่รับประกันได้ไหมว่าคุณจะยังรู้ว่ามันหมายถึงอะไรในอีกหลายปีต่อมา?
ตอนนี้เรามาดูคำจำกัดความนี้:
.ซ้าย-สีฟ้า { สี: #369;
คุณอาจจะรู้ทันทีว่าตัวเลือกคลาสนี้ทำอะไรเหมือนกับที่คุณรู้ว่ามีโมดูลสีน้ำเงินในคอลัมน์ด้านซ้ายอยู่ที่นั่น นั่นหมายความว่ามันใช้งานได้ ฉันบอกไปแล้วว่าคุณอาจต้องออกแบบใหม่ภายในหนึ่งสัปดาห์ ในระหว่างการออกแบบใหม่ โมดูลนี้ถูกวางไว้ทางด้านขวาและยังคงเป็นสีแดง คลาสนี้ไม่มีมูลค่าที่มีอยู่อีกต่อไป ตอนนี้ฉันต้องเลือกว่าจะเปลี่ยนค่าแอตทริบิวต์ทั้งหมดหรือปล่อยไว้เฉยๆ (ซึ่งอาจนำไปสู่ความสับสนมากขึ้น)
ไม่ควรเพิ่มขนาดสีหรือความยาวและความกว้างให้กับแอตทริบิวต์ของคลาส คุณควรหลีกเลี่ยงค่าคุณสมบัติใดๆ ที่เป็นคำตามตัวอักษร คุณลักษณะโดยตรง (เช่น กล่อง) อาจนำไปสู่การแยกเนื้อหาได้
สุดท้ายนี้ เรามาดูรูปแบบการตั้งชื่อที่เหมาะสมกว่านี้กัน:
.รายละเอียดสินค้า { สี: #369;
ที่นี่คุณสามารถเห็นได้ รายละเอียดสินค้าที่กำหนดไว้ในรูปแบบนี้มีความชัดเจนมากไม่ว่าคุณจะเปลี่ยนแปลงอย่างไร
03.ประโยชน์ของการเพิ่มความคิดเห็น
หากความคิดเห็นของคุณได้รับการจัดระเบียบอย่างดีและอยู่ภายในขอบเขตของ CSS ให้ติดป้ายกำกับแต่ละส่วนให้ชัดเจน วิธีที่ดีที่สุดคือต้องแน่ใจว่าความคิดเห็นปรากฏให้เห็นเด่นชัดเพื่อให้สามารถค้นหาได้อย่างรวดเร็วเมื่อเลื่อนดูเนื้อหาที่สิบบรรทัด จากนั้นการแสดงความคิดเห็นในเอกสาร CSS ของคุณจะช่วยคุณหรือผู้อื่นได้มากในการพัฒนาในอนาคต ความคิดเห็นพื้นฐานส่วนใหญ่จะบอกเป็นนัยว่าทำไมจึงใช้กฎนี้ที่นี่
เคล็ดลับและหมายเหตุ
การเพิ่มความคิดเห็นสามารถช่วยให้คุณหรือนักพัฒนาในอนาคตหลีกเลี่ยงความสับสนที่ไม่จำเป็นได้ รักษานิสัยนี้ต่อไป ดูตัวอย่าง:
/* ปิดขอบสำหรับรูปภาพที่ลิงก์ */
img { เส้นขอบ: 0; }
เวลาและลายเซ็น
นักออกแบบและนักพัฒนาบางคนต้องการระบุวันที่และเวลาที่เอกสาร CSS ได้รับการอัปเดตครั้งล่าสุด พร้อมด้วยชื่อและสถานะเริ่มต้น ข้อมูลนี้สามารถให้ข้อมูลเกี่ยวกับผู้ที่เกี่ยวข้อง รวมถึงคำแนะนำว่าเอกสารล่าสุดคืออะไร
/* รูปแบบการพิมพ์ของ Sushimonster
อัปเดต: พฤหัสบดี 10.18.07 @ 17:15 น
ผู้เขียน : จิน่า โบลตัน
-------------------------------------------------- -------------------------------------------------- --*/
นี่เป็นความคิดที่ดี โดยเฉพาะอย่างยิ่งหากคุณทำงานเป็นทีม โปรดทราบว่าบางทีมจำเป็นต้องละเว้นข้อมูลนี้ (บางบริษัทไม่ต้องการมีชื่อและวันที่เหล่านี้ในเอกสาร) ดังนั้นจึงเป็นความคิดที่ดีที่จะใช้เวลา ดูสิ ข้อมูลนี้จำเป็นหรือไม่?
การจำแนกประเภทองค์กร
เป็นความคิดที่ดีที่จะใช้ความคิดเห็นเพื่ออธิบายส่วนต่างๆ ของ CSS ของคุณโดยย่อ ตัวอย่างเช่น หากประเภทส่วนหัวทั้งหมดถูกจัดกลุ่มไว้ด้วยกัน คุณจะต้องดูประเภทส่วนหัวทั้งหมดเพื่อแยกความแตกต่าง
/* ส่วนหัว
-------------------------------------------------- -------------------------------------------------- --*/
ฉันจะอธิบายรายละเอียดเพิ่มเติมในภายหลังเมื่อฉันหารือเกี่ยวกับ "ความแตกต่างระหว่างประเภท"
การทำเครื่องหมายคำอธิบายประกอบ
หากเอกสาร CSS ของคุณจัดระเบียบสไตล์ที่กระจัดกระจายดังที่ฉันได้กล่าวไว้ข้างต้น การใส่เครื่องหมายความคิดเห็นสามารถช่วยให้คุณง่ายขึ้นเมื่อคุณต้องการค้นหาส่วนนั้นของไฟล์ คุณสามารถใช้สัญลักษณ์คุณลักษณะ คำสำคัญ และค้นหาผลลัพธ์สุดท้ายได้
/* =ส่วนหัว
-------------------------------------------------- -------------------------------------------------- --*/
สิ่งนี้มีประโยชน์ในสไตล์ชีทที่ยาวและซับซ้อน คุณสามารถอ่านเกี่ยวกับเรื่องนี้ได้ใน Stop Design -
อ้างถึง