การจัดกลุ่มตัวเลือก CSS หลายแบบ

กลุ่มตัวเลือก CSS หลายตัวเพื่อเพิ่มความเร็วในการโหลด

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

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

การจัดกลุ่มตัวเลือก

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

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

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

วิธีการจัดกลุ่มตัวเลือก CSS

เมื่อต้องการจัดกลุ่มตัวเลือก CSS ร่วมกันในสไตล์ชีตของคุณคุณ ใช้เครื่องหมายจุลภาคเพื่อแยกตัวเลือกแบบกลุ่มหลายแบบ ในสไตล์ ในตัวอย่างด้านล่างสไตล์จะส่งผลต่อองค์ประกอบ p และ div:

div, p (สี: # f00; }

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

เลือกรูปแบบใด ๆ สามารถจัดกลุ่มกับตัวเลือกอื่น ๆ ในตัวอย่างนี้ตัวเลือกชั้นจะจัดกลุ่มด้วยตัวเลือกรหัส:

p.red, #sub {color: # f00; }

รูปแบบนี้ใช้กับย่อหน้าที่มีแอตทริบิวต์ class ของ "red" และองค์ประกอบใด ๆ (เนื่องจากเราไม่ได้ระบุชนิด) ที่มีแอตทริบิวต์ ID ของ "sub"

คุณสามารถจัดกลุ่มตัวเลือกใด ๆ ร่วมกันได้เช่น selectors ที่เป็นคำเดียวและ selectors compund ตัวอย่างนี้รวมถึงตัวเลือกที่แตกต่างกันสี่ตัว:

p, .red, #sub, div a: link {color: # f00; }

ดังนั้นกฎ CSS นี้จะใช้กับสิ่งต่อไปนี้:

• องค์ประกอบวรรคใด ๆ
• องค์ประกอบใดก็ตามที่มีคลาส "แดง"
• องค์ประกอบที่มี ID ของ "ย่อย"
• "ลิงค์" ชั้นหลอกขององค์ประกอบยึดที่ decendents ของการแบ่ง

ตัวเลือกล่าสุดเป็นตัวเลือกส่วนผสม คุณสามารถดูได้อย่างง่ายดายรวมกับ selectors อื่น ๆ ในกฎ CSS นี้ ด้วยกฎนี้เราตั้งค่าสี # f00 (สีแดง) ที่ตัวเลือก 4 ตัวนี้ซึ่งเหมาะสำหรับการเขียนตัวแยกต่างกัน 4 ตัวเพื่อให้ได้ผลลัพธ์ที่เหมือนกัน

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

ตัวเลือกใดก็ได้สามารถจัดกลุ่มได้

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

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

th, td, p.red, div # firstred {สี: สีแดง; }

หรือคุณสามารถแสดงลักษณะในแต่ละบรรทัดเพื่อความชัดเจน:

, th
td,
p.red,
div # firstred
{
สี: แดง;
}

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

บทความต้นฉบับโดย Jennifer Krynin แก้ไขโดย Jeremy Girard เมื่อวันที่ 5/8/17