แผนการตั้งชื่อมาตรฐานสำหรับ html / css ids และคลาสคืออะไร

มันขึ้นอยู่กับแพลตฟอร์มที่คุณใช้หรือมีการประชุมทั่วไปที่นักพัฒนาส่วนใหญ่แนะนำ / ติดตาม?

มีหลายตัวเลือก:

1. id="someIdentifier"' - ดูสวยสอดคล้องกับรหัสจาวาสคริปต์
2. id="some-identifier" - ดูเหมือนแอตทริบิวต์ html5 เหมือนและสิ่งอื่น ๆ ใน html
3. id="some_identifier" - ดูค่อนข้างสอดคล้องกับรหัสทับทิมและยังคงเป็นตัวระบุที่ถูกต้องภายใน Javascript

ฉันคิดว่า # 1 และ # 3 ด้านบนเหมาะสมที่สุดเพราะพวกเขาเล่นได้ดีกว่าด้วย Javascript

มีคำตอบที่ถูกต้องสำหรับสิ่งนี้หรือไม่?

ไม่มีเลย

ฉันใช้ขีดเส้นใต้ตลอดเวลาเนื่องจากเครื่องหมายขีดคั่นทำให้เกิดการเน้นไวยากรณ์ของตัวแก้ไขข้อความ (Gedit) แต่เป็นการตั้งค่าส่วนตัว

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

อัปเดต 2012

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

อัปเดต 2013

ดูเหมือนว่าฉันจะผสมสิ่งต่าง ๆ เป็นประจำทุกปี ... หลังจากเปลี่ยนเป็น Sublime Text และใช้ Bootstrap ชั่วครู่หนึ่งฉันกลับไปที่ขีดกลาง สำหรับฉันตอนนี้พวกเขาดูสะอาดกว่า un_der_scores หรือ camelCase จุดเริ่มต้นของฉันยังคงอยู่: ไม่มีมาตรฐาน

อัปเดตปี 2015

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

อัปเดตปี 2559 ( คุณขอให้มัน)

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

อัปเดต 2019 ( คุณขอให้มัน)

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

ฉันยังคงตัดสินเรื่อง BEM อยู่ มัน verbose แต่ namespacing ทำให้การทำงานกับมันในองค์ประกอบ React เป็นธรรมชาติมาก นอกจากนี้ยังยอดเยี่ยมสำหรับการเลือกองค์ประกอบเฉพาะเมื่อทดสอบเบราว์เซอร์

OOCSS และ BEM เป็นเพียงส่วนหนึ่งของมาตรฐาน CSS เลือกหนึ่งที่เหมาะกับคุณ - พวกเขากำลังทั้งหมดเต็มรูปแบบของการประนีประนอมเพราะ CSS ก็ไม่ดีที่

อัพเดท 2020

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

มีคู่มือสไตล์ CSS และ HTML โดย google ซึ่งแนะนำให้ใช้ยัติภังค์คือhttps://google.github.io/styleguide/htmlcssguide.html#ID_and_Class_Name_Delimiters

ฉันขอแนะนำให้คุณใช้เครื่องหมายขีดล่างแทนเครื่องหมายขีดคั่น (-) เนื่องจาก ...

<form name="myForm">
  <input name="myInput" id="my-Id" value="myValue"/>
</form>

<script>
  var x = document.myForm.my-Id.value;
  alert(x);
</script>

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

นี่เป็นตัวอย่างเก่า แต่มันสามารถทำงานได้โดยไม่มี jquery - :)

ขอบคุณ @jean_ralphio มีวิธีหลีกเลี่ยง

var x = document.myForm['my-Id'].value;

สไตล์เส้นประจะเป็นสไตล์รหัส google แต่ฉันไม่ชอบมันจริงๆ ฉันต้องการ TitleCase สำหรับ id และ camelCase สำหรับชั้นเรียน

TL; DR;

ไม่มีคำตอบที่แท้จริง คุณสามารถเลือกหนึ่งในนั้นหรือสร้างมาตรฐานของคุณเองตามสิ่งที่เหมาะสมขึ้นอยู่กับว่าคุณทำงานกับใคร และมันขึ้นอยู่กับแพลตฟอร์ม 100%

โพสต์ต้นฉบับ

อีกหนึ่งมาตรฐานทางเลือกที่ควรพิจารณา:

<div id="id_name" class="class-name"></div>

และในสคริปต์ของคุณ:

var variableName = $("#id_name .class-name");

สิ่งนี้ใช้ camelCase, under_score และยัติภังค์ตามลำดับสำหรับตัวแปรรหัสและคลาส ฉันได้อ่านเกี่ยวกับมาตรฐานนี้ในเว็บไซต์ต่างๆ แม้ว่าความซ้ำซ้อนเล็กน้อยในตัวเลือก css / jquery แต่ความซ้ำซ้อนช่วยให้ตรวจจับข้อผิดพลาดได้ง่ายขึ้น เช่น: หากคุณเห็น.unknown_nameหรือ#unknownNameในไฟล์ CSS ของคุณคุณรู้ว่าคุณจำเป็นต้องรู้ว่าสิ่งที่อ้างอิงจริง

ปรับปรุง 2019

(เครื่องหมายขีดคั่นเรียกว่า 'kebab-case' ขีดล่างเรียกว่า 'snake_case' และคุณมี 'TitleCase', 'pascalCase')

ส่วนตัวฉันไม่ชอบยัติภังค์ ฉันโพสต์สิ่งนี้เป็นทางเลือกเดียว (เพราะกฎง่าย) อย่างไรก็ตามยัติภังค์ทำการเลือกทางลัดที่ยากมาก (ดับเบิลคลิก, ctrl/ option+ left/ right, และctrl/ cmd+ Dใน vsCode นอกจากนี้ชื่อชั้นเรียนและชื่อไฟล์เป็นสถานที่เดียวที่ยัติภังค์ทำงานเพราะพวกเขาเกือบจะอยู่ในเครื่องหมายคำพูดหรือ css แต่สิ่งที่ยังคงใช้ทางลัด

นอกเหนือจากตัวแปรชื่อคลาสและรหัสคุณยังต้องการดูแบบแผนการประชุมชื่อไฟล์ และสาขา Git

กลุ่มการเข้ารหัสของสำนักงานของฉันมีการประชุมเดือนหรือสองเดือนก่อนเพื่อหารือเกี่ยวกับวิธีที่เราจะตั้งชื่อสิ่งต่าง ๆ สำหรับสาขา git เราไม่สามารถเลือกระหว่าง 321-the_issue_description หรือ 321_the-issue-description (ฉันต้องการ 321_theIssueDescription แต่เพื่อนร่วมงานของฉันไม่ชอบมัน)

ตัวอย่างเพื่อสาธิตการทำงานกับมาตรฐานของผู้อื่น ...

Vue.js มีมาตรฐาน ที่จริงแล้วพวกเขามีสองมาตรฐานอื่นสำหรับหลายรายการ ฉันไม่ชอบชื่อไฟล์ทั้งสองเวอร์ชัน พวกเขาแนะนำอย่างใดอย่างหนึ่งหรือ"/path/kebab-case.vue" "/path/TitleCase.Vue"อดีตนั้นยากที่จะเปลี่ยนชื่อเว้นแต่คุณจะพยายามเปลี่ยนชื่อบางส่วนโดยเฉพาะ หลังไม่ดีสำหรับความเข้ากันได้ข้ามแพลตฟอร์ม "/path/snake_case.vue"ฉันชอบ อย่างไรก็ตามเมื่อทำงานกับผู้อื่นหรือโครงการที่มีอยู่สิ่งสำคัญคือการปฏิบัติตามมาตรฐานที่วางไว้แล้ว ดังนั้นฉันไปกับ kebab-case สำหรับชื่อไฟล์ใน Vue แม้ว่าฉันจะบ่นทั้งหมด เนื่องจากไม่ได้ติดตามนั่นหมายถึงการเปลี่ยนแปลงไฟล์จำนวนมากที่ vue-cli ตั้งค่า

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

ความเป็นเจ้าของ

คำหลักที่อธิบายวัตถุนั้นสามารถคั่นด้วยเครื่องหมายยัติภังค์

รถใหม่หันขวา

คำหลักที่อธิบายวัตถุนั้นยังสามารถแบ่งออกเป็นสี่ประเภท (ซึ่งควรสั่งจากซ้ายไปขวา): วัตถุ, Object-Descriptor, Action และ Action-Descriptor

car - คำนามและวัตถุ
ใหม่ - คำคุณศัพท์และ object-descriptor ที่อธิบายถึงวัตถุในรายละเอียดมากขึ้น
- คำกริยาและการกระทำที่เป็นของวัตถุที่
ถูกต้อง - คำคุณศัพท์และ descriptor การกระทำที่อธิบาย การกระทำในรายละเอียดเพิ่มเติม

หมายเหตุ: คำกริยา (การกระทำ) ควรอยู่ในอดีตกาล (หัน, ทำ, วิ่ง, ฯลฯ )

ความสัมพันธ์

วัตถุสามารถมีความสัมพันธ์เช่นพ่อแม่และลูก Action และ Action-Descriptor เป็นของวัตถุแม่ไม่ใช่ของวัตถุลูก สำหรับความสัมพันธ์ระหว่างวัตถุคุณสามารถใช้ขีดล่าง

รถใหม่หัน right_wheel ซ้ายหันซ้าย

• รถใหม่หันไปทางขวา (ตามกฎความเป็นเจ้าของ)
• ล้อซ้ายหันซ้าย (ตามกฎการเป็นเจ้าของ)
• รถใหม่หันไปทางขวาล้อหมุนซ้ายหันไปตามกฎความสัมพันธ์

หมายเหตุสุดท้าย:

• เนื่องจาก CSS นั้นไม่คำนึงถึงตัวพิมพ์ใหญ่และตัวพิมพ์เล็กจึงควรเขียนชื่อทั้งหมดเป็นตัวพิมพ์เล็ก (หรือตัวพิมพ์ใหญ่) หลีกเลี่ยงกรณีอูฐหรือกรณีปาสกาลเนื่องจากสามารถนำไปสู่ชื่อที่ไม่ชัดเจน
• รู้ว่าเมื่อใดควรใช้คลาสและเมื่อใดจึงจะใช้รหัส มันไม่ได้เกี่ยวกับ ID ที่ใช้เพียงครั้งเดียวบนหน้าเว็บ ส่วนใหญ่แล้วคุณต้องการใช้คลาสและไม่ใช่รหัส ส่วนประกอบของเว็บเช่น (ปุ่ม, แบบฟอร์ม, พาเนล, ... ฯลฯ ) ควรใช้คลาสเสมอ รหัสสามารถนำไปสู่ความขัดแย้งในการตั้งชื่อได้ง่ายและควรใช้อย่างไม่ จำกัด สำหรับการตั้งชื่อมาร์กอัปของคุณ แนวคิดด้านความเป็นเจ้าของและความสัมพันธ์ข้างต้นมีผลกับการตั้งชื่อทั้งคลาสและรหัสและจะช่วยคุณหลีกเลี่ยงความขัดแย้งในการตั้งชื่อ
• หากคุณไม่ชอบแบบแผนการตั้งชื่อ CSS ของฉันก็มีอีกหลายวิธีเช่น: แบบแผนการตั้งชื่อโครงสร้าง, แบบแผนการตั้งชื่อปัจจุบัน, แบบแผนการตั้งชื่อแบบ Semantic, แบบแผนการตั้งชื่อแบบ BEM, แบบแผนการตั้งชื่อแบบ OCSS เป็นต้น

อีกเหตุผลที่หลายคนชอบยัติภังค์ใน CSS id และชื่อคลาสคือฟังก์ชันการทำงาน

การใช้แป้นพิมพ์ลัดเช่นoption+ left/ right(หรือctrl+ left/ rightบน Windows) เพื่อสำรวจรหัสคำโดยคำหยุดเคอร์เซอร์ที่แต่ละเส้นประช่วยให้คุณสำรวจ ID หรือชื่อคลาสได้อย่างแม่นยำโดยใช้แป้นพิมพ์ลัด เครื่องหมายขีดล่างและ camelCase ไม่ได้รับการตรวจพบและเคอร์เซอร์จะลอยไปทางขวาราวกับว่ามันเป็นคำเดียวทั้งหมด

ฉันเพิ่งเริ่มเรียนรู้ XML เวอร์ชันขีดล่างช่วยให้ฉันแยกทุกอย่างที่เกี่ยวข้องกับ XML (DOM, XSD ฯลฯ ) จากภาษาการเขียนโปรแกรมเช่น Java, JavaScript (ตัวพิมพ์เล็ก) และฉันเห็นด้วยกับคุณว่าการใช้ตัวระบุที่ได้รับอนุญาตในภาษาการเขียนโปรแกรมดูดีขึ้น

แก้ไข: อาจไม่เกี่ยวข้อง แต่นี่คือลิงค์สำหรับกฎและคำแนะนำเกี่ยวกับการตั้งชื่อองค์ประกอบ XML ที่ฉันติดตามเมื่อตั้งชื่อรหัส (ส่วน "กฎการตั้งชื่อ XML" และ "แนวทางปฏิบัติการตั้งชื่อที่ดีที่สุด")

http://www.w3schools.com/xml/xml_elements.asp

ฉันคิดว่ามันขึ้นอยู่กับแพลตฟอร์ม เมื่อพัฒนาใน. Net MVC ฉันใช้ตัวพิมพ์เล็กและสไตล์ไฮบูตสำหรับชื่อคลาส แต่สำหรับรหัสฉันใช้ PascalCase

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