ข้อควรพิจารณาในทางปฏิบัติสำหรับข้อตกลงการตั้งชื่อ HTML / CSS (ไวยากรณ์) [ปิด]

คำถาม: สิ่งที่ต้องคำนึงถึงในทางปฏิบัติสำหรับไวยากรณ์classและidค่าคืออะไร?

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

เพื่อสรุปเหตุผลที่ฉันถามคำถามนี้:

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

อนุสัญญาบางข้อที่ฉันได้พิจารณาแล้วว่าใช้:

1. UpperCamelCaseส่วนใหญ่เป็นนิสัยการข้ามจากการเข้ารหัสฝั่งเซิร์ฟเวอร์
2. lowerCamelCaseเพื่อความสอดคล้องกับข้อกำหนดการตั้งชื่อ JavaScript
3. css-style-classesซึ่งสอดคล้องกับการตั้งชื่อคุณสมบัติ css (แต่อาจน่ารำคาญเมื่อ Ctrl + Shift + ArrowKey เลือกข้อความ)
4. with_under_scoresซึ่งโดยส่วนตัวฉันไม่ได้เห็นใช้มากนัก
5. alllowercaseง่ายต่อการจดจำ แต่อาจอ่านยากสำหรับชื่อที่ยาวขึ้น
6. UPPERCASEFTWเป็นวิธีที่ดีในการรบกวนโปรแกรมเมอร์เพื่อนของคุณ (อาจรวมกับตัวเลือก 4 สำหรับการอ่าน)

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

การได้รับรางวัลหรือไม่การเลือกจะเป็น "เรื่องของความชอบ" เสมอ - หลังจากทั้งหมดคุณจะรู้สึกอย่างไรถ้า W3C แนะนำ (หรือแม้แต่กำหนด) การประชุมบางอย่างที่คุณไม่รู้สึกว่าถูกต้อง?

ต้องบอกว่าฉันชอบlowerCamelCaseอนุสัญญาส่วนตัวและฉันจะให้เหตุผลและข้อควรพิจารณาในทางปฏิบัติที่ฉันเคยทำในใจ - ฉันจะทำเช่นนั้นโดยกระบวนการของการกำจัดโดยใช้หมายเลขจากคำถามของคุณ:

(5. ) เพียงแค่อ่านได้ง่ายคริสมาสต์ไม่ได้รู้ว่าคำพูดเริ่มต้นและ

(6. ) ASABOVEPLUSITSANNOYINGLIKESOMEONESHOUTING

( 4. ) historical_incompatibility_plus_see: Mozilla Dev เอกสาร

(3. ) a-bit-trickier to อธิบาย ... ตามที่คุณกล่าวถึงการเลือกในโปรแกรมแก้ไขข้อความเป็นปัญหาหนึ่ง (เช่นขีดล่างขึ้นอยู่กับโปรแกรมแก้ไข) แต่สำหรับฉันมันเป็นความจริงที่ทำให้ฉันนึกถึง ไวยากรณ์ที่สงวนไว้สำหรับคำหลักเฉพาะของผู้ขายแม้ว่าคำเหล่านั้นจะเริ่มต้นด้วยเครื่องหมายขีดกลาง

ดังนั้นสิ่งนี้จะทำให้ (1) และ (2), UpperCamelCase และ lowerCamelCase ของคุณตามลำดับ แม้จะมีการเชื่อมโยงทางจิตกับคลาส Java (ซึ่งโดยการประชุมที่กำหนดไว้อย่างชัดเจนมากขึ้น UpperCamelCase) ชื่อคลาส CSS ดูเหมือนว่าสำหรับฉันจะดีกว่าโดยเริ่มจากตัวอักษรตัวเล็ก อาจเป็นเพราะองค์ประกอบ XHTML และชื่อแอตทริบิวต์แต่ฉันคิดว่าคุณสามารถทำให้กรณีที่มีคลาส CSS ใช้ UpperCamelCase จะช่วยแยกพวกเขาออกจากกัน ถ้าคุณต้องการอีกเหตุผลหนึ่ง lowerCamelCase คือสิ่งที่ W3C ใช้เป็นตัวอย่างสำหรับชื่อคลาสที่ดี (แม้ว่า URL นั้นจะน่ารำคาญไม่เห็นด้วยกับฉัน)

ฉันขอแนะนำให้ต่อต้าน (4. ), (5. ) และ (6. ) ด้วยเหตุผลที่กล่าวมาข้างต้น แต่สมมติว่าข้อโต้แย้งนั้นสามารถทำได้ทั้งสามข้อ

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

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

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

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

โดยส่วนตัวแล้วฉันใช้css-style-with-dashesแต่ฉันพยายามหลีกเลี่ยงชื่อคลาสที่มีหลายคำและใช้หลายคลาสถ้าเป็นไปได้ ( button important defaultแทนที่จะเป็นbutton-important-default) จากประสบการณ์ของฉันนี่เป็นทางเลือกที่ได้รับความนิยมมากที่สุดในบรรดาเว็บไซต์และกรอบงานคุณภาพสูง

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

สำหรับ id มีข้อควรพิจารณาเพิ่มเติมว่าหากคุณต้องการอ้างอิงองค์ประกอบด้วย ID โดยตรงใน javascript (เช่นdocument.forms[0].btn_ok) ขีดกลางจะใช้งานไม่ได้ - แต่ถ้าคุณใช้ jQuery คุณจะต้อง ใช้มันผ่าน$()ไปแล้วดังนั้นคุณสามารถมีได้$('#btn-ok')ซึ่งทำให้ประเด็นนี้ส่วนใหญ่เป็นที่สงสัย

สำหรับบันทึกการประชุมผมเจอประจำอื่นใช้หูดฮังการี ID เพื่อระบุประเภทองค์ประกอบโดยเฉพาะอย่างยิ่งสำหรับการควบคุมรูปแบบ - ดังนั้นคุณจะต้อง#lblUsername, #tbUsername, #valUsernameป้ายชื่อผู้ใช้ป้อนข้อมูลและตรวจสอบ

ฉันเชื่ออย่างยิ่งว่าสิ่งที่สำคัญที่สุดคือความสอดคล้อง

มีสองวิธีในการดูสิ่งนี้:

1. อาร์กิวเมนต์ที่ดีสามารถสร้างขึ้นเพื่อalllowercaseหรือcss-style-clauses(อาจเป็นทางเลือกที่ดีกว่า) เพราะพวกเขาจะสอดคล้องกับรหัสที่พวกเขาจะเข้ามามากที่สุดมันจะให้การไหลเวียนที่เป็นธรรมชาติมากขึ้นกับรหัสโดยรวม .

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

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

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

บริษัท ส่วนใหญ่มีแนวทางปฏิบัติโดยทั่วไปคุณต้องปฏิบัติตามวิธีการต่าง ๆ เพื่อให้รหัสสะอาดและง่ายขึ้นสำหรับทุกคนในการทำงาน หากคุณเป็นนักแปลอิสระคุณสามารถออกไปข้างนอกได้เพราะคุณเป็นคนเดียวที่ทำงานกับโค้ด มีอนุสัญญาการเข้ารหัสเพียง 2 ข้อในความคิดของฉันที่จะปฏิบัติตาม: CamelCase หรือเครื่องหมายขีดเส้นใต้ คำแนะนำของฉันคือการเลือกหนึ่งแล้วติดกับมัน

ดูเหมือนคุณลืมความจริงหนึ่งง่าย: CSS ส่วนใหญ่ไม่ได้ทำโดยโปรแกรมเมอร์

มันทำโดยนักออกแบบกราฟิก

พวกเขาไม่สนใจเกี่ยวกับสงครามการแก้ไขของเราและไม่สนใจว่าเราทำอะไรกับปุ่ม Shift
พวกเขาอาจไม่รู้ว่า_กุญแจแฟนซีนั้นอยู่ที่ไหน (หรือชื่อของมันคืออะไร)

พวกเขาไม่สนใจเกี่ยวกับความงามรหัสพวกเขาเกี่ยวกับการดูแลความงามความงาม

(และพวกเขาอาจมีจุดที่นั่น)

พวกเขาไม่ได้อ่านสเป็คพวกเขาได้รับการสอน
จากนั้นตรวจสอบการอ้างอิงบน w3schools อีกครั้ง

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