ไฟล์. css ขนาดใหญ่ไฟล์เดียวเทียบกับไฟล์. css เฉพาะขนาดเล็กหลายไฟล์ [ปิด]

มีข้อได้เปรียบในการมีไฟล์. ccss สัตว์ประหลาดหนึ่งตัวที่มีองค์ประกอบของสไตล์ที่จะใช้กับแทบทุกหน้าหรือไม่?

ฉันคิดว่าเพื่อความสะดวกในการจัดการฉันต้องการดึง CSS ประเภทต่างๆออกเป็นไฟล์สองสามไฟล์และการรวมทุกไฟล์ในไฟล์หลักของฉันนั้น<link />ไม่ดีเลยเหรอ?

ฉันคิดว่ามันดีกว่า

1. positions.css
2. buttons.css
3. tables.css
4. copy.css

เมื่อเทียบกับ

1. site.css

คุณเคยเห็น gotchas ด้วยวิธีใดวิธีหนึ่งเปรียบเทียบกับวิธีอื่นหรือไม่?

คอมไพเลอร์ CSS เช่น Sass หรือ LESS เป็นวิธีที่ยอดเยี่ยม ด้วยวิธีนี้คุณจะสามารถส่งไฟล์ CSS ที่ย่อเล็กสุดหนึ่งไฟล์สำหรับไซต์ (ซึ่งจะเล็กกว่าและเร็วกว่าไฟล์ต้นฉบับ CSS เดียว) ในขณะที่ยังคงสภาพแวดล้อมการพัฒนาที่ดีที่สุด

Sass และ LESS มีข้อได้เปรียบเพิ่มเติมของตัวแปรการซ้อนและวิธีอื่น ๆ เพื่อทำให้ CSS ง่ายต่อการเขียนและบำรุงรักษา ขอแนะนำอย่างยิ่ง ตอนนี้ฉันใช้ Sass (ไวยากรณ์ SCSS) เป็นการส่วนตัว แต่ใช้ LESS ก่อนหน้านี้ ทั้งสองอย่างยอดเยี่ยมพร้อมผลประโยชน์ที่คล้ายคลึงกัน เมื่อคุณเขียน CSS ด้วยคอมไพเลอร์ก็ไม่น่าที่คุณจะทำโดยไม่มีใคร

http://lesscss.org

http://sass-lang.com

หากคุณไม่ต้องการยุ่งกับ Ruby คอมไพเลอร์ LESS สำหรับ Mac นี้ยอดเยี่ยม:

http://incident57.com/less/

หรือคุณสามารถใช้ CodeKit (โดยคนเดียวกัน):

http://incident57.com/codekit/

WinLess เป็น Windows GUI สำหรับการลดค่าใช้จ่าย

http://winless.org/

นี่เป็นคำตอบที่ยากมาก ตัวเลือกทั้งสองมีข้อดีและข้อเสียในความคิดของฉัน

ฉันเองไม่ชอบอ่านไฟล์ CSS ขนาดใหญ่เพียงไฟล์เดียวและการบำรุงรักษามันยากมาก ในทางกลับกันการแยกมันออกจะทำให้เกิดคำขอ HTTP เพิ่มเติมซึ่งอาจทำให้ช้าลง

ความคิดเห็นของฉันจะเป็นหนึ่งในสองสิ่ง

1) ถ้าคุณรู้ว่า CSS ของคุณจะไม่เปลี่ยนแปลงเมื่อคุณสร้างมันขึ้นมาฉันจะสร้างไฟล์ CSS หลายไฟล์ในขั้นตอนการพัฒนา (เพื่อให้อ่านได้) จากนั้นรวมไฟล์เหล่านั้นด้วยตนเองก่อนที่จะใช้งานจริง (เพื่อลดคำขอ HTTP)

2) หากคุณรู้ว่าคุณกำลังจะเปลี่ยน CSS ของคุณเป็นระยะ ๆ และต้องการให้มันอ่านได้ฉันจะสร้างไฟล์แยกต่างหากและใช้รหัส (ให้คุณใช้ภาษาโปรแกรมบางอย่าง) เพื่อรวมเข้าด้วยกันเวลาสร้างรันไทม์ (การลดขนาด / การรวมรันไทม์เป็นหมูทรัพยากร)

ด้วยตัวเลือกทั้งสองฉันขอแนะนำให้แคชบนฝั่งไคลเอ็นต์เพื่อลดคำขอ http เพิ่มเติม

แก้ไข:
ฉันพบบล็อกนี้ที่แสดงวิธีรวม CSS ที่รันไทม์โดยไม่ใช้อะไรนอกจากโค้ด ควรค่าแก่การดู (แม้ว่าฉันยังไม่ได้ทดสอบด้วยตัวเอง)

แก้ไข 2:
ฉันได้ตัดสินโดยใช้ไฟล์แยกต่างหากในเวลาออกแบบของฉันและกระบวนการสร้างเพื่อย่อและรวม วิธีนี้ฉันสามารถแยก (จัดการได้) css ในขณะที่ฉันพัฒนาและเป็นไฟล์ monolithic minified ที่เหมาะสมในขณะใช้งานจริง และฉันยังคงมีไฟล์สแตติกของฉันและค่าใช้จ่ายของระบบน้อยลงเพราะฉันไม่ได้ทำการบีบอัด / ลดขนาดที่รันไทม์

หมายเหตุ: สำหรับผู้ซื้อของคุณฉันขอแนะนำให้ใช้ตัวรวมเป็นส่วนหนึ่งของกระบวนการสร้างของคุณ ไม่ว่าคุณจะสร้างจากภายใน IDE ของคุณหรือจากสคริปต์การสร้าง Bundler สามารถดำเนินการบน Windows ผ่านทางรวมexeหรือสามารถเรียกใช้บนเครื่องใด ๆ ที่กำลังทำงานอยู่ node.js

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

คุณต้องการทั้งสองโลก

คุณต้องการไฟล์ CSS หลายไฟล์เพราะสติของคุณเป็นสิ่งที่น่ากลัวมาก

ในเวลาเดียวกันมันจะดีกว่าถ้ามีไฟล์เดียวที่มีขนาดใหญ่

การแก้ปัญหาคือการมีกลไกบางอย่างที่รวมหลายไฟล์ในไฟล์เดียว

ตัวอย่างหนึ่งก็เหมือนกับ

<link rel="stylesheet" type="text/css" href="allcss.php?files=positions.css,buttons.css,copy.css" />

จากนั้นสคริปต์ allcss.php จะจัดการการต่อเชื่อมไฟล์และส่งไฟล์

ตามหลักการแล้วสคริปต์จะตรวจสอบวันที่แก้ไขในไฟล์ทั้งหมดสร้างคอมโพสิตใหม่หากมีการเปลี่ยนแปลงใด ๆ จากนั้นส่งคืนคอมโพสิตนั้นจากนั้นตรวจสอบกับส่วนหัว If-Modified HTTP เพื่อไม่ให้ส่ง CSS ที่ซ้ำซ้อน

สิ่งนี้ให้สิ่งที่ดีที่สุดสำหรับคุณทั้งสองโลก ใช้งานได้ดีสำหรับ JS เช่นกัน

การมีไฟล์ CSS เพียงไฟล์เดียวจะดีกว่าสำหรับการโหลดหน้าเว็บของคุณเนื่องจากมันหมายถึงคำขอ HTTP ที่น้อยลง

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

ดังนั้นจึงมีเหตุผลที่ดีในทั้งสองกรณี ...

ทางออกที่จะช่วยให้คุณได้รับความคิดที่ดีที่สุดทั้งสองคือ:

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

นอกจากนี้ยังมีซอฟต์แวร์บางอย่างที่รวมไฟล์ CSS ณ เวลาทำงานไม่ใช่ในเวลาบิลด์อิน แต่ทำในเวลาทำงานหมายถึงการกินซีพียูอีกเล็กน้อย(และ obvisouly ต้องการ mecanism แคชบางอย่างที่จะไม่สร้างไฟล์ขนาดใหญ่อีกครั้งบ่อยเกินไป)

ในอดีตข้อดีอย่างหนึ่งของการมีไฟล์ CSS ไฟล์เดียวคือข้อดีของความเร็วเมื่อใช้ HTTP1.1

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

การออกแบบที่เหมาะสำหรับ HTTP2 เพื่อประสิทธิภาพที่ดีที่สุดคือ:

• มีไฟล์ CSS หลักซึ่งมีสไตล์ทั่วไปที่ใช้กับทุกหน้า
• มี CSS เฉพาะหน้าในไฟล์แยกต่างหาก
• ใช้ HTTP2 push CSS เพื่อลดเวลารอ (สามารถใช้คุกกี้เพื่อป้องกันการกดซ้ำ)
• เลือกแยกข้างบนพับ CSS และกดปุ่มนี้ก่อนและโหลด CSS ที่เหลือในภายหลัง
• คุณสามารถโหลด CSS ที่เหลือสำหรับเว็บไซต์หรือหน้าเฉพาะหลังจากที่โหลดหน้าเว็บได้หากคุณต้องการเพิ่มความเร็วในการโหลดหน้าในอนาคต

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

นี่สำหรับ IE ทุกรุ่น

ดูบล็อกรอสส์ Brunigesและหน้า MSDN AddRule

มีจุดเปลี่ยนที่เป็นประโยชน์ในการมีไฟล์ css มากกว่าหนึ่งไฟล์

ไซต์ที่มี 1M + หน้าซึ่งผู้ใช้โดยเฉลี่ยมีแนวโน้มที่จะเห็นว่ามีเพียง 5 คนเท่านั้นที่อาจมีสไตล์ชีทที่มีสัดส่วนมหาศาลดังนั้นพยายามที่จะบันทึกค่าใช้จ่ายของคำขอเพิ่มเติมครั้งเดียวต่อการโหลดหน้าเว็บหนึ่งครั้ง เศรษฐกิจ.

ยืดการโต้แย้งให้มีขีด จำกัด มากที่สุด - เหมือนการแนะนำว่าควรมีสไตล์ชีทขนาดใหญ่หนึ่งรายการสำหรับเว็บทั้งหมด ไร้สาระอย่างชัดเจน

จุดเปลี่ยนจะแตกต่างกันไปในแต่ละเว็บไซต์ดังนั้นจึงไม่มีกฎที่ยากและรวดเร็ว ขึ้นอยู่กับปริมาณของ css ที่ไม่ซ้ำกันต่อหน้าจำนวนหน้าและจำนวนหน้าที่ผู้ใช้โดยเฉลี่ยมีแนวโน้มที่จะพบเป็นประจำในขณะที่ใช้งานเว็บไซต์

ฉันมักจะมีไฟล์ CSS จำนวนหนึ่ง:

• ไฟล์ "global" css สำหรับรีเซ็ตและสไตล์สากล
• "โมดูล" ไฟล์ css เฉพาะสำหรับหน้าเว็บที่จัดกลุ่มตามหลักเหตุผล (อาจเป็นทุกหน้าในวิซาร์ดการชำระเงินหรือบางอย่าง)
• "หน้า" ไฟล์ css เฉพาะสำหรับการแทนที่บนหน้า (หรือใส่ไว้ในบล็อกในแต่ละหน้า)

ฉันไม่ได้กังวลกับการร้องขอหลาย ๆ หน้าสำหรับไฟล์ CSS คนส่วนใหญ่มีแบนด์วิดท์ที่เหมาะสมและฉันแน่ใจว่ามีการเพิ่มประสิทธิภาพอื่น ๆ ที่จะมีผลกระทบมากกว่าการรวมสไตล์ทั้งหมดไว้ในไฟล์ CSS เดียว การแลกเปลี่ยนระหว่างความเร็วกับการบำรุงรักษาและฉันมักจะพึ่งพาการบำรุงรักษา ผู้ลงโฆษณา YUI ฟังดูเท่มากฉันอาจต้องลองดู

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

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

นี่คือวิธีที่ดีที่สุด:

1. สร้างไฟล์ css ทั่วไปพร้อมรหัสที่แชร์ทั้งหมด
2. แทรกโค้ด css ของหน้าทั้งหมดลงในหน้าเดียวกันบนแท็กหรือใช้ attribute style = "" สำหรับแต่ละหน้า

ด้วยวิธีนี้คุณมี css เพียงหนึ่งเดียวที่มีรหัสที่ใช้ร่วมกันทั้งหมดและหน้า html โดยวิธีการ (และฉันรู้ว่านี่ไม่ใช่หัวข้อที่ถูกต้อง) คุณยังสามารถเข้ารหัสภาพของคุณใน base64 (แต่คุณสามารถทำได้ด้วยไฟล์ js และ css) ด้วยวิธีนี้คุณจะลดคำขอ http มากยิ่งขึ้นเป็น 1

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

http://sass-lang.com http://lesscss.org

ในที่สุดไฟล์ CSS ย่อขนาดเล็กคือสิ่งที่คุณต้องการโดยไม่คำนึงถึงเทคนิคที่คุณใช้ CSS น้อย, คำขอ HTTP น้อยลง, ลดความต้องการบนเซิร์ฟเวอร์

ข้อดีของไฟล์ CSS เดียวคือประสิทธิภาพการถ่ายโอน คำขอ HTTP แต่ละรายการหมายถึงการตอบสนองส่วนหัว HTTP สำหรับแต่ละไฟล์ที่ร้องขอและใช้แบนด์วิดท์

ฉันให้บริการ CSS ของฉันเป็นไฟล์ PHP ด้วยประเภท "text / css" mime ในส่วนหัว HTTP ด้วยวิธีนี้ฉันสามารถมีไฟล์ CSS หลายไฟล์ที่ฝั่งเซิร์ฟเวอร์และใช้ PHP รวมถึงผลักพวกเขาเป็นไฟล์เดียวเมื่อผู้ใช้ร้องขอ เบราว์เซอร์สมัยใหม่ทุกอันได้รับไฟล์. php พร้อมโค้ด CSS และประมวลผลเป็นไฟล์. css

คุณสามารถใช้ไฟล์ css เพียงไฟล์เดียวเพื่อการทำงานแล้วออกความคิดเห็นในส่วนดังนี้:

/******** Header ************/
//some css here

/******* End Header *********/


/******** Footer ************/
//some css here

/******* End Footer *********/

ฯลฯ

ฉันใช้Jammitเพื่อจัดการไฟล์ css ของฉันและใช้ไฟล์ต่าง ๆ มากมายเพื่อให้อ่านง่าย Jammit ทำทุกสิ่งที่สกปรกในการรวมและบีบอัดไฟล์ก่อนที่จะนำไปใช้ในการผลิต ด้วยวิธีนี้ฉันมีไฟล์จำนวนมากในการพัฒนา แต่มีเพียงไฟล์เดียวในการผลิต

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

ดู: https://benfrain.com/css-performance-revisited-selectors-bloat- ราคา-styles/

ข้อดีสไตล์ชีตแบบรวม: - ประสิทธิภาพการโหลดหน้าเว็บ

ข้อด้อยสไตล์การใช้งานที่รวมมา: - พฤติกรรมที่ช้าลงซึ่งอาจทำให้เกิดการเปลี่ยนแปลงตลอดเวลาระหว่างการเลื่อนการโต้ตอบการเคลื่อนไหว

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

หากต้องการทราบว่าต้องใช้องค์ประกอบที่ใช้ร่วมกันร่วมกันในหน้าใดและเพื่อลดความซับซ้อนจะเป็นการดีที่ได้ประกาศส่วนประกอบทั้งหมดที่หน้านี้ใช้โดยเฉพาะ - ตัวอย่างเช่น:

<style href="global.css" rel="stylesheet"/>
<body data-shared-css-components="x,y,z">

ฉันได้สร้างแนวทางที่เป็นระบบเพื่อการพัฒนา CSS วิธีนี้ฉันสามารถใช้มาตรฐานที่ไม่เคยเปลี่ยนแปลง ครั้งแรกที่ฉันเริ่มต้นด้วยระบบกริด 960 จากนั้นฉันก็สร้าง css บรรทัดเดียวสำหรับเค้าโครงพื้นฐานระยะขอบการเติมแบบอักษรและขนาด จากนั้นฉันสตริงพวกเขาเข้าด้วยกันตามต้องการ สิ่งนี้ช่วยให้ฉันสามารถจัดวางเลย์เอาต์ที่สอดคล้องกันในทุกโปรเจ็กต์ของฉันและใช้ไฟล์ css เดียวกันซ้ำแล้วซ้ำอีก เพราะพวกเขาไม่ได้เฉพาะเจาะจง นี่คือตัวอย่าง: ---- div class = "c12 bg0 m10 p5 white fl" / div --- ซึ่งหมายความว่าคอนเทนเนอร์มี 12 คอลัมน์ข้ามใช้ bg0 มีระยะห่างจาก 10 px ของ 5 ข้อความเป็นสีขาวและมันลอย ซ้าย. ฉันสามารถเปลี่ยนสิ่งนี้ได้อย่างง่ายดายโดยการลบหรือเพิ่มใหม่ - สิ่งที่ฉันเรียกว่า "แสง" สไตล์ - แทนที่จะสร้างชั้นเดียวที่มีคุณสมบัติเหล่านี้ทั้งหมด; ฉันเพียงผสมผสานสไตล์เดียวเมื่อฉันรหัสหน้า สิ่งนี้ทำให้ฉันสามารถสร้างสไตล์ที่ผสมผสานและไม่ จำกัด ความคิดสร้างสรรค์ของฉันหรือทำให้ฉันสร้างสไตล์จำนวนมากที่คล้ายกัน สไตล์ชีตของคุณสามารถจัดการได้มากขึ้นย่อเล็กสุดและช่วยให้คุณสามารถนำกลับมาใช้ซ้ำได้ วิธีนี้ฉันพบว่ายอดเยี่ยมสำหรับการออกแบบที่รวดเร็ว ฉันยังไม่ได้ออกแบบเป็นอันดับแรกใน PSD แต่ในเบราว์เซอร์ที่ประหยัดเวลา นอกจากนี้เนื่องจากฉันได้สร้างระบบการตั้งชื่อสำหรับพื้นหลังและคุณลักษณะการออกแบบหน้าของฉันฉันเพียงแค่เปลี่ยนไฟล์ภาพของฉันเมื่อสร้างโครงการใหม่ (bg0 = พื้นหลังร่างกายตามระบบการตั้งชื่อของฉัน) นั่นหมายความว่าถ้าฉันมีสีขาว พื้นหลังที่มีโครงการหนึ่งเพียงแค่เปลี่ยนเป็นสีดำก็หมายความว่าในโครงการถัดไป bg0 จะเป็นพื้นหลังสีดำหรือภาพอื่น .....