วิธีการจัดโครงสร้างแบบสอบถามสื่อใน Sass

Sep 15, 2025
วิธีการ
Sass logo

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

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

เพิ่งเริ่มต้นกับเว็บไซต์ของคุณ? เลือก สร้างเว็บไซต์ และ เว็บโฮสติ้ง บริการ. ทำงานกับทีมใหญ่ ๆ ? ตรวจสอบให้แน่ใจของคุณ การจัดเก็บเมฆ ทำให้ทุกคนทันสมัยกับระบบการออกแบบของคุณ

  • Sass คืออะไร

CSS ในอดีต

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

ใช้สถานการณ์สมมติต่อไปนี้เป็นตัวอย่าง: 

. เฮดิง {พื้นหลัง: # 000000; };
.title {ขนาดตัวอักษร: 16px; };
.TITLE_SMALL {ขนาดฟอนต์: 14px; }
.title_alt {Font-Family: Sans-Serif; }

แม้ว่าคุณอาจคิดว่าปลอดภัยที่จะสมมติว่าองค์ประกอบ. title เป็นชื่อขององค์ประกอบ. heading ในบริบทนี้ที่จริงแล้วคุณไม่สามารถมั่นใจได้อย่างสมบูรณ์ว่ามันไม่ได้ใช้ในการจัดสไตล์องค์ประกอบชื่อเรื่องอื่น ๆ ในเว็บไซต์ . นอกจากนี้ยังอยู่ที่ไหน. title_alt คลาสใช้งานและยังต้องการหรือใช้งานอยู่? คุณสามารถดูได้ว่ามันเป็นตัวอย่างง่ายๆที่ง่ายต่อการใช้งานที่ใช้เวลานานในการตรวจสอบทั้งหมดนี้ก่อนทำการเปลี่ยนแปลง

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

preprocessors, อนุสัญญาตั้งชื่อและ css แบบแยกส่วน

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

ตามการตั้งชื่ออนุสัญญาและวิธีการ CSS เช่น งอ ซึ่งเมื่อนำไปใช้ให้ระดับบริบทที่สูงขึ้นเป็นรูปแบบ

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

ด้านล่างนี้คุณสามารถดูว่าการปรับปรุงเหล่านี้สามารถแก้ปัญหาที่เราพบกับตัวอย่างโค้ดก่อนหน้านี้: 

. เฮดิง {
พื้นหลัง: $ black;
}

. heading__title {
ขนาดตัวอักษร: 16px;

& amp; .heading__title - เล็ก {
ขนาดตัวอักษร: 14px;
}
}

.post__title - Alt {
ตัวอักษรตระกูล: Sans-Serif;
}

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

ในความคิดของฉันเมื่อทำตามการรวมกันของโครงสร้างและระเบียบวิธีการตั้งชื่อมันค่อนข้างง่ายในการสร้างสไตล์ CSS ที่สะอาดและบำรุงรักษาได้ง่าย บริบทสามารถรับได้อย่างรวดเร็วและโมดูลที่มีอยู่ในตัวเองของ CSS สามารถคัดลอกและวางในโครงการอื่น ๆ หรือแก้ไขและลบได้อย่างง่ายดาย

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

การแก้ปัญหานี้คือที่ที่สื่อสบู่สกรูเข้ามาเล่น

สถานที่สไตล์ตอบสนอง

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

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

บางคนสร้าง sass แยกต่างหากชื่อ _mobile.scss หรือ _tablet.scss แบบสอบถามสื่อบางอย่างที่ด้านล่างของไฟล์ที่เกี่ยวข้องในลำดับจากน้อยไปมากหรือน้อยลงและอื่น ๆ เพียงแค่วางพวกเขาสุ่มระหว่างสไตล์สำหรับองค์ประกอบอื่น ๆ ด้วยวิธีนี้ฉันพบว่าตัวเองติดแท็บระหว่างไฟล์และเลื่อนไปที่ด้านบนและด้านล่างของไฟล์เพื่อให้ได้ความเข้าใจอย่างเต็มรูปแบบของสไตล์องค์ประกอบหนึ่งในช่วงเบรกพอยต์ที่แตกต่างกัน

สืบค้นสื่อ

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

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

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

. พัชเซอร์ {
พื้นหลัง: $ black;

@Media หน้าจอเท่านั้นและ (min-width: 640px) {
พื้นหลัง: $ white;
}
}

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

สืบค้นสืบค้นสื่อซ้อน

อีกครั้งฉันได้เห็นการเปลี่ยนแปลงมากมายของวิธีที่นักพัฒนาเลือกที่จะจัดโครงสร้างสไตล์การตอบสนองขององค์ประกอบของพวกเขา สิ่งนี้ควรพิจารณาไม่แตกต่างจากการจัดแต่งทรงผมองค์ประกอบหลักและการสืบค้นและสไตล์สื่อทั้งหมดควรอยู่ในตัวเอง ดูตัวอย่างต่อไปนี้: 

. เฮด __title {
ขนาดตัวอักษร: 16px;

@Media หน้าจอเท่านั้นและ (min-width: 640px) {
ขนาดตัวอักษร: 18px;
}

& amp; .heading__title - เล็ก {
ขนาดตัวอักษร: 14px;

@Media หน้าจอเท่านั้นและ (min-width: 640px) {
ขนาดตัวอักษร: 16px;
}
}
}

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

สไตล์ตอบสนองที่สะอาดกว่า

ด้วยการเรียนรู้สิ่งที่เราเรียนรู้จากผลประโยชน์ที่ได้รับจาก Bem และ Modular CSS และใช้กับการสืบค้นสื่อภายในโครงสร้างเดียวกันเราหยุดตัวเองจากการทำซ้ำข้อผิดพลาดในอดีตของเรา

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

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

บทความนี้ได้รับการตีพิมพ์ครั้งแรกใน สุทธิ นิตยสารสำหรับนักออกแบบเว็บไซต์มืออาชีพและนักพัฒนา สมัครสมาชิก NET ที่นี่ .

บทความที่เกี่ยวข้อง:

  • สร้างภาพเคลื่อนไหว UI CSS เย็นกับ Sass
  • 10 สิ่งที่คุณไม่เคยรู้ว่าคุณสามารถทำได้กับ Sass
  • เครื่องมือออกแบบเว็บเพื่อช่วยให้คุณทำงานอย่างชาญฉลาด

วิธีการ - บทความยอดนิยม

วิธีการเขียนโค้ด HTML ได้เร็วขึ้น

วิธีการ Sep 15, 2025

(เครดิตรูปภาพ: ในอนาคต) เว็บไซต์ที่ทันสมัย�..

44 ของทางลัด iPad ที่ดีที่สุดสำหรับ iPados 2020

วิธีการ Sep 15, 2025

(เครดิตรูปภาพ: ในอนาคต) ข้ามไปที่: ..

เริ่มต้นกับแพลตฟอร์มภาพเคลื่อนไหว Greensock

วิธีการ Sep 15, 2025

แพลตฟอร์มแอนิเมชั่น Greensock (GSAP) ช่วยให้คุณสามารถเค..

การแนะนำคุณสมบัติที่กำหนดเอง CSS

วิธีการ Sep 15, 2025

หนึ่งในคุณสมบัติที่ดีที่สุดของโปรเซสเซอร์ CSS �..

สร้างเอฟเฟกต์ข้อความ 3D แบบเคลื่อนไหว

วิธีการ Sep 15, 2025

รักหายไป โดยแคนาดา jam3 เป็นบทกวีแบบอินเทอร์แ..

15 เคล็ดลับแนวหน้าแฟนตาซี

วิธีการ Sep 15, 2025

หน้า 1 จาก 2: หน้า 1 หน้า 1 ..

วิธีการปั้น Goblin ที่พิมพ์ 3 มิติ

วิธีการ Sep 15, 2025

แนวคิดสำหรับโครงการนี้เห็ด Goblin มาจากการวาดภาพ�..

วิธีใช้คุณสมบัติ 'Match Font' ของ Photoshop

วิธีการ Sep 15, 2025

นักออกแบบและโฆษณาจากทุกฟิลด์เป็นเหมือน Magpies ใน..

หมวดหมู่