พื้นฐานของ CSS เชิงวัตถุ (OOCSS)

การพัฒนาส่วนหน้าดำเนินไปอย่างรวดเร็วด้วยเทคนิคใหม่ ๆ ที่เพิ่มเข้ามาทุกปี มันอาจเป็นการต่อสู้สำหรับนักพัฒนาเพื่อให้ทันกับทุกสิ่ง ระหว่าง Sass และ PostCSS มันง่ายที่จะหลงทางในเครื่องมือการพัฒนา.

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

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

สิ่งที่ทำให้ CSS Object-Oriented?

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

OOP ใช้กันอย่างแพร่หลายในทั้งสองอย่าง ภาษาจาวาสคริปต์และแบ็กเอนด์ ในไม่กี่ปีที่ผ่านมา แต่การจัดระเบียบ CSS ตามหลักการของมันยังคงเป็นแนวคิดใหม่.

“วัตถุ” ใน OOCSS หมายถึง องค์ประกอบ HTML หรือสิ่งที่เกี่ยวข้อง (เช่นคลาส CSS หรือเมธอด JavaScript) ตัวอย่างเช่นคุณอาจมีวัตถุวิดเจ็ตแถบด้านข้างที่สามารถจำลองแบบเพื่อวัตถุประสงค์ที่แตกต่างกัน (การลงทะเบียนจดหมายข่าวบล็อกโฆษณาโพสต์ล่าสุด ฯลฯ ) CSS สามารถ เป้าหมายวัตถุเหล่านี้มาสค์ ซึ่งทำให้การปรับเป็นเรื่องง่าย.

การสรุปรายการ GitHub ของ OOCSS วัตถุ CSS อาจประกอบด้วยสี่สิ่ง:

1. โหนด HTML ของ DOM
2. ประกาศ CSS เกี่ยวกับสไตล์ของโหนดเหล่านั้น
3. ส่วนประกอบเช่นภาพพื้นหลัง
4. พฤติกรรม JavaScript, ผู้ฟังหรือวิธีการที่เกี่ยวข้องกับวัตถุ

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

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

หน้าคำถามที่พบบ่อย OOCSS มีข้อมูลมากมายหากคุณอยากรู้เพิ่มเติม และผู้สร้าง Nicole Sullivan มักพูดถึง OOCSS และความสัมพันธ์กับการพัฒนาเว็บไซต์ที่ทันสมัย.

โครงสร้างแยกจากสไตล์

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

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

นี่คือตัวอย่างของ OOCSS สำหรับ “โพสต์ล่าสุด” วิดเจ็ตที่ในกรณีนี้คือวัตถุ CSS ของเรา:

 / * Structure * / .side-widget width: 100%; การขยาย: 10px 5px;  / * Skinning * / .recent-posts font-family: Helvetica, Arial, sans-serif; สี: # 2b2b2b; font-size: 1.45em;  

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

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

แยกคอนเทนเนอร์ออกจากเนื้อหา

การแยกเนื้อหาออกจากองค์ประกอบคอนเทนเนอร์ เป็นอีกหนึ่งหลักการสำคัญของ OOCSS.

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

นี่คือตัวอย่างง่ายๆ:

 / * OOCSS * / .sidebar / * เนื้อหาของแถบด้านข้าง * / h2.sidebar-title / * รูปแบบองค์ประกอบ h2 พิเศษ * / / * ไม่ใช่ OOCSS * / .sidebar / * เนื้อหาในแถบด้านข้างเดียวกัน * / .sidebar h2 / * เพิ่มความเจาะจงมากกว่าที่จำเป็น * / 

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

แนวทางการพัฒนา

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

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

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

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

ชื่อคลาสภายใน OOCSS ค่อนข้างขัดแย้งและไม่ได้ตั้งอยู่ในหิน นักพัฒนาหลายคนต้องการให้ชั้นเรียนสั้นและตรงประเด็น.

กรณีของอูฐก็เป็นที่นิยมเช่นกัน .errorBox แทน .ข้อผิดพลาดกล่อง. หากคุณดูที่การตั้งชื่อชั้นเรียนในเอกสารประกอบของ OOCSS คุณจะสังเกตเห็นกรณีของอูฐเป็น “เป็นทางการ” ข้อเสนอแนะ ไม่มีอะไรผิดปกติกับขีดกลาง แต่ตามกฎแล้วควรทำตามคำแนะนำของ OOCSS.

OOCSS + Sass

นักพัฒนาเว็บส่วนใหญ่นั้นรัก Sass อยู่แล้วและได้ทันชุมชนส่วนหน้าอย่างรวดเร็ว หากคุณยังไม่ได้ลอง Sass มันคุ้มค่าที่จะลองดู จะช่วยให้คุณสามารถเขียนโค้ดพร้อมตัวแปรฟังก์ชันการซ้อนและวิธีการคอมไพล์เช่นฟังก์ชันทางคณิตศาสตร์.

ในมือที่มีความสามารถ Sass และ OOCSS อาจเป็นการแข่งขันที่เกิดขึ้นในสวรรค์ คุณจะพบการเขียนที่ยอดเยี่ยมเกี่ยวกับเรื่องนี้ในบล็อก Sass Way.

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

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

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

คุณลักษณะที่สำคัญของรหัส OOCSS ที่ยอดเยี่ยมคือ ความสามารถในการแบ่งปันกับทุกคน, แม้กระทั่งตัวคุณเองในภายหลังและสามารถหยิบมันได้อย่างง่ายดาย.

ข้อควรพิจารณาด้านประสิทธิภาพ

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

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

คุณจะพบกับการสนทนาที่น่าสนใจเกี่ยวกับหัวข้อนี้ในเว็บไซต์ต่างๆเช่น Stack Overflow และ CSS-Tricks.

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

รับการเขียนไม่ว่าง OOCSS

วิธีที่ดีที่สุดในการเรียนรู้ทุกสิ่งในการพัฒนาเว็บคือการฝึกฝน หากคุณเข้าใจพื้นฐานของ CSS อยู่แล้วคุณก็ไปได้ดี!

เนื่องจาก OOCSS ไม่ต้องการการประมวลผลล่วงหน้าคุณสามารถลองกับ IDE ออนไลน์เช่น CodePen โครงการง่าย ๆ ที่ดีที่สุดสำหรับการเริ่มต้นและพัฒนาความรู้ของคุณจากที่นั่น.

ดูแหล่งข้อมูลเหล่านี้เพื่อทำการวิจัยของคุณในด้านการพัฒนาของ OOCSS.

• เว็บไซต์ทางการของ OOCSS
• CSS เชิงวัตถุ: อะไรอย่างไรและทำไม
• OOCSS + Sass = วิธีที่ดีที่สุดในการ CSS
• บทนำสู่ CSS เชิงวัตถุ