ทำความเข้าใจกับวิธีการเขียน CSS

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

วิธีการคือ ระบบของวิธีการ. คิดว่าวิธีการเป็นเพียงวิธีการทำบางสิ่งบางอย่างอย่างเป็นระบบในวิธีที่กำหนดไว้ล่วงหน้าในการทำสิ่งต่าง ๆ เพื่อให้บรรลุผลตามที่เราต้องการ.

เพื่อให้ได้ผลลัพธ์ที่ดีขึ้น, เราปรับปรุงวิธีการของเราโดยการวางแผนให้ดีขึ้น, เปลี่ยนลำดับขั้นตอนทำให้ง่ายขึ้น - อะไรก็ตามที่ใช้งานได้ ได้เร็วขึ้น และอีกมากมาย ที่มีประสิทธิภาพ.

ระเบียบวิธี CSS

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

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

เราจะดูวิธีการสูตรที่รวมไปถึง:

1. OOCSS (Object Oriented CSS)
2. BEM (บล็อก, องค์ประกอบ, ตัวดัดแปลง)
3. ACSS (Atomic CSS)
4. SMACSS (ปรับขนาดได้และสถาปัตยกรรมแบบแยกส่วนสำหรับ CSS)

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

1. OOCSS

พัฒนาโดย Nicole Sullivan ในปี 2008 แนวคิดหลักของ OOCSS (Object Oriented CSS) รวมถึง CSS วัตถุ การระบุการแยกโครงสร้างและสไตล์ของภาพและหลีกเลี่ยงสไตล์ตามตำแหน่ง.

ใน OOCSS ขั้นตอนแรกที่ Nicole เสนอให้เราทำคือ ระบุวัตถุใน CSS.

“โดยทั่วไป CSS "object" เป็นรูปแบบการแสดงซ้ำที่สามารถแยกออกเป็นส่วนย่อยอิสระของ HTML, CSS และ JavaScript วัตถุนั้นสามารถนำกลับมาใช้ซ้ำได้ทั่วทั้งไซต์ - Nicole Sullivan, Github (OOCSS)“

ยกตัวอย่างโครงสร้างนี้จากเว็บไซต์นี้ นี่คือสิ่งที่เป็นรูปแบบภาพซ้ำและมี HTML และ / หรือ CSS ของตนเอง:

เรามีวัตถุสองประเภทที่นี่ตัวอย่างที่ใหญ่กว่าของชื่อที่เราจะตั้งชื่อ โพสต์ภาพตัวอย่างหลัก และแถบข้างที่มีชื่อซึ่งเราจะตั้งชื่อ โพสต์ภาพตัวอย่างมัธยมศึกษา.

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

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

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

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

ข้อดีของ OOCSS: รหัสการจัดแต่งทรงผมแบบภาพซ้ำได้, รหัสความยืดหยุ่นตำแหน่ง, การลดตัวเลือกที่ซ้อนกันลึก.

จุดด้อย ของ OOCSS: หากไม่มีจำนวนที่เหมาะสมของรูปแบบการทำซ้ำภาพการแยกโครงสร้างและรหัสลักษณะของภาพดูเหมือนไม่จำเป็น.

2. BEM

พัฒนาโดยนักพัฒนาที่ Yandex ในปี 2009 แนวคิดหลักสำหรับ BEM (Block, Element, Modifier) ​​ครอบคลุมการระบุ กลุ่ม, ธาตุ & ส่วนขยาย และตั้งชื่อให้เหมาะสม.

“กลุ่ม” เป็นหลักเช่นเดียวกับ “วัตถุ”(จากตัวอย่างก่อน) “ธาตุ” อ้างถึงส่วนประกอบของบล็อก (รูปภาพ, ชื่อ, ข้อความตัวอย่างในด้านบน โพสต์ภาพตัวอย่าง- วัตถุ) “ส่วนขยาย” สามารถใช้เมื่อสถานะของบล็อกหรือองค์ประกอบเปลี่ยนแปลงตัวอย่างเช่นเมื่อคุณเพิ่มคลาสที่แอ็คทีฟให้กับไอเท็มเมนูเพื่อไฮไลต์คลาสแอ็คทีฟทำหน้าที่เป็นโมดิฟายเออร์ของคุณ.

เมื่อคุณระบุส่วนประกอบแล้วให้ตั้งชื่อให้เหมาะสม ตัวอย่างเช่น:

• บล็อกเมนูจะมีคลาส เมนู
• รายการของมันจะมีชั้นเรียน รายการเมนู (บล็อกและองค์ประกอบถูกคั่นด้วยเครื่องหมายขีดล่างคู่)
• โมดิฟายเออร์สำหรับสถานะที่ถูกปิดใช้งานของเมนูสามารถมีคลาสได้ menu_disabled (ตัวแก้ไขถูกคั่นด้วยขีดล่างเดียว)
• ตัวปรับแต่งสำหรับสถานะที่ถูกปิดใช้งานของรายการเมนูสามารถเป็นได้ menu__item_disabled.

สำหรับการดัดแปลงเราสามารถใช้ key_value รูปแบบสำหรับการตั้งชื่อ ตัวอย่างเช่นในการแยกแยะรายการเมนูใด ๆ ที่ลิงก์ไปยังบทความที่ล้าสมัยเราสามารถให้ชั้นเรียนได้ menu__item_status_obsolete, และสำหรับการออกแบบไอเท็มเมนูใด ๆ ที่ชี้ไปที่เอกสารที่ค้างอยู่ชื่อคลาสสามารถ menu__item_status_pending.

การตั้งชื่อสามารถแก้ไขได้ตามที่คุณต้องการ ความคิดคือการสามารถที่จะ ระบุบล็อกองค์ประกอบและตัวดัดแปลงจากชื่อคลาส. ตรวจสอบระบบการตั้งชื่อบางรายการที่อยู่ในไซต์ BEM.

เว็บไซต์ของ BEM นั้นมีรายชื่อเช่นกัน วิธีการแยกบล็อกองค์ประกอบและตัวดัดแปลงสามารถนำเข้าสู่ระบบไฟล์ CSS ได้อย่างไร. บล็อกชอบ “ปุ่ม” และ “ปัจจัยการผลิต” สามารถมีโฟลเดอร์ของตนเองซึ่งประกอบด้วยไฟล์ (.css, .js) ที่เกี่ยวข้องกับบล็อกเหล่านั้นซึ่งทำให้สิ่งต่าง ๆ ง่ายขึ้นเมื่อเราต้องการนำเข้าบล็อกเหล่านั้นในโครงการอื่น.

ข้อดีของ BEM:ง่ายต่อการใช้ชื่อคลาสและการลดลงในตัวเลือก CSS ลึก.

ข้อเสียของ BEM:เพื่อให้ชื่อดูมีเหตุผล BEM แนะนำให้เราบล็อกองค์ประกอบที่ทำรังตื้น ๆ.

3. ACSS

สร้างชื่อเสียงโดย Yahoo สถานที่ใกล้ถึงจุดสิ้นสุดแห่งแรก ทศวรรษที่ 21^{เซนต์} ศตวรรษแนวคิดหลักของ ACSS ประกอบด้วยการสร้างคลาสในระดับอะตอมมิกสุดของการจัดแต่งทรงผมเช่นคู่ของค่าคุณสมบัติจากนั้นใช้พวกเขาใน HTML ตามต้องการ.

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

ด้านล่างนี้เป็นตัวอย่างของคลาสที่ใช้ ACSS และวิธีใช้ใน HTML.

 .mr-8 margin-right: 8px; .fl-r float: right; 
 

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

ข้อดีของ ACSS:ใส่สไตล์ HTML โดยไม่ทิ้ง HTML.

ข้อเสียของ ACSS:มีหลายคลาสเกินไปไม่เรียบร้อยและคุณอาจเกลียด.

4. SMACSS

พัฒนาในปี 2554 โดย Jonathan Snook SMACSS (Scalable และ Modular Architecture for CSS) ทำงานโดยการระบุกฎสไตล์ 5 แบบ ชื่อคลาสและระบบจัดเก็บข้อมูลจะถูกสร้างขึ้นตามสิ่งเหล่านี้.

“SMACSS เป็นวิธีการตรวจสอบกระบวนการออกแบบของคุณและเป็นวิธีที่จะทำให้กรอบงานที่ยืดหยุ่นเหล่านั้นเข้ากับกระบวนการคิดที่ยืดหยุ่น - Jonathan Snook”

SMACSS ระบุกฎสไตล์ 5 ประเภท ได้แก่ ฐาน, เลย์เอาต์, โมดูล, สถานะ, และ กระทู้.

• สไตล์พื้นฐานเป็นสไตล์เริ่มต้นที่กำหนดให้กับแท็ก HTML พื้นฐานเช่น

  , .

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

กฎสไตล์ที่แตกต่างสามารถระบุได้โดยใช้คำนำหน้าในชื่อคลาสเช่น l-header (สำหรับเลย์เอาต์) หรือ t-header (สำหรับธีม) นอกจากนี้เรายังสามารถจัดระเบียบประเภทต่าง ๆ เหล่านี้ได้โดยวางไว้ในไฟล์และโฟลเดอร์แยกกัน.

ข้อดีของ SMACSS:รหัสจัดระเบียบที่ดีขึ้น.

ข้อเสียของ SMACSS: ไม่มีฉันคิดได้.

มีหนังสือออนไลน์ฟรีที่คุณสามารถอ่านเกี่ยวกับ SMACSS หรือคุณสามารถซื้อรุ่น ebook เพื่อศึกษาเพิ่มเติม.

ข้อสรุป

วิธีการ CSS ข้างต้นจะให้ระบบแก่คุณ จัดการและเพิ่มประสิทธิภาพโค้ด CSS ของคุณ. สามารถรวมเข้าด้วยกันเช่น OOCSS-SMACSS หรือ OOCSS-BEM หรือ BEM-SAMCSS เพื่อให้เหมาะกับความต้องการของคุณ.

นอกจากนี้ยังมีเฟรมเวิร์กและไลบรารีหากคุณต้องการระบบอัตโนมัติสำหรับการดำเนินการวิธีการ CSS เช่น:

• กรอบงาน OOCSS
• เครื่องมือ BEM
• กรอบ CSS อินทรีย์ (ตามแนวคิดของอะตอม).