เหตุใดจึงต้องการขีดคั่นสำหรับตัวเลือก CSS / HTML?

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

ฉันคิดเสมอว่าเครื่องหมายขีดคั่นมีข้อเสียมากกว่าและฉันไม่เห็นประโยชน์:

การเติมโค้ดและการแก้ไข

บรรณาธิการส่วนใหญ่ถือว่าเครื่องหมายขีดคั่นเป็นตัวคั่นคำดังนั้นฉันไม่สามารถแท็บผ่านสัญลักษณ์ที่ฉันต้องการ สมมติว่าคลาสคือ " featured-product" ฉันต้องเติมข้อมูลอัตโนมัติ " featured" ป้อนยัติภังค์และกรอก " product"

เมื่อใช้เครื่องหมายขีดล่าง " featured_product" จะถือว่าเป็นหนึ่งคำจึงสามารถเติมได้ในขั้นตอนเดียว

เช่นเดียวกับการนำทางผ่านเอกสาร การกระโดดโดยใช้คำหรือการดับเบิลคลิกที่ชื่อคลาสนั้นจะถูกใช้โดยใช้เครื่องหมายขีดกลาง

(โดยทั่วไปแล้วฉันคิดว่าคลาสและรหัสเป็นโทเค็นดังนั้นจึงไม่มีความหมายสำหรับฉันว่าโทเค็นควรจะแยกได้ง่ายบนยัติภังค์)

ความกำกวมกับตัวดำเนินการทางคณิตศาสตร์

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

form.first_name.value='Stormageddon';

(เป็นที่ยอมรับว่าฉันไม่ได้เข้าถึงองค์ประกอบของแบบฟอร์มด้วยวิธีนี้ แต่เมื่อตัดสินใจในการขีดกลางและขีดเส้นใต้เป็นกฎสากลให้พิจารณาว่าอาจมีใครบางคน)

ภาษาอย่างSass (โดยเฉพาะในกรอบเข็มทิศ ) ได้ตัดสินด้วยเครื่องหมายขีดคั่นเป็นมาตรฐานแม้สำหรับชื่อตัวแปร ตอนแรกพวกเขาใช้ขีดเส้นใต้ด้วยเช่นกัน ความจริงที่ว่านี้มีการแยกวิเคราะห์แตกต่างกันที่ฉันแปลก:

$list-item-10
$list-item - 10

ความไม่สอดคล้องกับการตั้งชื่อตัวแปรในภาษาต่างๆ

ย้อนกลับไปในวันนั้นฉันเคยเขียนunderscored_namesหาตัวแปรใน PHP, ruby, HTML / CSS และ JavaScript นี่สะดวกและสอดคล้องกัน แต่อีกครั้งเพื่อ "พอดี" ตอนนี้ฉันใช้:

• dash-case ใน HTML / CSS
• camelCase ใน JavaScript
• underscore_case ใน PHP และทับทิม

สิ่งนี้ไม่ได้รบกวนฉันมากเกินไป แต่ฉันสงสัยว่าทำไมสิ่งเหล่านี้จึงไม่ตรงกับวัตถุประสงค์ อย่างน้อยด้วยการขีดเส้นใต้มันเป็นไปได้ที่จะรักษาความมั่นคง:

var featured_product = $('#featured_product'); // instead of
var featuredProduct = $('#featured-product');

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

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

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

การเติมโค้ดให้สมบูรณ์

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

นอกจากนี้การใช้ยัติภังค์ยังช่วยให้คุณสามารถใช้ประโยชน์จากตัวเลือก | =ซึ่งเลือกองค์ประกอบใด ๆ ที่มีข้อความตามด้วยเส้นประ:

span[class|="em"] { font-style: italic; }

สิ่งนี้จะทำให้องค์ประกอบ HTML ต่อไปนี้มีแบบอักษรเอียง:

<span class="em">I'm italic</span>
<span class="em-strong">I'm italic too</span>

ความกำกวมกับตัวดำเนินการทางคณิตศาสตร์

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

var firstName = $('#first-name');
var firstName = document.querySelector('#first-name');
var firstName = document.forms[0].first_name;

ฉันพบว่าสองตัวเลือกแรกที่เป็นที่นิยมมากกว่าโดยเฉพาะอย่างยิ่งเนื่องจาก'#first-name'สามารถแทนที่ด้วยตัวแปร JavaScript และสร้างขึ้นแบบไดนามิก ฉันยังพบว่าพวกเขาน่าพอใจมากขึ้นในสายตา

ความจริงที่ว่า Sass เปิดใช้งานการคำนวณทางคณิตศาสตร์ในส่วนขยายของ CSS นั้นไม่ได้ใช้กับ CSS จริงๆ แต่ฉันเข้าใจ (และยอมรับ) ความจริงที่ว่า Sass เป็นไปตามรูปแบบภาษาของ CSS (ยกเว้นส่วน$นำหน้าของตัวแปรซึ่งแน่นอน ได้รับ@) หากเอกสาร Sass ให้รูปลักษณ์และความรู้สึกเหมือนกับเอกสาร CSS พวกเขาต้องทำตามสไตล์เดียวกับ CSS ซึ่งใช้เส้นประเป็นตัวคั่น ใน CSS3 เลขคณิตนั้น จำกัด เฉพาะcalcฟังก์ชั่นซึ่งจะแสดงให้เห็นว่าใน CSS เองนี่ไม่ใช่ปัญหา

ความไม่สอดคล้องกับการตั้งชื่อตัวแปรในภาษาต่างๆ

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

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

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

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

จาก Mozilla doc เผยแพร่เมื่อมีนาคม 2544 @ https://developer.mozilla.org/en-US/docs/Underscores_in_class_and_ID_Names

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

    p.urgent\_note {color: maroon;}

อย่างไรก็ตามเบราว์เซอร์ดังกล่าวไม่ได้รับการสนับสนุนในเวลานี้และการฝึกฝนดังกล่าวไม่เคยเกิดขึ้น CSS2 ที่ตีพิมพ์ในปี 1998 ยังห้ามการใช้เครื่องหมายขีดล่างในชื่อคลาสและ ID อย่างไรก็ตามข้อมูลที่ผิดพลาดต่อข้อกำหนดที่ตีพิมพ์เมื่อต้นปี 2544 ทำให้ขีดความสามารถทางกฎหมายเป็นครั้งแรก แต่น่าเสียดายที่ซับซ้อนภูมิทัศน์ที่ซับซ้อนอยู่แล้ว

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

ฉันไม่คิดว่าจะมีใครตอบคำถามนี้ได้อย่างชัดเจน แต่นี่คือการเดาที่ได้รับการศึกษาของฉัน:

1. ขีดล่างต้องกดปุ่ม Shift และพิมพ์ยากกว่า

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

3. อันนี้อยู่ไกลออกไปบนหิ้ง แต่ ... ไม่ว่าจะเป็นตำนานหรือความจริงมีความคิดที่ยาวนานว่า Google ปฏิบัติต่อคำที่คั่นด้วยเครื่องหมายขีดล่างเป็นคำเดียวและคำที่คั่นด้วยเครื่องหมายขีดคั่นเป็นคำแยกต่างหาก (Matt Cutts บนขีดล่างและขีดกลาง)ด้วยเหตุนี้ฉันรู้ว่าการตั้งค่าของฉันตอนนี้สำหรับการสร้าง URL ของหน้าคือการใช้คำกับขีดกลางและสำหรับฉันอย่างน้อยสิ่งนี้ทำให้ฉันกลายเป็นแบบแผนการตั้งชื่อของฉันสำหรับสิ่งอื่น ๆ เช่นตัวเลือก CSS

มีหลายเหตุผลหนึ่งในสิ่งที่สำคัญที่สุดคือการรักษามี แต่ความสอดคล้อง

ผมคิดว่านี้บทความอธิบายได้อย่างครอบคลุม

CSS เป็นไวยากรณ์ที่คั่นด้วยเครื่องหมายขีดคั่น โดยนี้ผมหมายถึงเราเขียนสิ่งที่ชอบfont-size, line-height, border-bottomฯลฯ

ดังนั้น:

คุณก็ไม่ควรผสมไวยากรณ์: มันไม่สอดคล้องกัน

มีช่วงเวลาที่ชัดเจนใน URL ที่แยกกันด้วยเครื่องหมายขีดคั่นและคั่นด้วยเครื่องหมายจุลภาคตลอดหลายปีที่ผ่านมา สิ่งนี้ได้รับการสนับสนุนจากแนวทางปฏิบัติที่ดีที่สุดของ SEO Google อย่างชัดเจน "แนะนำให้คุณใช้ยัติภังค์ (-) แทนการขีดล่าง (_) ใน URL ของคุณ": http://www.google.com/support/webmasters/bin/answer.py?answer=76329

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

สมมติฐานของฉันคือตำแหน่งของ Google ยึดรูปแบบนี้ภายในบริบทสำคัญ (SEO) และแนวโน้มที่จะใช้รูปแบบนี้ในคลาสรหัสและชื่อแอตทริบิวต์เป็นเพียงฝูงเคลื่อนไหวช้าในทิศทางทั่วไปนี้

ฉันคิดว่ามันเป็นสิ่งที่ขึ้นกับโปรแกรมเมอร์ บางคนชอบใช้เครื่องหมายขีดกลางส่วนคนอื่น ๆ ก็ใช้เครื่องหมายขีดล่าง
ฉันใช้ขีดเส้นใต้ ( _) เพราะฉันใช้ในที่อื่นเช่นกัน เช่น:
- ตัวแปร JavaScript ( var my_name);
- การกระทำของตัวควบคุมของฉัน ( public function view_detail)
เหตุผลอื่นที่ฉันใช้ขีดเส้นใต้นั่นคือใน IDEs ส่วนใหญ่สองคำที่คั่นด้วยเครื่องหมายขีดล่างนั้นถือเป็น 1 คำ (และสามารถเลือกได้ด้วย double_click)