การเขียน CSS ที่ดี

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

สิ่งที่ฉันพยายามทำคือค้นหาสิ่งที่ทำให้ CSS ดี อ่านได้ บำรุงรักษาได้ ฉันคิดว่าฉันได้คิด (และพบ) วิธีที่จะทำให้สิ่งนี้เป็นไปได้

ปัญหา

มีหลายสิ่งที่รบกวนจิตใจฉันเกี่ยวกับ CSS สิ่งที่น่ารำคาญที่สุดที่ฉันมีคือ:

• ทำซ้ำรหัสทั่วไป
• คำนำหน้าเบราว์เซอร์
• ขาดความเห็น
• เหนือผู้คัดเลือก
• ชื่อชั้นที่น่าสงสาร

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

เป็นเวลานานที่ฉันคิดว่าชื่อชั้นเรียนของฉันเป็น "ความหมาย" และเป็นเพียงฉันที่ทำสิ่งต่าง ๆ ดังนั้นจึงไม่จำเป็นต้องอธิบายรหัสหรือ "การแฮ็ก" เล็กน้อยหรืออะไรก็ตาม

การกลับมาที่โค้ดของโปรเจ็กต์ที่มีมายาวนานได้พิสูจน์ให้เห็นว่าทฤษฎีนี้ผิดพลาด อย่างมาก

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

เช่นเดียวกับกรณีของโครงการที่มีมายาวนาน โค้ดบางตัวก็ เก่า เช่นกัน ส่วนใหญ่เป็น pre-CSS3 หรือ pre-whatever-trend-was-cool-5 ปีที่แล้ว ในทั้งสองกรณี มักจะมีวิธีการต่างๆ ในการทำสิ่งต่างๆ ในขณะที่เขียน และในบางกรณีก็ขาดความรู้โดยธรรมชาติ

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

โซลูชั่น

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

ความคิดเห็น

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

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

การวางแนววัตถุ

การวางแนววัตถุเป็นกระบวนทัศน์การเขียนโปรแกรมที่แบ่งสิ่งใหญ่ออกเป็นสิ่งเล็ก ๆ จากวิกิพีเดีย:

การเขียนโปรแกรมเชิงวัตถุ (OOP) เป็นกระบวนทัศน์การเขียนโปรแกรมที่แสดงถึงแนวคิดของ 'วัตถุ' […] ซึ่งมักจะเป็นอินสแตนซ์ของคลาส [และ] ใช้เพื่อโต้ตอบกันเพื่อออกแบบแอปพลิเคชันและโปรแกรมคอมพิวเตอร์

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

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

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

 /**
 * วัตถุปุ่มที่เรียบง่ายและไม่มีการออกแบบ ขยายวัตถุนี้ด้วยสกิน `.btn--*`
 * ระดับ.
 */
.btn {
    แสดง: บล็อกอินไลน์;
    ช่องว่างภายใน: 1em 2em;
    แนวตั้งจัด: กลาง;
}

/**
 * ผิวปุ่มบวก ขยาย `.btn'
 */
.btn--บวก {
    พื้นหลังสี: สีเขียว;
    สี: ขาว;
}

/**
 * ผิวของปุ่มลบ ขยาย `.btn'
 */
.btn--เชิงลบ {
    พื้นหลังสี: สีแดง;
    สี: ขาว;
}

ต่อไปนี้เราจะเห็นว่าคลาส .btn นั้นสร้างโครงสร้างให้กับองค์ประกอบได้อย่างไร แต่ไม่มีอะไรเกี่ยวกับเครื่องสำอาง เราสามารถ ขยาย .btn ด้วยคลาสที่สอง เช่น .btn--positve เพื่อให้องค์ประกอบนั้นมีสไตล์ที่เฉพาะเจาะจงมากขึ้น:

 <button class="btn btn--positive">ตกลง</button>

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

เบม

BEM ( Block, Element, Modifier ) เป็นวิธีการส่วนหน้าซึ่งพัฒนาขึ้นที่ Yandex BEM เป็นวิธีการที่สมบูรณ์แบบจริงๆ และฉันไม่ได้เจาะลึกรายละเอียดทั้งหมด แต่สิ่งที่ฉันกังวลก็คือหลักการตั้งชื่อเท่านั้น

ฉันใช้แบบแผนการตั้งชื่อ แบบ BEM แนวคิดเหมือนกัน แต่ไวยากรณ์ที่แน่นอนอาจแตกต่างกันเล็กน้อย

BEM แบ่งชั้นเรียนออกเป็นสามกลุ่ม:

1. บล็อก: รูทหรือฐานของส่วนประกอบ
2. องค์ประกอบ: องค์ประกอบภายใน Block
3. ตัวดัดแปลง: รูปแบบหรือส่วนขยายของ Block

การเปรียบเทียบขั้นพื้นฐาน ( ไม่ใช่ ตัวอย่าง):

 .หมา {}
.dog__tail {}
.dog--เล็ก {}

องค์ประกอบจะถูกคั่นด้วยขีดล่างสองตัว (__) และตัวแก้ไขจะถูกคั่นด้วยเครื่องหมายขีดกลางสองตัว (–)

จากการเปรียบเทียบข้างต้น เราจะเห็นว่า .dog คือ Block ซึ่งเป็นรากขององค์ประกอบ จากนั้น . .dog__tail จะเป็นองค์ประกอบ เป็นส่วนที่เล็กกว่าของ . .dog Block สุดท้าย . .dog--small คือ Modifier ซึ่งเป็นรูปแบบเฉพาะของ . .dog Block คุณยังสามารถใช้ตัวดัดแปลงกับองค์ประกอบได้ ตัวอย่างเช่น เราสามารถมี .dog__tail--short อีกครั้ง ระบุการเปลี่ยนแปลงในองค์ประกอบ dog__tail

ในบางกรณี ฉันอาจต้องการคำหลายคำสำหรับ Blocks, Elements หรือ Modifiers ไม่ว่าในกรณีใด สิ่งเหล่านี้จะถูกคั่นด้วยยัติภังค์เดียว (-) และคลาสจะถูกเขียนด้วย ตัวพิมพ์เล็ก เสมอ

ตัวประมวลผลล่วงหน้า

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

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

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

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

บทสรุป

จุดที่แท้จริงของฉันที่นี่คือ CSS จะ ดีกว่า ทุกอย่าง สามารถ ดีขึ้นได้ มีคนบอกฉันเมื่อเร็ว ๆ นี้ในความคิดเห็นในโพสต์บน Reddit ว่า "CSS ไม่มีความหมาย" ฉันไม่เห็นด้วยอย่างสุดใจ CSS 100% ไม่ต้องสงสัยเลยว่า สามารถ สื่อความหมายได้

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

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

TL;DR

โอเค มันอาจจะมากไป สรุปคือ เขียน CSS ให้ดีขึ้นโดยทำสิ่งนี้:

CSS เชิงวัตถุ :

• แต่ละชั้นทำสิ่งเดียว — ทำดี ทำถูกต้อง

ชื่อคลาสสไตล์ Block, Element, Modifier (BEM) :

• บล็อก: .grid
• องค์ประกอบ: .grid__item (2 ขีดล่าง)
• ตัวแก้ไข: .grid--wide (2 ยัติภังค์)

ตัวประมวลผลล่วงหน้านั้นยอดเยี่ยม :

• ตรวจสอบพวกเขาออก: น้อย – SASS
• หรือค้นหาสิ่งอื่นๆ: 8 CSS พรีโปรเซสเซอร์เพื่อเร่งเวลาในการพัฒนา