วิธีที่ดีที่สุดในการรวม CSS? ทำไมต้องใช้ @import

โดยทั่วไปฉันสงสัยว่าอะไรคือข้อดี / วัตถุประสงค์ของการใช้@importเพื่อนำเข้าสไตล์ชีทไปยังสไตล์ชีทที่มีอยู่เมื่อเทียบกับการเพิ่มอีก ...

<link rel="stylesheet" type="text/css" href="" />

ถึงส่วนหัวของเอกสาร?

จากมุมมองความเร็วของหน้า@importไม่ควรใช้ไฟล์ CSS เนื่องจากจะสามารถป้องกันไม่ให้สไตล์ชีทถูกดาวน์โหลดพร้อมกัน ตัวอย่างเช่นถ้าสไตล์ชีท A มีข้อความ:

@import url("stylesheetB.css");

จากนั้นการดาวน์โหลดสไตล์ชีทที่สองอาจไม่เริ่มจนกว่าจะมีการดาวน์โหลดสไตล์ชีทแรก ในทางกลับกันถ้าสไตล์ชีตทั้งสองมีการอ้างอิงใน<link>องค์ประกอบในหน้า HTML หลักทั้งสองสามารถดาวน์โหลดได้ในเวลาเดียวกัน หากมีการโหลดสไตล์ชีทเข้าด้วยกันเสมอมันจะมีประโยชน์หากคุณรวมสไตล์เหล่านั้นไว้ในไฟล์เดียว

มีบางครั้งสถานการณ์ที่@importเหมาะสม แต่โดยทั่วไปแล้วจะเป็นข้อยกเว้นไม่ใช่กฎ

ฉันจะเล่นเป็นผู้สนับสนุนของปีศาจเพราะฉันเกลียดเมื่อคนเห็นด้วยมากเกินไป

1. ถ้าคุณต้องการสไตล์ชีทที่ขึ้นอยู่กับอีกอันใช้ @import ทำการเพิ่มประสิทธิภาพในขั้นตอนแยกต่างหาก

ประสิทธิภาพการทำงานของรหัสของคุณและ - มีสองตัวแปรที่คุณกำลังเพิ่มประสิทธิภาพสำหรับในเวลาใดก็ตามที่มีผลการดำเนินงานของนักพัฒนา ในหลายกรณีไม่ได้กรณีส่วนใหญ่มันเป็นสิ่งสำคัญมากที่จะทำให้นักพัฒนาที่มีประสิทธิภาพมากขึ้นและเพียงแล้วทำให้โค้ดเพิ่มเติม performant

หากคุณมีสไตล์ชีทหนึ่งอันที่ขึ้นอยู่กับอีกสิ่งที่สำคัญที่สุดที่ต้องทำคือใส่ไว้ในสองไฟล์แยกกันและใช้ @import นั่นจะทำให้มีเหตุผลมากที่สุดกับคนต่อไปที่ดูรหัส

(เมื่อไรที่การพึ่งพาเช่นนี้จะเกิดขึ้นมันเป็นเรื่องยากในความคิดของฉัน - โดยปกติแล้วหนึ่งสไตล์ชีทก็เพียงพอแล้วอย่างไรก็ตามมีบางสถานที่ที่จะวางสิ่งต่าง ๆ ในไฟล์ CSS ที่แตกต่างกัน :)

• การทำธีม: หากคุณมีโครงร่างสีหรือชุดรูปแบบที่แตกต่างกันสำหรับหน้าเดียวกันพวกเขาอาจแชร์บางส่วน แต่ไม่ใช่องค์ประกอบทั้งหมด
• คอมโพเนนต์ย่อย: ตัวอย่างที่วางแผนไว้ - สมมติว่าคุณมีหน้าร้านอาหารที่มีเมนู หากเมนูแตกต่างจากส่วนที่เหลือของหน้ามันจะง่ายกว่าที่จะรักษาถ้ามันอยู่ในไฟล์ของตัวเอง

โดยปกติ stylesheets <link href>มีความเป็นอิสระดังนั้นจึงสมควรที่จะรวมพวกเขาทั้งหมดที่ใช้ อย่างไรก็ตามหากพวกเขาเป็นลำดับชั้นที่ขึ้นอยู่กับคุณควรทำสิ่งที่เหมาะสมที่สุดที่จะทำ

Python ใช้การนำเข้า การใช้งาน C รวมถึง; JavaScript มีความต้องการ CSS มีการนำเข้า เมื่อคุณต้องการใช้มัน!

2. เมื่อคุณไปถึงจุดที่ไซต์ต้องการปรับขนาดให้เชื่อม CSS ทั้งหมดเข้าด้วยกัน

คำขอ CSS หลายๆแบบไม่ว่าจะผ่านลิงก์หรือผ่าน @imports เป็นวิธีปฏิบัติที่ไม่ดีสำหรับเว็บไซต์ที่มีประสิทธิภาพสูง เมื่อคุณมาถึงจุดที่การเพิ่มประสิทธิภาพมีความสำคัญ CSS ทั้งหมดของคุณควรจะไหลผ่านตัวขยายขนาดเล็ก Cssminรวมงบการนำเข้า @Brandon ชี้ให้เห็นว่าเสียงฮึดฮัดมีหลายตัวเลือกสำหรับการทำเช่นนั้น ( ดูคำถามนี้ด้วย )

เมื่อคุณอยู่ในขั้นลด<link>ขนาดได้เร็วขึ้นตามที่ผู้คนได้ชี้ให้เห็นดังนั้นอย่างมากที่สุดเชื่อมโยงไปยังสไตล์ชีตไม่กี่รายการและไม่ต้องนำเข้า @import ถ้าเป็นไปได้

ก่อนที่เว็บไซต์จะถึงระดับการผลิตแม้ว่าสิ่งสำคัญคือรหัสจะถูกจัดระเบียบและมีเหตุผลมากกว่าที่จะไปได้เร็วขึ้นเล็กน้อย

เป็นการดีที่สุดที่จะไม่ใช้@importเพื่อรวม CSS ในหน้าเว็บด้วยเหตุผลด้านความเร็ว ดูบทความที่ยอดเยี่ยมนี้เพื่อเรียนรู้ว่าทำไมไม่: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

นอกจากนี้มักเป็นการยากที่จะย่อขนาดและรวมไฟล์ css ที่ให้บริการผ่านแท็ก @import เนื่องจากสคริปต์ minify ไม่สามารถ "ลอกออก" บรรทัด @import จากไฟล์ css อื่น ๆ เมื่อคุณรวมเป็นแท็ก <link คุณสามารถใช้โมดูล minify php / dotnet / java ที่มีอยู่เพื่อทำการลดขนาด

ดังนั้น: ใช้แทน<link />@import

โดยใช้วิธีการเชื่อมโยงสไตล์ชีทจะถูกโหลดแบบขนาน (เร็วกว่าและดีกว่า) และลิงก์เกือบทั้งหมดรองรับเบราว์เซอร์

นำเข้าโหลดไฟล์ css พิเศษใด ๆ ทีละหนึ่ง (ช้ากว่า) และสามารถให้คุณแฟลชเนื้อหาที่ไม่มีการจัดรูปแบบ

@Nebo Iznad Mišo Grgur

ต่อไปนี้เป็นวิธีที่ถูกต้องทั้งหมดในการใช้ @import

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

แหล่งที่มา: https://developer.mozilla.org/en-US/docs/Web/CSS/@import

ไม่มีความแตกต่างในการเพิ่มสไตล์ชีท css ในส่วนหัวกับการใช้ฟังก์ชั่นการนำเข้า การใช้@importโดยทั่วไปจะใช้สำหรับการกำหนดสไตล์ชีทเพื่อให้สามารถขยายได้ง่าย มันสามารถใช้เพื่อสลับเค้าโครงสีที่แตกต่างกันได้อย่างง่ายดายตัวอย่างเช่นร่วมกับข้อกำหนด css ทั่วไป ฉันจะบอกว่าประโยชน์หลัก / วัตถุประสงค์คือการขยาย

ฉันเห็นด้วยกับ xbonez แสดงความคิดเห็นเช่นกันในการพกพาและการบำรุงรักษาที่เพิ่มประโยชน์

พวกมันคล้ายกันมาก บางคนอาจโต้แย้งว่า @import นั้นสามารถบำรุงรักษาได้มากกว่า อย่างไรก็ตามแต่ละ @import จะเสียค่าใช้จ่ายคำขอ HTTP แบบใหม่เช่นเดียวกับการใช้วิธีการ "ลิงก์" ดังนั้นในบริบทของความเร็วจึงไม่เร็ว และตามที่ "duskwuff" กล่าวมันไม่โหลดพร้อมกันซึ่งเป็นความหายนะ

ที่เดียวที่ฉันใช้ @import คือเมื่อฉันทำหน้าสองเวอร์ชันคืออังกฤษและฝรั่งเศส ฉันจะสร้างหน้าของฉันเป็นภาษาอังกฤษโดยใช้ main.css เมื่อฉันสร้างเวอร์ชั่นภาษาฝรั่งเศสออกมาฉันจะเชื่อมโยงกับสไตล์ชีทของฝรั่งเศส (main_fr.css) ที่ด้านบนของสไตล์ชีทฝรั่งเศสฉันจะนำเข้า main.css แล้วกำหนดกฎเฉพาะใหม่สำหรับส่วนที่ฉันต้องการต่างกันในเวอร์ชันภาษาฝรั่งเศส

อ้างถึงจากhttp://webdesign.about.com/od/beginningcss/f/css_import_link.htm

วัตถุประสงค์หลักของวิธีการ @import คือการใช้สไตล์ชีตหลายแผ่นบนหน้าเว็บ แต่มีลิงก์เพียงลิงค์เดียวใน <head> ของคุณ ตัวอย่างเช่น บริษัท อาจมีสไตล์ชีทระดับโลกสำหรับทุกหน้าในเว็บไซต์โดยที่ส่วนย่อยจะมีสไตล์เพิ่มเติมที่ใช้กับส่วนย่อยนั้นเท่านั้น ด้วยการเชื่อมโยงกับสไตล์ชีตส่วนย่อยและนำเข้าสไตล์โกลบอลที่ด้านบนของสไตล์ชีทนั้นคุณไม่จำเป็นต้องดูแลสไตล์ชีทขนาดยักษ์ด้วยสไตล์ทั้งหมดสำหรับไซต์และทุกส่วนย่อย ข้อกำหนดเพียงอย่างเดียวคือกฎ @import ใด ๆ ที่ต้องมาก่อนกฎสไตล์ของคุณที่เหลือ และจำไว้ว่ามรดกยังคงเป็นปัญหาได้

บางครั้งคุณต้องใช้ @import ซึ่งต่างจากแบบอินไลน์ หากคุณกำลังทำงานกับแอพพลิเคชั่นที่ซับซ้อนที่มีไฟล์ css 32 ไฟล์ขึ้นไปและคุณต้องรองรับ IE9 ไม่มีทางเลือก IE9 ละเว้นไฟล์ css ใด ๆ หลังจากวันที่ 31 และสิ่งนี้รวมถึงและแบบอินไลน์ css อย่างไรก็ตามแต่ละแผ่นสามารถนำเข้าได้ 31 แผ่น

มีเหตุผลที่ดีมากมายที่จะใช้ @import

เหตุผลหนึ่งที่มีประสิทธิภาพสำหรับการใช้ @import คือการออกแบบข้ามเบราว์เซอร์ โดยทั่วไปแล้วแผ่นงานที่นำเข้าจะถูกซ่อนจากเบราว์เซอร์รุ่นเก่าหลายรุ่นซึ่งช่วยให้คุณสามารถใช้การจัดรูปแบบเฉพาะสำหรับเบราว์เซอร์ที่เก่ามากเช่น Netscape 4 หรือซีรี่ส์เก่ากว่า Internet Explorer 5.2 สำหรับ Mac, Opera 6 และเก่ากว่าและ IE 3 และ 4 สำหรับพีซี

ในการทำเช่นนี้ในไฟล์ base.css ของคุณคุณอาจมีสิ่งต่อไปนี้:

@import 'newerbrowsers.css';

body {
  font-size:13px;
}

ในแผ่นงานที่กำหนดเองที่นำเข้าของคุณ (newerbrowsers.css) เพียงใช้รูปแบบการเรียงซ้อนที่ใหม่กว่า:

html body {
  font-size:1em;
}

การใช้หน่วย "em" นั้นยอดเยี่ยมกว่าหน่วย "px" เนื่องจากอนุญาตให้ทั้งแบบอักษรและการออกแบบยืดตามการตั้งค่าผู้ใช้ซึ่งเบราว์เซอร์รุ่นเก่าทำได้ดีกว่าด้วยพิกเซลที่ใช้ (ซึ่งเข้มงวดและไม่สามารถเปลี่ยนแปลงได้ในการตั้งค่าผู้ใช้เบราว์เซอร์) . เบราว์เซอร์รุ่นเก่าส่วนใหญ่จะไม่เห็นชีตที่นำเข้า

คุณอาจเป็นเช่นนั้นใครจะสน! ลองไปที่รัฐบาลหรือระบบองค์กรขนาดใหญ่ที่เก่าแก่และคุณจะยังคงเห็นเบราว์เซอร์รุ่นเก่าที่ใช้อยู่ แต่มันก็แค่การออกแบบที่ดีจริงๆเพราะเบราว์เซอร์ที่คุณชื่นชอบในวันนี้ก็จะถูกโบราณและล้าสมัยเช่นกัน และการใช้ CSS ในทางที่ จำกัด หมายความว่าตอนนี้คุณมีกลุ่มตัวแทนผู้ใช้ที่ใหญ่ขึ้นและเติบโตขึ้นซึ่งไม่สามารถทำงานได้ดีกับไซต์ของคุณ

การใช้ @ นำเข้าความเข้ากันได้ของเว็บไซต์ข้ามเบราว์เซอร์จะมีความอิ่มตัว 99.9% เพียงเพราะเบราว์เซอร์รุ่นเก่าจำนวนมากไม่อ่านแผ่นงานที่นำเข้า มันรับประกันว่าคุณจะใช้ชุดแบบอักษรพื้นฐานขั้นพื้นฐานสำหรับ html ของพวกเขา แต่ CSS ขั้นสูงจะถูกใช้โดยเอเจนต์ที่ใหม่กว่า สิ่งนี้ช่วยให้เนื้อหาสามารถเข้าถึงได้สำหรับเอเจนต์รุ่นเก่าโดยไม่สูญเสียการแสดงผลภาพสมบูรณ์ที่ต้องการในเบราว์เซอร์เดสก์ท็อปรุ่นใหม่

โปรดจำไว้ว่าเบราว์เซอร์สมัยใหม่จะใช้โครงสร้าง HTML และ CSS เป็นอย่างดีหลังจากการโทรครั้งแรกไปยังเว็บไซต์ การเรียกหลายครั้งไปยังเซิร์ฟเวอร์ไม่ใช่คอขวดที่ครั้งหนึ่งเคยเป็น

เมกะไบต์และเมกะไบต์ของ Javascript API และ JSON ที่อัปโหลดไปยังอุปกรณ์สมาร์ทและมาร์กอัป HTML ที่ออกแบบมาไม่ดีซึ่งไม่สอดคล้องกันระหว่างหน้าเป็นตัวขับเคลื่อนหลักของการแสดงผลช้าในวันนี้ หน้าข่าวเฉลี่ยของ Google ที่คุณใช้อยู่นั้นมีขนาด ECMAScript กว่า 6 เมกะไบต์เพื่อแสดงข้อความเพียงเล็กน้อย! ฮ่า ๆ

ไม่กี่กิโลไบต์ของแคช CSS และ HTML ที่สอดคล้องกันที่มีรอยเท้าจาวาสคริปต์ขนาดเล็กจะแสดงผลใน user-agent ด้วยความเร็วสูงเพียงเพราะเบราว์เซอร์แคชทั้งมาร์กอัป DOM และ CSS ที่สอดคล้องกันเว้นแต่ว่าคุณเลือกที่จะจัดการและเปลี่ยนแปลง

ฉันคิดว่ากุญแจสำคัญในนี้เป็นสองเหตุผลที่คุณกำลังเขียนสไตล์ชีต CSS หลายอัน

1. คุณเขียนหลายแผ่นเนื่องจากหน้าต่างๆในเว็บไซต์ของคุณต้องการคำจำกัดความ CSS ที่แตกต่างกัน หรืออย่างน้อยก็ไม่จำเป็นต้องมีข้อกำหนด CSS ทั้งหมดอีกหนึ่งหน้าต้องการ ดังนั้นคุณจึงแยกไฟล์ CSS เพื่อปรับแต่งชีตที่โหลดบนหน้าต่างๆและหลีกเลี่ยงการโหลดคำจำกัดความของ CSS มากเกินไป
2. เหตุผลข้อที่สองที่ควรคำนึงถึงก็คือ CSS ของคุณมีขนาดใหญ่พอที่จะจัดการและเพื่อให้ง่ายต่อการดูแลไฟล์ CSS ขนาดใหญ่คุณจะแบ่งไฟล์เหล่านั้นออกเป็นไฟล์ CSS หลายไฟล์

ด้วยเหตุผลแรก<link>แท็กเพิ่มเติมจะนำมาใช้เนื่องจากจะทำให้คุณสามารถโหลดชุดไฟล์ CSS ที่แตกต่างกันสำหรับหน้าต่างๆ

ด้วยเหตุผลที่สอง@importคำแถลงนี้ปรากฏว่ามีประโยชน์มากที่สุดเพราะคุณได้รับไฟล์ CSS หลายไฟล์ แต่ไฟล์ที่โหลดนั้นเหมือนกันเสมอ

จากมุมมองของเวลาในการโหลดไม่แตกต่างกัน เบราว์เซอร์จะต้องตรวจสอบและดาวน์โหลดไฟล์ CSS แยกต่างหากไม่ว่าจะมีการใช้งานอย่างไร

ใช้ @import ใน CSS ของคุณหากคุณใช้ CSS RESET เช่น Eric CSS Meyer's Reset CSS v2.0 ดังนั้นจึงเป็นไปได้ก่อนที่จะใช้ CSS ของคุณซึ่งจะช่วยป้องกันความขัดแย้ง

ฉันคิดว่า @import มีประโยชน์มากที่สุดเมื่อเขียนรหัสสำหรับอุปกรณ์หลายเครื่อง รวมคำสั่งแบบมีเงื่อนไขเพื่อรวมสไตล์สำหรับอุปกรณ์ที่เป็นปัญหาจากนั้นโหลดแผ่นงานเพียงแผ่นเดียว คุณยังสามารถใช้แท็กลิงก์เพื่อเพิ่มองค์ประกอบสไตล์ทั่วไปได้

ฉันพบ "สไตล์ยอดนิยมสูงสุด" ของสไตล์ชีทที่คุณสามารถเพิ่มได้ ในขณะที่การเพิ่ม Javascript ที่เชื่อมโยงจำนวนเท่าใดก็ไม่ได้เป็นปัญหาสำหรับผู้ให้บริการโฮสต์ฟรีของฉันหลังจากเพิ่มสไตล์ชีตภายนอกจำนวนสองเท่าฉันได้รับความเสียหาย / ช้าลง และตัวอย่างรหัสที่ถูกต้องคือ:

@import 'stylesheetB.css';

ดังนั้นฉันคิดว่ามันมีประโยชน์สำหรับการมีแผนที่จิตที่ดีตามที่ Nitram พูดถึงในขณะที่ยังคงออกแบบรหัสอย่างหนักอยู่ โชคดี และฉันให้อภัยความผิดพลาดทางไวยากรณ์ภาษาอังกฤษถ้ามี

แทบไม่มีเหตุผลที่จะใช้ @import เนื่องจากโหลดไฟล์ CSS ที่นำเข้าทุกไฟล์แยกกันและสามารถทำให้เว็บไซต์ของคุณช้าลงอย่างเห็นได้ชัด หากคุณสนใจวิธีที่ดีที่สุดในการจัดการกับ CSS (เมื่อมาถึงความเร็วหน้า) นี่คือวิธีที่คุณควรจัดการกับโค้ด CSS ของคุณทั้งหมด :

• เปิดไฟล์ CSS ของคุณทั้งหมดและคัดลอกรหัสของไฟล์ทุกไฟล์
• วางรหัสทั้งหมดในระหว่างแท็กสไตล์เดียวในส่วนหัว HTML ของหน้าเว็บของคุณ
• อย่าใช้ CSS @import หรือแยกไฟล์ CSS เพื่อส่ง CSS ยกเว้นว่าคุณมีโค้ดจำนวนมากหรือมีความต้องการเฉพาะ

ข้อมูลรายละเอียดเพิ่มเติมได้ที่นี่: http://www.giftofspeed.com/optimize-css-delivery/

เหตุผลข้างต้นทำงานได้ดีที่สุดเนื่องจากสร้างคำขอน้อยกว่าสำหรับเบราว์เซอร์ที่จะจัดการและสามารถเริ่มการแสดงผล CSS ได้ทันทีแทนที่จะดาวน์โหลดไฟล์แยกต่างหาก

นี่อาจช่วยนักพัฒนา PHP ได้ ฟังก์ชั่นด้านล่างจะตัดพื้นที่สีขาวลบความคิดเห็นและเชื่อมไฟล์ CSS ทั้งหมดของคุณ จากนั้นใส่ลงใน<style>แท็กที่ส่วนหัวก่อนโหลดหน้า

ฟังก์ชั่นด้านล่างจะตัดความคิดเห็นและลดขนาดการส่งผ่านเป็น css มันถูกจับคู่ร่วมกับฟังก์ชั่นถัดไป

<?php
function minifyCSS($string)
{
    // Minify CSS and strip comments

    # Strips Comments
    $string = preg_replace('!/\*.*?\*/!s','', $string);
    $string = preg_replace('/\n\s*\n/',"\n", $string);

    # Minifies
    $string = preg_replace('/[\n\r \t]/',' ', $string);
    $string = preg_replace('/ +/',' ', $string);
    $string = preg_replace('/ ?([,:;{}]) ?/','$1',$string);

    # Remove semicolon
    $string = preg_replace('/;}/','}',$string);

    # Return Minified CSS
    return $string;
}
?>

คุณจะเรียกใช้ฟังก์ชันนี้ในส่วนหัวของเอกสารของคุณ

<?php
function concatenateCSS($cssFiles)
{
    // Load all relevant css files

    # concatenate all relevant css files
    $css = '';
    foreach ($cssFiles as $cssFile)
    {
        $css = $css . file_get_contents("$cssFile.css");
    }

    # minify all css
    $css = minifyCSS($css);
    echo "<style>$css</style>";
}
?>

รวมฟังก์ชั่นconcatenateCSS()ในส่วนหัวเอกสารของคุณ ผ่านในอาร์เรย์ที่มีชื่อของสไตล์ชีตของคุณกับเส้นทางของมัน IE css/styles.cssนี้: คุณไม่จำเป็นต้องเพิ่มส่วนขยาย.cssเนื่องจากจะถูกเพิ่มโดยอัตโนมัติในฟังก์ชั่นด้านบน

<head>
    <title></title>
    <?php
    $stylesheets = array(
        "bootstrap/css/bootstrap.min", 
        "css/owl-carousel.min", 
        "css/style"
        );
    concatenateCSS( $stylesheets );
    ?>
</head>