รูปลักษณ์หรือ "สไตล์" ของเว็บไซต์กำหนดโดย CSS (Cascading Style Sheets) นี่คือไฟล์ที่คุณจะเพิ่มลงในไดเรกทอรีของเว็บไซต์ซึ่งจะมีกฎต่างๆของ CSS ที่สร้างการออกแบบภาพและการจัดวางหน้าเว็บของคุณ
ในขณะที่ไซต์สามารถใช้งานได้และมักใช้แบบชีทแบบหลายแบบก็ไม่จำเป็นต้องทำเช่นนั้น คุณสามารถวางกฎ CSS ทั้งหมดลงในไฟล์เดียวและยังมีประโยชน์สำหรับการทำเช่นนี้รวมถึง เวลาในการโหลดและประสิทธิภาพ ของหน้าเว็บที่ รวดเร็วขึ้น เนื่องจากไม่ต้องเรียกใช้ไฟล์หลาย ๆ ไฟล์ ในขณะที่เว็บไซต์องค์กรขนาดใหญ่อาจต้องใช้สไตล์ชีตแยกกันในบางครั้งไซต์ขนาดเล็กถึงขนาดกลางจำนวนมากสามารถทำได้ดีเพียงไฟล์เดียว นี่คือสิ่งที่ฉันใช้สำหรับงานออกแบบเว็บส่วนใหญ่ของฉัน - เป็นไฟล์ CSS เดียวที่มีกฎทั้งหมดที่หน้าเว็บของฉันต้องการ ดังนั้นคำถามนี้กลายเป็น - สิ่งที่คุณควรตั้งชื่อไฟล์ CSS?
การตั้งชื่อพื้นฐานการประชุม
เมื่อคุณสร้าง สไตล์ชีตภายนอก สำหรับเว็บเพจของคุณคุณควรตั้งชื่อไฟล์ตามแบบแผนการตั้งชื่อที่คล้ายกันสำหรับไฟล์ HTML ของคุณ:
ห้ามใช้อักขระพิเศษ
คุณควรใช้ตัวอักษร az เท่านั้นตัวเลข 0-9 ขีดล่าง (_) และยัติภังค์ (-) ในชื่อไฟล์ CSS ของคุณ แม้ว่าระบบไฟล์ของคุณอาจอนุญาตให้คุณสร้างไฟล์ที่มีอักขระอื่นในระบบปฏิบัติการเซิร์ฟเวอร์ของคุณอาจมีปัญหาเกี่ยวกับอักขระพิเศษ คุณปลอดภัยกว่าโดยใช้เฉพาะอักขระที่กล่าวถึงที่นี่ อย่างไรก็ตามแม้ว่าเซิร์ฟเวอร์ของคุณจะอนุญาตให้ใช้อักขระพิเศษ แต่อาจไม่ใช่กรณีนี้หากคุณตัดสินใจย้าย ผู้ให้บริการโฮสติ้ง ในอนาคต
อย่าใช้ช่องว่างใด ๆ
เช่นเดียวกับอักขระพิเศษช่องว่างอาจก่อให้เกิดปัญหาบนเว็บเซิร์ฟเวอร์ของคุณ คุณควรหลีกเลี่ยงชื่อไฟล์ของคุณ ฉันยังทำให้จุดเพื่อชื่อไฟล์เช่นไฟล์ PDF ใช้อนุสัญญาเดียวกันนี้ในกรณีที่ฉันเคยต้องเพิ่มในเว็บไซต์ ถ้าคุณรู้สึกว่าต้องการพื้นที่ในการอ่านชื่อให้ง่ายขึ้นให้เลือกใช้เครื่องหมายยัติภังค์หรือเครื่องหมายขีดล่างแทน ตัวอย่างเช่นแทนที่จะใช้ "this.pdf" ฉันจะใช้ "this-is-the-file.pdf"
ชื่อไฟล์ควรเริ่มต้นด้วยตัวอักษร
แม้ว่าจะไม่ใช่ข้อกำหนดที่แน่นอนระบบบางระบบอาจมีปัญหากับชื่อไฟล์ที่ไม่ได้ขึ้นต้นด้วยตัวอักษร ตัวอย่างเช่นถ้าคุณเลือกที่จะเริ่มต้นไฟล์ของคุณด้วยอักขระตัวเลขอาจทำให้เกิดปัญหาได้
ใช้ตัวพิมพ์เล็กทั้งหมด
แม้ว่าจะไม่จำเป็นสำหรับชื่อไฟล์ แต่เป็นความคิดที่ดีเนื่องจากเว็บเซิร์ฟเวอร์บางเครื่องมีการพิจารณาตัวพิมพ์เล็กและตัวพิมพ์ใหญ่และถ้าคุณลืมและอ้างอิงไฟล์ในกรณีอื่นก็จะไม่โหลด ในงานของฉันเองฉันใช้ตัวพิมพ์เล็กสำหรับชื่อไฟล์ทุกครั้ง ฉันได้ค้นพบว่านี่เป็นสิ่งที่นักออกแบบเว็บใหม่ ๆ หลาย ๆ คนพยายามจะจดจำไว้ การดำเนินการเริ่มต้นเมื่อตั้งชื่อไฟล์คือการใช้อักขระตัวแรกของชื่อ หลีกเลี่ยงสิ่งนี้และเข้าสู่นิสัยของตัวพิมพ์เล็กเท่านั้น
เก็บชื่อไฟล์ไว้ให้สั้นที่สุดเท่าที่จะเป็นไปได้
แม้ว่าจะมีขีด จำกัด ขนาดชื่อไฟล์ในระบบปฏิบัติการส่วนใหญ่ แต่ก็มีความยาวมากกว่าสมเหตุสมผลสำหรับชื่อไฟล์ CSS กฎทั่วไปไม่เกิน 20 อักขระสำหรับชื่อไฟล์ที่ไม่รวมส่วนขยาย แนบเนียนอะไรนานกว่าที่เทอะทะที่จะทำงานกับและเชื่อมโยงไปยัง!
ส่วนสำคัญที่สุดของชื่อไฟล์ CSS ของคุณ
ส่วนที่สำคัญที่สุดของชื่อไฟล์ CSS ไม่ใช่ชื่อไฟล์ แต่นามสกุล ไม่จำเป็นต้องใช้ส่วนขยายในระบบ Macintosh และ Linux แต่ควรรวมส่วนขยายไว้ทุกครั้งเมื่อเขียนไฟล์ CSS ด้วยวิธีนี้คุณจะรู้ว่าเป็นสไตล์ชีตและไม่ต้องเปิดไฟล์เพื่อกำหนดว่าจะเป็นอย่างไรในอนาคต
อาจเป็นเรื่องที่น่าแปลกใจไม่ได้ แต่ส่วนขยายไฟล์ CSS ของคุณควรเป็นดังนี้
.cssกำหนดการตั้งชื่อไฟล์ CSS
ถ้าคุณเคยมีไฟล์ CSS เพียงไฟล์เดียวในเว็บไซต์คุณสามารถตั้งชื่อไฟล์ได้ทุกแบบที่คุณต้องการ ฉันชอบอย่างใดอย่างหนึ่ง:
styles.css หรือ default.cssเนื่องจากไซต์ส่วนใหญ่ที่ฉันใช้งานประกอบด้วยไฟล์ CSS เดียวชื่อเหล่านี้ทำงานได้ดีสำหรับฉัน
หากเว็บไซต์ของคุณใช้ไฟล์ CSS หลายไฟล์ให้ตั้งชื่อสไตล์ชีตตามฟังก์ชันของไฟล์เพื่อให้ชัดเจนว่าจุดประสงค์ของไฟล์แต่ละไฟล์เป็นอย่างไร เนื่องจากเว็บเพจสามารถมีสไตล์ชีตหลายแบบได้จึงช่วยแบ่งสไตล์ของคุณให้เป็นแผ่นงานต่างๆได้ขึ้นอยู่กับลักษณะการทำงานของแผ่นงานนั้นและรูปแบบภายในนั้น ตัวอย่างเช่น:
- เค้าโครงออกแบบ Design.css layout.css
- ส่วนของหน้า main.css nav.css
- ไซต์ทั้งหมดมี subpage.css ส่วน ย่อย mainstyles.css
หากเว็บไซต์ของคุณใช้กรอบบางประเภทคุณอาจสังเกตเห็นว่าใช้ไฟล์ CSS หลายรูปแบบแต่ละส่วนจะมีไว้สำหรับส่วนต่างๆของหน้าเว็บหรือด้านต่างๆของไซต์ (การพิมพ์สีการจัดวาง ฯลฯ )
บทความต้นฉบับโดย Jennifer Krynin แก้ไขโดย Jeremy Girard เมื่อวันที่ 9/5/17