ฉันควรแบ่งไฟล์ข้อความค้นหาสื่อ CSS ขนาดใหญ่เป็นไฟล์แยกสำหรับขนาดหน้าจอแต่ละรายการหรือไม่

ฉันกำลังทำงานบนเว็บไซต์ออกแบบที่ตอบสนองเพื่อส่งเนื้อหาสำหรับทุกขนาดหน้าจอ ฉันมีการสืบค้นสื่อสำหรับ "ขั้นตอน" 5 แบบที่แตกต่างกันและไฟล์ CSS ประมาณ 30 Kb

มันจะดีกว่าไหมที่จะแยกไฟล์นี้เป็นไฟล์ที่แยกกันและทำให้มันเป็นแบบนี้:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

หรือฉันควรเก็บไว้ในไฟล์ CSS เดียว?

อัปเดต: ฉันแค่ต้องการเพิ่มว่าข้อกังวลหลักของฉันคือข้ามเบราว์เซอร์ / การเปิดหน้าอุปกรณ์ / ความเร็วในการแสดงผลไม่ใช่ความง่ายในการพัฒนา

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

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

ตามคำตอบในโพสต์นี้เบราว์เซอร์จะดาวน์โหลดสไตล์ชีตทั้งหมดโดยไม่คำนึงถึงดังนั้นการแยกความละเอียดจึงไม่ใช่การประหยัดแบนด์วิดท์: /programming/16657159/when-using-media-queries-does-a -Phone โหลดที่ไม่เกี่ยวข้องแบบสอบถามและภาพ

ขึ้นอยู่กับสิ่งที่คุณต้องการบรรลุผลเล็กน้อย: คุณพยายามทำให้หน้าโหลดเร็วขึ้นหรือคุณพยายามทำให้การพัฒนาง่ายขึ้นหรือไม่

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

หากคุณต้องการหน้าโหลดที่เร็วกว่าทางออกที่ดีที่สุดของคุณคือการลดจำนวนคำขอเนื่องจากค่าใช้จ่ายคำขอมีขนาดใหญ่มาก ยิ่งไปกว่านั้นคุณยังสามารถพัฒนาเวอร์ชันสำหรับตัวคุณเองและใช้ css ที่ย่อเล็กสุดลงในเว็บได้ (ฉันพบว่า YUI เป็นวิธีที่ดี: http://www.refresh-sf.com/yui/ )

ต่อไปฉันจะพยายามเพิ่มประสิทธิภาพ css เอง คุณสามารถลองรวมคลาสที่คล้ายกันมากเช่น:

.bold-and-italic { font-weight: bold; text-style: italic; }

สามารถแปลงเป็น:

.bold { font-weight: bold; }
.italic { text-style: italic; }

สิ่งเดียวคือคุณต้องเปลี่ยน html เล็กน้อยจาก<span class="bold-and-italic">foo bar</span>เป็น<span class="bold italic">foo bar</span>

ฉันขอแนะนำให้คุณลองดูที่ Bootstrap ( http://getbootstrap.com ) พวกนี้ทำได้ดีมากในการแบ่งชั้นเรียนออกเป็นหลาย 'คลาสย่อย'

ฉันหวังว่านี่จะช่วยได้.

มันอาจจะดีที่สุดที่จะมีไฟล์ CSS เพียงไฟล์เดียว แต่เพื่อลดขนาดและ gzip สมมติว่า 30KB ของคุณก่อนทำเช่นนั้นคุณอาจจะลดขนาดไฟล์ลงเหลือประมาณ 5KB ด้วยการลดขนาด (การลบพื้นที่สีขาว) และ gzipping

การแยกขึ้นอาจทำให้คุณได้รับความเร็วมากขึ้น แต่ภายใต้เงื่อนไขบางประการเท่านั้น

• คุณต้องตรวจสอบให้แน่ใจว่ามีการโหลดสไตล์ชีทเพียงครั้งเดียวในแต่ละครั้งมิฉะนั้นคุณจะต้องมีคำขอ HTTP สองคำขอขึ้นไปซึ่งมีค่าใช้จ่ายเองซึ่งอย่างน้อยก็จะไม่ได้รับผลกำไรจากขนาดไฟล์ที่เล็กลง ในการทำเช่นนี้มันไม่พอเพียงแยกสไตล์ชีทและแทรกหลาย<link>แท็กด้วยแอ็ตทริบิวต์สื่อที่แตกต่างกันดูเหมือนว่าเบราว์เซอร์จะโหลด<link>สไตล์ชีต ed ทั้งหมดโดยไม่คำนึงถึงคำสั่งสื่อ (ขอบคุณ @cimmanon สำหรับข้อมูลนี้ .
• จำนวนกฎ CSS ที่แบ่งใช้ระหว่างสไตล์ชีตต้องมีขนาดเล็กมิฉะนั้นแต่ละสไตล์ชีตหลายรายการจะต้องมีกฎทั่วไปทั้งหมดและจะมีขนาดเกือบเป็นต้นฉบับ
• คุณใช้ตัวประมวลผลล่วงหน้า CSS (หรือบางอย่างที่คล้ายกัน) ดังนั้นจึงสามารถจัดการได้ที่จะมีรหัสชิ้นเดียวกันใน 5 stylesheets

ยัง: อย่าเพิ่มประสิทธิภาพก่อนเวลาอันควร ทำเช่นนั้นหากคุณมีปัญหาด้านประสิทธิภาพ

คุณควรแยกไฟล์ CSS ตามข้อความค้นหาสื่อเนื่องจากไฟล์ CSS กำลังแสดงการบล็อก

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

นอกจากนี้ยังเป็นการเพิ่ม async ให้กับแท็กสคริปต์ JavaScript; อดีต<script src='myfile.js' async></script>.:

DOM ไม่ต้องรอให้โหลดไฟล์ JS ของคุณ เพิ่ม async เฉพาะเมื่อการสร้าง DOM ของคุณไม่ต้องการ JavaScript ใด ๆ ที่ onload

ฉันอยากจะพูดแบบนี้

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

การพัฒนาเป็นปลากาต้มน้ำที่แตกต่างกัน ฉันมักจะแบ่งการสืบค้นของสื่อเพื่อให้พวกเขามีองค์ประกอบอะไรเช่น:

.foo { // .. some css }
.foo:hover, .foo:focus { // hover css }
@media screen and (max-width: 400px) {
    .foo { // .. some differentcss }
}

โดยทั่วไปถ้าฉันเปลี่ยนองค์ประกอบฉันไม่ต้องการที่จะตามล่าทั่วสถานที่สำหรับ CSS (แม้ว่าคุณจะสามารถใช้สิ่งที่ต้องการ grep ... )

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

ง่าย: ใช้ 1 สไตล์ชีทและเพิ่มความคิดเห็นเพื่อให้ง่ายต่อการค้นหาและเปลี่ยนสไตล์ CSS เช่น:

//sheet 1 (mobile device 800 px)
code

//sheet 2 (mobile device 768 px)
code

//sheet 3 (mobile device 480 px)
code

//sheet 4 (desktop size 1024 px)
code

หากคุณต้องการคุณสามารถใช้สไตล์ชีตหลายแบบและเรียกใช้สไตล์แต่ละขนาด

ผมค่อนข้างจะมองไปที่เงินทุน เป็นไฟล์ CSS 1 ไฟล์ที่มี CSS ทั้งหมด ใช้งานได้กับเบราว์เซอร์เกือบ 99% และตอบสนองได้อย่างดีเยี่ยม

คลิกที่การสาธิตสดพร้อมซูมเข้า ( Ctrl += ซูมเข้าCtrl -= ซูมออกCtrl 0= ปกติ) หรือเปิดบนมือถือของคุณเพื่อดูว่ามันแสดงผลอย่างไร