การแยกเนื้อหาออกจากการออกแบบช่วยให้การจัดการไซต์ทำได้ง่ายขึ้น
CSS (Cascading Style Sheets) กลายเป็นรูปแบบและจัดวางเว็บไซต์โดยพฤตินัย นักออกแบบใช้ stylesheets เพื่อบอกเบราว์เซอร์ว่าเว็บไซต์ควรแสดงผลอย่างไรในรูปลักษณ์โดยคำนึงถึงปัจจัยต่างๆเช่นสีการเว้นวรรคแบบอักษรและอื่น ๆ อีกมากมาย
สไตล์ CSS สามารถใช้งานได้สองวิธี:
- Inline - ภายในโค้ดของหน้าเว็บเองในแต่ละองค์ประกอบตามแต่ละองค์ประกอบ
- ในเอกสาร CSS แบบสแตนด์อโลนที่เชื่อมโยงกับเว็บไซต์
แนวทางปฏิบัติที่ดีที่สุดสำหรับ CSS
"แนวทางปฏิบัติที่ดีที่สุด" เป็นวิธีการออกแบบและสร้างเว็บไซต์ที่ได้รับการพิสูจน์ว่ามีประสิทธิภาพและให้ผลตอบแทนสูงสุดสำหรับงานที่เกี่ยวข้อง การติดตามพวกเขาใน CSS ในการออกแบบเว็บ ช่วยให้เว็บไซต์ดูและทำงานได้ดีที่สุด พวกเขาพัฒนามาตลอดหลายปีพร้อมกับภาษาและเทคโนโลยีทางเว็บอื่น ๆ และสไตล์ชีต CSS แบบสแตนด์อโลนก็กลายเป็นวิธีการใช้งานที่ต้องการ
แนวทางปฏิบัติที่ดีที่สุดสำหรับ CSS สามารถปรับปรุงเว็บไซต์ของคุณด้วยวิธีต่อไปนี้:
- แยกเนื้อหาออกจากการออกแบบ หนึ่งในเป้าหมายหลักของ CSS คือการนำองค์ประกอบการออกแบบออกจาก HTML และวางไว้ในตำแหน่งอื่นเพื่อให้นักออกแบบสามารถรักษา นอกจากนี้ยังทำหน้าที่ในการออกแบบแยกต่างหากจากนักพัฒนาซอฟต์แวร์เพื่อให้แต่ละคนสามารถมุ่งเน้นในด้านความเชี่ยวชาญของตนเองได้ นักออกแบบไม่จำเป็นต้องเป็นนักพัฒนาซอฟต์แวร์เพื่อรักษารูปลักษณ์ของเว็บไซต์
- ทำให้การบำรุงรักษาทำได้ง่าย หนึ่งในองค์ประกอบที่มองข้ามมากที่สุดของการออกแบบเว็บคือการบำรุงรักษา แตกต่างจากวัสดุพิมพ์เว็บไซต์ไม่เคย "หนึ่งและทำ" เนื้อหาการออกแบบและฟังก์ชันสามารถและควรมีวิวัฒนาการตามช่วงเวลา การมี CSS ในตำแหน่งศูนย์กลางมากกว่าการโรยหน้าทั่วเว็บไซต์จะทำให้การดูแลรักษาง่ายขึ้น
- ทำให้เว็บไซต์ของคุณสามารถเข้าถึงได้ การใช้สไตล์ CSS ช่วยให้เครื่องมือค้นหาและบุคคลที่ปิดใช้งานสามารถโต้ตอบกับไซต์ของคุณได้
- ทำให้ไซต์ของคุณมีสถานะปัจจุบันนานขึ้น เมื่อใช้แนวทางปฏิบัติที่ดีที่สุดกับ CSS คุณจะยึดมั่นในมาตรฐานที่ได้รับการพิสูจน์ว่ามีเสถียรภาพ แต่มีความยืดหยุ่นเพียงพอที่จะรองรับการเปลี่ยนแปลงในสภาพแวดล้อมการออกแบบเว็บ
ลักษณะแบบอินไลน์ไม่ใช่การปฏิบัติที่ดีที่สุด
รูปแบบอินไลน์ขณะที่มีวัตถุประสงค์โดยทั่วไปไม่ใช่วิธีที่ดีที่สุดในการรักษาเว็บไซต์ของคุณ พวกเขาไปกับหนึ่งในวิธีปฏิบัติที่ดีที่สุด:
- รูปแบบอินไลน์ไม่แยกเนื้อหาออกจากการออกแบบ รูปแบบอินไลน์มีความเหมือนกับตัวอักษรที่ฝังอยู่และแท็กการออกแบบอื่น ๆ ที่นักพัฒนาซอฟต์แวร์สมัยใหม่ได้กล่าวถึง ลักษณะจะมีผลกับเฉพาะแต่ละองค์ประกอบที่ใช้ ในขณะที่อาจให้การควบคุมแบบละเอียดมากขึ้น แต่ก็ทำให้ด้านอื่น ๆ ของการออกแบบและการพัฒนาเช่นความสม่ำเสมอยากขึ้น
- รูปแบบอินไลน์ทำให้เกิดอาการปวดหัวบำรุงรักษา เมื่อคุณทำงานกับสไตล์ชีตการหารูปแบบที่ตั้งไว้อาจเป็นเรื่องยาก เมื่อคุณจัดการกับรูป แบบอินไลน์แบบฝังและ แบบภายนอก คุณจะมีหลายตำแหน่งเพื่อตรวจสอบ ถ้าคุณทำงานในทีมออกแบบเว็บหรือต้องออกแบบหรือดูแลไซต์ที่สร้างโดยคนอื่นแล้วคุณจะมีปัญหามากยิ่งขึ้น เมื่อคุณพบสไตล์และเปลี่ยนแล้วคุณจะต้องดำเนินการดังกล่าวกับองค์ประกอบทุกอย่างในทุกๆหน้าที่วางไว้ ที่เพิ่มเวลาและงบประมาณการทำงาน astronomically
- รูปแบบอินไลน์ไม่สามารถเข้าถึงได้ แม้ว่าเครื่องอ่านหน้าจอที่ทันสมัยหรืออุปกรณ์อำนวยความสะดวกอื่น ๆ อาจสามารถจัดการแอตทริบิวต์และแท็กแบบอินไลน์ได้อย่างมีประสิทธิภาพอุปกรณ์บางรุ่นที่เก่ากว่าไม่สามารถทำได้ซึ่งอาจส่งผลให้หน้าเว็บที่แสดงอย่างแปลกประหลาดบางอย่าง อักขระพิเศษและข้อความอาจส่งผลต่อการทำงานของหน้าเว็บของคุณด้วยเครื่องมือค้นหาเช่นกันดังนั้นหน้าเว็บของคุณจึงไม่ได้ผลดีในแง่ของการเพิ่มประสิทธิภาพเครื่องมือค้นหา (SEO)
- รูปแบบอินไลน์ทำให้หน้าเว็บของคุณใหญ่ขึ้น หากคุณต้องการให้ทุกย่อหน้าในไซต์ของคุณปรากฏในลักษณะใดวิธีหนึ่งคุณสามารถทำได้ทุกครั้งด้วยหกบรรทัดหรือมากกว่าของโค้ดในสไตล์ชีทภายนอก ถ้าคุณทำแบบอินไลน์คุณจะต้องเพิ่มรูปแบบเหล่านี้ลงในทุกๆย่อหน้าของไซต์ หากคุณมีบรรทัด CSS ห้าบรรทัดนั่นคือห้าบรรทัดคูณด้วยทุกย่อหน้าในไซต์ของคุณ แบนด์วิธและเวลาโหลดสามารถเพิ่มขึ้นรีบร้อน
ทางเลือกของสไตล์อินไลน์: สไตล์ชีตภายนอก
แทนที่จะใช้ สไตล์ชีตภายนอกให้ ใช้ สไตล์ชีทภายนอก พวกเขาให้คุณประโยชน์ทั้งหมดจากแนวทางปฏิบัติที่ดีที่สุดของ CSS และใช้งานง่าย ใช้วิธีนี้ทุกรูปแบบที่ใช้ในไซต์ของคุณจะอยู่ในเอกสารแยกต่างหากที่เชื่อมโยงกับเอกสารเว็บด้วยบรรทัดรหัสเดียว ชีตชีตภายนอกจะ มีผลกับเอกสารที่แนบมา นั่นหมายความว่าหากคุณมีเว็บไซต์ 20 หน้าซึ่งแต่ละหน้าใช้สไตล์ชีตเดียวกันซึ่งโดยทั่วไปจะทำอย่างไรคุณสามารถเปลี่ยนหน้าเว็บทุกหน้าได้โดยการแก้ไขรูปแบบเหล่านั้นเพียงครั้งเดียวในที่เดียว การเปลี่ยนสไตล์ในจุดเดียวทำได้ง่ายกว่าการค้นหาโค้ดในทุกๆหน้าของเว็บไซต์ของคุณ ทำให้การจัดการไซต์ในระยะยาวง่ายขึ้น