เพื่อให้จัดการ CSS ได้อย่างมีประสิทธิภาพมากขึ้น Sofish จะอธิบายแนวคิดและมุมมองของ "CSS แบบโมดูลาร์" ด้านล่าง ฉันหวังว่าสิ่งนี้จะเป็นประโยชน์กับคุณ
ในช่วงแรกของการเรียนรู้ CSS ฉันเริ่มคุ้นเคยกับแนวคิดของ "CSS แบบโมดูลาร์" แต่ฉันไม่เคยเข้าใจแนวคิดนี้ดีนัก เหตุผลนั้นง่ายมาก: เนื่องจากโค้ดเกือบทั้งหมดมีไว้สำหรับการออกแบบบล็อก และสำหรับโครงสร้างที่มีขนาดเล็กเท่ากับบล็อก จึงไม่จำเป็นต้องมีไฟล์ CSS จำนวนมากเลย เนื่องจากจำนวนโค้ด มีขนาดเล็กและมีเทมเพลตเพจไม่มากนักที่ใช้นิพจน์ที่แตกต่างกัน ทำให้สะดวกในการจัดการน้อยกว่า ดังนั้นความเข้าใจของฉันเกี่ยวกับ CSS แบบโมดูลาร์จึงสับสนมาก ซึ่งทำให้ฉันคิดว่าวิธีการแบ่งต่อไปนี้สมเหตุสมผลมาก:
reset.css // รีเซ็ตสไตล์เริ่มต้นของเบราว์เซอร์
layout.css //จัดการเค้าโครงของเพจ
typeet.css // การจัดเรียงกราฟิกและข้อความและ
color.css // การจัดการการจับคู่สีแบบครบวงจร
print.css //สไตล์เอฟเฟกต์การพิมพ์
ie.css // การแยกแฮ็กสำหรับ IE ออกไปนั้นไม่เป็นความจริง ฉันเพิ่งทำงานและติดต่อกับเว็บไซต์ของบริษัท ผู้นำต้องเขียนข้อกำหนดการเขียน CSS ของตัวเอง รวมถึงข้อกำหนด HTML แบบรวมบางส่วนด้วย และเขาก็เขียนข้อกำหนดใหม่ด้วย ช่องทาง/เพจ/ร้านค้า . เมื่อนั้นฉันจึงได้ตระหนักว่าการแบ่งแยกข้างต้นยังคงเป็นอุดมคติมากเกินไป โดยส่วนตัวแล้วผมคิดว่าวิธีการหารต่อไปนี้สามารถใช้ได้ มาเขียนมันลงไปก่อน จากนั้นให้เราเปรียบเทียบวิธีการแบ่งทั้งสองวิธีนี้เพื่อค้นหาวิธีการแบ่ง CSS แบบโมดูลาร์ที่เหมาะสมซึ่งจะช่วยแก้ปัญหาการจัดการไฟล์ CSS ได้ดีขึ้น:
reset.css
header.css // สไตล์ทั้งหมดของส่วนหัว
container.css // รูปแบบพื้นที่ตรงกลาง ยกเว้นส่วนหัว/ด้านล่าง
footer.css // สไตล์ด้านล่าง
พิมพ์.css
เช่น.css
เราจะเห็นว่ามีไฟล์ CSS ที่แตกต่างกันสามไฟล์ วิธีแรกในการแบ่งเป็นแนวทางที่ดี แต่การจัดการจะยุ่งยากกว่า แม้ว่าจะเป็นแบบ "โมดูลาร์" แต่สไตล์ของเนื้อหาที่แสดงก็จะถูกแยกออกจากกัน อย่างไรก็ตาม เนื่องจากเป็นไปไม่ได้ที่ทุกคนจะเข้าใจเนื้อหาของไฟล์ CSS แต่ละไฟล์ได้ 100% จึงอาจนำไปสู่ปัญหาดังต่อไปนี้
1. ปัญหาด้านประสิทธิภาพและเป้าหมายสูงสุดอยู่ที่เนื้อหาของเว็บไซต์ หากเนื้อหาของบางพื้นที่ มีการเปลี่ยนแปลง อาจต้องใช้เวลากี่ครั้ง เปลี่ยน CSS ทั้งหมด เป็นผลให้สิ่งที่เดิมเป็นการปรับเปลี่ยนอย่างง่ายเริ่มมีความซับซ้อน นอกจากนี้ หากมีการเปลี่ยนแปลงหลายครั้ง เราอาจมองข้ามบางสิ่งบางอย่างและจำเป็นต้องแก้ไขจุดบกพร่องเพิ่มเติม ซึ่งไม่เพียงแต่จะทำให้การบรรลุเป้าหมายสุดท้ายล่าช้า แต่ยังทำให้เกิดปัญหาด้านประสิทธิภาพอีกด้วย
2. เรียกไฟล์ CSS น้อยที่สุด ในกรณีส่วนใหญ่ เว็บไซต์จะแบ่งออกเป็นส่วนหัว ตรงกลาง และด้านล่าง และโดยทั่วไป เมื่อสร้างช่อง/เพจใหม่ และอื่นๆ ส่วนหัวและด้านล่างจะไม่มีการเปลี่ยนแปลง เปลี่ยนเฉพาะส่วนตรงกลางเท่านั้น ด้วยวิธีนี้ จะต้องเรียกไฟล์ CSS ทั้งหมด เนื่องจากความเป็นโมดูลของ HTML และ CSS ไม่สอดคล้องกัน ซึ่งจะทำให้เซิร์ฟเวอร์รับแรงกดดันมากขึ้น นี่เป็นแง่มุมหนึ่ง อีกประการหนึ่งคือหากองค์ประกอบบางอย่างในหน้าใหม่ขัดแย้งกับหน้าอื่น เราอาจจะต้องเขียนโค้ดจำนวนมากเกี่ยวกับการเลือกลำดับความสำคัญ ทำให้จำนวนโค้ดเพิ่มมากขึ้น สิ่งเหล่านี้ไม่ใช่สิ่งที่เราต้องการ นี่คือเหตุผลว่าทำไมจึงควรแยก header.css และ footer.css
3. ปัญหาการทำงานร่วมกันหลายคน หากมีคนทำงานมากกว่าหนึ่งคน การแบ่งงานอาจเป็นมีคนนำทางที่หัว บางคนกรอกแถบค้นหาด้านล่าง และมีคนสร้างใหม่ให้เสร็จ หน้าตรงกลาง. ด้วยวิธีนี้ ทุกคนจะเปลี่ยนแปลงไฟล์หลายไฟล์พร้อมกัน และสิ่งที่พวกเขาเปลี่ยนแปลงจะแตกต่างออกไป หากคุณต้องการอัปเดตไปยังเซิร์ฟเวอร์คุณต้องเปรียบเทียบก่อนแล้วจึงอัปเดต (แน่นอนว่าตอนนี้มีซอฟต์แวร์เช่นการจัดการเวอร์ชันอยู่แล้ว อย่างไรก็ตาม หากคุณทำงานพร้อมกัน เวอร์ชันนั้นก็เป็นปัญหาเช่นกัน คุณต้องเชื่อว่าการอัปเดตอาจจะไม่มีวันเปลี่ยนแปลง)
สรุป:
แน่นอนว่าวิธีการหารข้างต้นเป็นเพียงแบบจำลองง่ายๆ สถาปัตยกรรมของเว็บไซต์ต่างๆ อาจต้องมีการจำแนกประเภทที่ละเอียดมากขึ้น สิ่งหนึ่งที่ต้องได้รับการเตือนที่นี่คือ CSS แบบโมดูลาร์ เราควรชัดเจนเสมอว่าเราอยู่ที่นี่เพื่ออำนวยความสะดวกในการจัดการ การแก้ไข และการทำงานร่วมกันระหว่างคนหลายคน แทนที่จะเป็นการแบ่งแยกแบบธรรมดา หากฉันมีข้อเสนอแนะใดๆ ฉันคิดว่าความเป็นโมดูลของ CSS ควรสอดคล้องกับความเป็นโมดูลของ HTML ฉันทามติในที่นี้คือ ไม่ว่าจะเป็นการแบ่งไฟล์หรือการแบ่งเนื้อหา CSS ก็สอดคล้องกับความเป็นโมดูลของ HTML ซึ่งจะเป็นประโยชน์ต่องานของเรามากขึ้น
และคุณคิดอย่างไร?