คุณไม่ จำกัด เพียงแค่ชั้น CSS เดียวสำหรับแต่ละองค์ประกอบ
Cascading Style Sheets (CSS) ช่วยให้คุณสามารถกำหนดรูปลักษณ์ขององค์ประกอบโดยยึดติดกับแอตทริบิวต์ที่คุณใช้กับองค์ประกอบนั้น แอ็ตทริบิวต์เหล่านี้สามารถเป็นได้ทั้ง ID หรือคลาสและเช่นเดียวกับคุณลักษณะทั้งหมดพวกเขาจะเพิ่มข้อมูลที่เป็นประโยชน์ลงในองค์ประกอบที่แนบ ขึ้นอยู่กับแอตทริบิวต์ที่คุณเพิ่มลงในองค์ประกอบคุณสามารถเขียนตัวเลือก CSS เพื่อใช้รูปแบบภาพที่จำเป็นซึ่งจำเป็นเพื่อให้ได้รูปลักษณ์และองค์ประกอบขององค์ประกอบนั้นและเว็บไซต์โดยรวม
แม้ว่า ID หรือชั้นเรียนจะทำงานเพื่อจุดประสงค์ในการติดตั้ง CSS ด้วยวิธีการออกแบบเว็บแบบใหม่นั้นสนับสนุนการเรียนผ่าน ID เนื่องจากบางส่วนมีความเฉพาะเจาะจงน้อยกว่าและง่ายต่อการทำงานโดยรวม ใช่คุณจะยังพบไซต์จำนวนมากที่ใช้รหัส แต่แอตทริบิวต์เหล่านี้มีการใช้งานมากขึ้นกว่าในอดีตในขณะที่ชั้นเรียนได้ดำเนินการผ่านหน้าเว็บที่ทันสมัย
ชั้นเรียนเดี่ยวหรือหลายชั้นใน CSS?
ในกรณีส่วนใหญ่คุณจะกำหนดแอตทริบิวต์ชั้นเดียวให้กับองค์ประกอบ แต่จริงๆแล้วคุณไม่ จำกัด เพียงแค่ชั้นเดียวเท่านั้นที่มีรหัส ในขณะที่องค์ประกอบสามารถมีแอตทริบิวต์ ID เดียวได้คุณสามารถให้องค์ประกอบหลายคลาสได้อย่างสมบูรณ์และในบางกรณีการทำเช่นนี้จะทำให้หน้าของคุณง่ายขึ้นและมีความยืดหยุ่นมากขึ้น!
ถ้าคุณต้องการมอบหมายหลายชั้นให้กับองค์ประกอบคุณสามารถเพิ่มชั้นเรียนเพิ่มเติมและแยกพวกเขาออกจากกันด้วยช่องว่างในแอตทริบิวต์ของคุณ
ตัวอย่างเช่นวรรคนี้มีสามชั้นเรียน:
pullquote featured left "> นี่จะเป็นข้อความของย่อหน้า
ชุดนี้ตั้งสามชั้นต่อไปนี้ในแท็กวรรค:
- Pullquote
- แนะนำ
- ซ้าย
สังเกตเว้นวรรคระหว่างแต่ละค่าชั้นเรียนเหล่านี้ ช่องว่างเหล่านี้คือสิ่งที่กำหนดให้แต่ละชั้นแตกต่างกัน นี่เป็นเหตุผลว่าทำไมชื่อชั้นจึงไม่สามารถมีช่องว่างได้เพราะการทำเช่นนี้จะกำหนดให้เป็นชั้นเรียนแยกต่างหาก
ตัวอย่างเช่นถ้าคุณใช้ "pullquote-featured-left" โดยไม่มีเนื้อที่จะเป็นค่าระดับเดียว แต่ตัวอย่างข้างต้นซึ่งคำทั้งสามนี้ถูกแยกออกจากกันด้วยช่องว่างให้กำหนดเป็นค่าแต่ละอย่าง สิ่งสำคัญคือต้องทำความเข้าใจกับแนวคิดนี้เมื่อคุณตัดสินใจว่าจะใช้ค่าเรียนใดในหน้าเว็บของคุณ
เมื่อคุณมีค่าชั้นเรียนใน HTML แล้วคุณสามารถกำหนดสิ่งเหล่านี้เป็นชั้นเรียนใน CSS ของคุณและใช้สไตล์ที่คุณต้องการเพิ่ม ตัวอย่างเช่น.
.pullquote {... }
.featured {... }
p.left {... }
ในตัวอย่างเหล่านี้ CSS และค่า declarations คู่จะอยู่ภายในวงเล็บปีกกาซึ่งเป็นวิธีการที่รูปแบบเหล่านั้นจะถูกนำไปใช้กับตัวเลือกที่เหมาะสม
หมายเหตุ - ถ้าคุณ กำหนดคลาสเป็นองค์ประกอบเฉพาะ (ตัวอย่างเช่น p.left) คุณยังสามารถใช้คลาสนั้นเป็นส่วนหนึ่งของรายการชั้นเรียน อย่างไรก็ตามโปรดทราบว่าจะมีผลกับองค์ประกอบเหล่านี้ที่ระบุไว้ใน CSS เท่านั้น กล่าวคือสไตล์ p.left จะใช้เฉพาะกับย่อหน้ากับคลาสนี้เนื่องจาก selector ของคุณเป็นจริงที่จะนำไปใช้กับ "paragraphs with a class value of 'left'" ในทางตรงกันข้ามอีกสอง selectors ในตัวอย่างไม่ได้ระบุองค์ประกอบบางอย่างดังนั้นจะใช้กับองค์ประกอบที่ใช้ค่าชั้นเรียนเหล่านั้น
ข้อดีของชั้นเรียนหลายชั้น
หลายชั้นเรียนสามารถทำให้ง่ายต่อการเพิ่มเอฟเฟ็กต์พิเศษให้กับองค์ประกอบต่างๆโดยไม่ต้องสร้างสไตล์ใหม่สำหรับองค์ประกอบนั้น
ตัวอย่างเช่นคุณอาจต้องการที่จะสามารถ ลอยองค์ประกอบไปทางซ้ายหรือขวา ได้อย่างรวดเร็ว คุณอาจเขียนสองชั้นซ้ายและขวาด้วยลอยเพียง: ซ้าย; และลอย: ขวา; ในพวกเขา จากนั้นเมื่อใดก็ตามที่คุณมีองค์ประกอบที่ต้องการลอยซ้ายคุณก็เพิ่มคลาส "ซ้าย" ลงในรายการชั้นเรียน
มีสายดีที่จะเดินไปได้ที่นี่ โปรดจำไว้ว่ามาตรฐานเว็บกำหนดการแยกลักษณะและโครงสร้าง โครงสร้างถูกจัดการผ่าน HTML ขณะที่สไตล์อยู่ใน CSS
หากเอกสาร HTML ของคุณเต็มไปด้วยองค์ประกอบที่มีชื่อชั้นเช่น "แดง" หรือ "ซ้าย" ซึ่งเป็นชื่อที่กำหนดให้องค์ประกอบควรมีลักษณะมากกว่าสิ่งที่เป็นคุณจะข้ามเส้นแบ่งระหว่างโครงสร้างและสไตล์ ฉันพยายาม จำกัด ชื่อชั้นเรียนที่ไม่ใช่ความหมายของฉันให้มากที่สุดเท่าที่จะเป็นไปได้ด้วยเหตุผลนี้
หลายคลาส Semantics และ JavaScript
ประโยชน์อีกประการหนึ่งของการใช้คลาสหลาย ๆ คือการให้โอกาสในการโต้ตอบกับคุณมากขึ้น
คุณสามารถใช้ชั้นเรียนใหม่กับองค์ประกอบที่มีอยู่โดยใช้ JavaScript โดยไม่ต้องลบชั้นเรียนเริ่มต้น นอกจากนี้คุณยังสามารถใช้คลาสเพื่อกำหนด ความหมายขององค์ประกอบ ซึ่งหมายความว่าคุณสามารถเพิ่มชั้นเรียนเพิ่มเติมเพื่อกำหนดว่าองค์ประกอบนั้นหมายถึงความหมายได้อย่างไร นี่เป็นวิธีการทำงานของไมโครฟอร์แมต
ข้อเสียของหลายชั้นเรียน
ข้อเสียที่ใหญ่ที่สุดในการใช้ชั้นเรียนหลายชั้นในองค์ประกอบของคุณคือสามารถทำให้พวกเขาดูเทอะทะได้และจัดการกับช่วงเวลา อาจเป็นเรื่องยากที่จะระบุว่ารูปแบบใดมีผลต่อองค์ประกอบและถ้าสคริปต์ใด ๆ ส่งผลกระทบต่อองค์ประกอบ หลายกรอบที่มีอยู่ในปัจจุบันเช่น Bootstrap ทำให้การใช้องค์ประกอบที่มีหลายชั้นเรียนเป็นอย่างมาก โค้ดดังกล่าวลุกออกจากมือและทำงานได้อย่างรวดเร็วหากไม่ระมัดระวัง
เมื่อคุณใช้หลายชั้นเรียนคุณจะเสี่ยงต่อการมีลักษณะสำหรับชั้นเรียนเดียวกันกับรูปแบบอื่นแม้ว่าคุณจะไม่ต้องการทำเช่นนี้ก็ตาม การทำเช่นนี้อาจทำให้ยากที่จะทราบได้ว่าทำไมรูปแบบของคุณจึงไม่ได้ถูกนำมาใช้แม้ในเวลาที่ปรากฏว่าควรทำ
คุณต้องตระหนักถึงความจำเพาะแม้จะมีแอตทริบิวต์ที่ใช้กับองค์ประกอบแบบนั้นก็ตาม!
เมื่อใช้เครื่องมือเช่นเครื่องมือของผู้ดูแลเว็บใน Chrome คุณจะสามารถดูได้ว่าชั้นเรียนของคุณมีผลต่อสไตล์ของคุณมากน้อยเพียงใดและหลีกเลี่ยงปัญหาลักษณะและลักษณะที่ขัดแย้งกันนี้
บทความต้นฉบับโดย Jennifer Krynin แก้ไขโดย Jeremy Girard เมื่อวันที่ 8/7/17