วิธีแทรกความคิดเห็น CSS

รวมทั้งความคิดเห็นในโค้ด CSS ของคุณจะเป็นประโยชน์และขอแนะนำ

ทุกเว็บไซต์ประกอบด้วยองค์ประกอบโครงสร้าง (ซึ่งกำหนดโดย HTML) ตลอดจนรูปแบบภาพหรือ "รูปลักษณ์" ของไซต์นั้น Cascading Style Sheets (CSS) คือสิ่งที่ใช้เพื่อกำหนดรูปลักษณ์ของเว็บไซต์ รูปแบบเหล่านี้ถูกแยกออกจากโครงสร้าง HTML เพื่อให้ง่ายต่อการอัปเดตและยึดมั่นในมาตรฐานเว็บ

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

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

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

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

การเพิ่มความคิดเห็นของ CSS

การเพิ่มความคิดเห็นของ CSS เป็นเรื่องง่ายมาก คุณเพียง bookend ความคิดเห็นของคุณด้วยการเปิดและปิดแท็กความคิดเห็นที่ถูกต้อง:

• เริ่มต้นความคิดเห็นของคุณโดยการเพิ่ม / *
• ปิดความคิดเห็นของคุณโดยเพิ่ม * /

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

ความคิดเห็นของ CSS สามารถเป็นบรรทัดเดียวหรืออาจใช้เวลาหลายบรรทัด นี่เป็นตัวอย่างบรรทัดเดียว:

div # border_red {border: บางสีแดงเข้ม; } / * ตัวอย่างขอบสีแดง * /

และตัวอย่าง multiline:

/ *************************** ********************** ****** สไตล์สำหรับข้อความโค้ด **************************** ************ *************** /

แบ่งออกส่วน

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

/ * ----------------------- ลักษณะส่วนหัว ----------------------- ------- * /

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

& # 34; แสดงความคิดเห็นออก & # 34; รหัส

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

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

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

เคล็ดลับการแสดงความคิดเห็นของ CSS

ในฐานะที่เป็นบทสรุปนี่คือเคล็ดลับบางประการในการจดจำความคิดเห็นใน CSS ของคุณ:

1. ความคิดเห็นสามารถขยายได้หลายบรรทัด
2. ความคิดเห็นอาจรวมถึงองค์ประกอบ CSS ที่คุณไม่ต้องการแสดงผลโดยเบราว์เซอร์ แต่ไม่ต้องการลบออกอย่างสมบูรณ์ นี่เป็นวิธีที่ดีในการแก้ปัญหาในสไตล์ชีตของเว็บไซต์ - เพียงแค่ต้องแน่ใจว่าได้ลบสไตล์ที่ไม่ได้ใช้ออกไป (ในกรณีที่คุณไม่ต้องการให้เว็บไซต์เหล่านี้ใช้งาน)
3. ใช้ความคิดเห็นทุกครั้งที่คุณเขียน CSS ที่มีความซับซ้อนเพื่อเพิ่มความกระจ่างและเพื่อแจ้งให้นักพัฒนาซอฟต์แวร์ในอนาคตหรือตัวคุณเองทราบในอนาคตเกี่ยวกับสิ่งสำคัญที่ควรรู้ นี้จะช่วยประหยัดเวลาในการพัฒนาในอนาคตสำหรับทุกคนที่เกี่ยวข้อง
4. ความคิดเห็นอาจรวมถึงข้อมูลเมตาเช่น:
   • ผู้เขียน
   • วันที่สร้าง
   • ข้อมูลลิขสิทธิ์

ประสิทธิภาพ

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

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

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