ทุกคนสามารถเขียนโค้ด CSS ได้ แม้ว่าตอนนี้คุณจะใช้โค้ดนี้กับโปรเจ็กต์ของคุณได้แล้วก็ตาม แต่ CSS จะดีกว่านี้ไหม? แม้ว่า webjx.com จะแนะนำเทคนิคต่างๆ มากมายในด้านนี้ ให้เริ่มใช้ห้าแง่มุมนี้เพื่อปรับปรุง CSS ของคุณ ซึ่งจะทำให้คุณดูเป็นมืออาชีพมากขึ้น และทำให้โค้ดของคุณดีขึ้น!
1. รีเซ็ต
ก่อนอื่น ฉันขอบอกคุณอย่างจริงจังว่าคุณต้องรีเซ็ตหมวดหมู่บางหมวดหมู่เสมอ ไม่ว่าคุณจะใช้ Eric Meyer Reset, YUI Reset หรือเขียนรหัสรีเซ็ตของคุณเอง เพียงแค่ใช้มัน
สามารถลบช่องว่างภายในและระยะขอบออกจากองค์ประกอบทั้งหมดได้อย่างง่ายดาย:
html, เนื้อความ, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
ก่อน, แบบฟอร์ม, ชุดสนาม, ตาราง, th, td { ระยะขอบ: 0;
Eric Meyer Reset และ YUI Reset ต่างก็มีประสิทธิภาพมาก แต่สำหรับฉัน มันไกลเกินไป ฉันคิดว่าในที่สุดคุณจะต้องรีเซ็ตทุกอย่างแล้วกำหนดคุณสมบัติขององค์ประกอบทั้งหมดใหม่ นั่นเป็นเหตุผลที่ Eric Meyer แนะนำให้ใช้อย่างมีประสิทธิภาพมากขึ้น (รีเซ็ตสไตล์ชีต) และคุณไม่เพียงแค่ใช้สไตล์ชีตรีเซ็ตของเขาเท่านั้น แต่ยังลากและวางลงในโปรเจ็กต์ของคุณ ปรับมัน (สไตล์ชีตรีเซ็ต) และสร้างสไตล์ชีตรีเซ็ตของคุณเอง
โอ้ โปรดหยุดใช้:
* { ระยะขอบ: 0;
ใช้เวลามากขึ้นในการสร้าง คุณคิดว่าจะเกิดอะไรขึ้นกับปุ่มตัวเลือกเมื่อคุณถอดช่องว่างภายในออก องค์ประกอบของฟอร์มบางครั้งอาจทำสิ่งแปลกๆ ได้ ดังนั้นวิธีที่มีประสิทธิภาพมากที่สุดคือการทำให้ฟอร์มเป็นอิสระ
2. การเรียงลำดับ
การทดสอบเล็กๆ น้อยๆ: ตัวอย่างนี้จะทำให้คุณคิดว่าจะหาแอตทริบิวต์ Margin ที่ถูกต้องได้เร็วขึ้นได้อย่างไร
ตัวอย่าง#1
div#ส่วนหัว h1 {
ดัชนี z: 101;
สี: #000;
ตำแหน่ง: ญาติ;
ความสูงของบรรทัด: 24px;
ขอบขวา: 48px;
ขอบล่าง: 1px solid #dedede;
ขนาดตัวอักษร: 18px;
-
ตัวอย่าง#2
div#header h1 { ขอบล่าง: 1px solid #dedede; color: #000; line-height: 24px;
คุณไม่สามารถบอกฉันได้ว่าตัวอย่างที่ 2 ไม่สามารถค้นหาคุณสมบัติมาร์จิ้นที่ถูกต้องได้เร็วกว่านี้ จัดเรียงคุณสมบัติองค์ประกอบของคุณตามตัวอักษร การสร้าง CSS อย่างสม่ำเสมอจะช่วยให้คุณประหยัดเวลาในการค้นหาพร็อพเพอร์ตี้ที่เฉพาะเจาะจง
ฉันรู้ว่าบางคนจัดระเบียบโค้ดของตนด้วยวิธีใดวิธีหนึ่งและอีกวิธีหนึ่ง แต่ที่บริษัทของฉัน เราได้ลงมติเป็นเอกฉันท์ว่าโค้ดทั้งหมดจะถูกจัดเรียงตามตัวอักษร การทำงานร่วมกับผู้อื่นจะช่วยได้อย่างแน่นอนด้วยการจัดระเบียบโค้ดของคุณด้วยวิธีนี้ ฉันประจบประแจงทุกครั้งที่เจอสไตล์ชีตแบบเรียงซ้อนซึ่งมีคุณสมบัติไม่เรียงลำดับตามตัวอักษร
3. องค์กร
คุณควรจัดระเบียบสไตล์ชีทของคุณเพื่อให้เนื้อหาที่เกี่ยวข้องอยู่ใกล้กัน ทำให้ง่ายต่อการค้นหาสิ่งที่คุณกำลังมองหา ใช้คำอธิบายประกอบที่มีประสิทธิภาพมากขึ้น ตามตัวอย่าง นี่คือวิธีที่ฉันจัดโครงสร้างสไตล์ชีตแบบเรียงซ้อน:
/******รีเซ็ต******/ลบช่องว่างภายในและระยะขอบขององค์ประกอบ
/******องค์ประกอบพื้นฐาน*****/กำหนดรูปแบบขององค์ประกอบพื้นฐาน: body, h1-h6, ul, ol, a, p ฯลฯ
/******คลาสทั่วไป*****/ กำหนดสไตล์ที่เรียบง่าย เช่น ลอยไปด้านหนึ่ง ลบขอบด้านล่างขององค์ประกอบ ฯลฯ แน่นอนว่าส่วนใหญ่ไม่เกี่ยวข้องกับความหมายที่เราต้องการ แต่ มีความจำเป็นต้องประมวลผลโค้ดอย่างมีประสิทธิภาพ
/******เค้าโครงพื้นฐาน*****/กำหนดเทมเพลตพื้นฐาน: ส่วนหัว ส่วนท้าย ฯลฯ ช่วยกำหนดองค์ประกอบพื้นฐานของเค้าโครงหน้าเว็บ
/*****Header*****/กำหนดองค์ประกอบ Hearder ทั้งหมด
/******Content******/กำหนดองค์ประกอบทั้งหมดในกล่องเนื้อหา
/******ส่วนท้าย*****/กำหนดองค์ประกอบส่วนท้ายทั้งหมด
/******ฯลฯ*****/กำหนดตัวเลือกอื่นๆ การใส่คำอธิบายประกอบและจัดหมวดหมู่องค์ประกอบที่คล้ายกันออกเป็นกลุ่ม คุณจะพบสิ่งที่คุณต้องการได้เร็วขึ้น
4. ความสม่ำเสมอ
ไม่ว่าคุณจะตัดสินใจเขียนโค้ดอย่างไร จงมีความสม่ำเสมอ ฉันเบื่อกับการอภิปราย CSS แบบ 1 บรรทัดและหลายบรรทัดแล้ว ไม่จำเป็นต้องโต้แย้ง ทุกคนมีความคิดเห็น ดังนั้นเลือกวิธีการทำงานที่คุณชอบและสอดคล้องกับสไตล์ชีตทั้งหมดของคุณ
โดยส่วนตัวแล้วฉันจะใช้ทั้งสองอย่างรวมกัน หากตัวเลือกมีแอตทริบิวต์มากกว่า 3 รายการ ฉันจะตัดทอนและเขียนเป็นหลายบรรทัด
div#header { ลอย: ซ้าย; ความกว้าง: 100%;
div#ส่วนหัว div.column {
เส้นขอบขวา: 1px ทึบ #ccc;
ลอย: ขวา;
ขอบขวา: 50px;
ช่องว่างภายใน: 10px;
ความกว้าง: 300px;
-
div#header h1 { ลอย: ซ้าย; ความกว้าง: 250px;
ดังนั้นให้หาวิธีที่คุณชอบทำงานและรักษาความสม่ำเสมอ
5. เริ่มจากจุดที่ถูกต้อง
อย่าพยายามเข้าใกล้สไตล์ชีตของคุณจนกว่าภาษามาร์กอัปจะเสร็จสมบูรณ์
เมื่อฉันเตรียมแยกหน้าเว็บ ก่อนที่จะสร้างไฟล์ CSS ฉันจะต้องดูตัวอย่างและทำเครื่องหมายเอกสารทั้งหมดระหว่างแท็กเปิดเนื้อหาและแท็กปิดเนื้อหา ฉันจะไม่เพิ่ม DIV, ID หรือตัวเลือกคลาสเพิ่มเติม ฉันจะเพิ่ม DIV ทั่วไปบางอย่าง เช่น ผู้ฟัง เนื้อหา ส่วนท้าย เพราะฉันรู้ว่าสิ่งเหล่านี้มีอยู่จริง
ด้วยการแท็กเอกสารก่อน คุณจะไม่พบปัญหาที่ถึงวาระแล้วของ divities1 และ class2! /*คุณจะต้องเพิ่มสิ่งนั้นเข้าไปเมื่อคุณเริ่มเขียน CSS และตระหนักว่าคุณจะต้องการ hook อื่นเพื่อ บรรลุสิ่งที่คุณพยายามบรรลุ*/(ข้อความต้นฉบับไม่ได้แปล)
ใช้ตัวเลือกลูกของ CSS เพื่อระบุองค์ประกอบลูก ไม่ใช่แค่เพิ่มคลาสหรือตัวเลือก ID ให้กับองค์ประกอบโดยอัตโนมัติ ข้อควรจำ: CSS จะไม่มีค่าหากไม่มีเอกสารที่มีรูปแบบดี (หรือโครงสร้างมาร์กอัป)
สรุป
สิ่งเหล่านี้สามารถช่วยฉันเขียนโค้ด CSS ได้ดีขึ้น แต่นี่ไม่ได้หมายถึงจุดสิ้นสุดของรายการนี้ ต่อไปฉันจะนำคนอื่น ๆ มาแบ่งปันกับคุณ คุณสามารถสนใจ webjx.com ได้