แนะนำ ITCSS สำหรับนักพัฒนาเว็บ

มีวิธีการที่ยอดเยี่ยมจำนวนหนึ่งสำหรับ การสร้างโค้ด CSS, และพวกเขาทั้งหมดทำงานในรูปแบบที่แตกต่างกัน สิ่งที่ได้รับความนิยมมากที่สุดคือ OOCSS และ SMACSS แต่ก็มีวิธีที่รู้จักกันน้อยกว่า ITCSS (CSS สามเหลี่ยมกลับหัว) สร้างโดย Harry Roberts.

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

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

ITCSS คืออะไร?

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

แนวคิดใหม่ของ Inverted Triangle CSS คือ วิธีการเรียงลำดับชั้นของคุณสมบัติ CSS ขึ้นอยู่กับระดับความจำเพาะและความสำคัญ. เป็นวิธีที่รู้จักกันน้อยกว่าเมื่อเปรียบเทียบกับ SMACSS และ OOCSS - แม้ว่าทั้งสองจะสามารถรวมกับ ITCSS.

เนื่องจาก ITCSS เป็น ส่วนใหญ่เป็นกรรมสิทธิ์, ไม่มีหนังสือกฎรายละเอียดเกี่ยวกับการใช้งาน เพียง ชุดของหลักการเฉพาะ อยู่ที่การกำจัดของเรา ผู้เขียนพูดถึงพวกเขาในวิดีโอด้านล่าง.

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

นี่คือประโยชน์ที่ยิ่งใหญ่ที่สุดของการใช้ ITCSS:

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

ระบบ ITCSS

ลองมาดูกันว่า Inverted Triangle Model ทำงานอย่างไรโดยใช้ภาพประกอบต่อไปนี้จากโพสต์ของ Lubos Kmetko.

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

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

ลองมาดูอย่างรวดเร็ว แต่ละส่วนของรูปสามเหลี่ยมคว่ำ ย้ายจากด้านบนลงไปที่ปลาย.

• การตั้งค่า - ตัวแปรและวิธีการของตัวประมวลผลล่วงหน้า (ไม่มีเอาต์พุต CSS จริง)
• เครื่องมือ - มิกซ์และฟังก์ชัน (ไม่มีเอาต์พุต CSS จริง)
• ทั่วไป - CSS รีเซ็ตซึ่งอาจรวมถึงการรีเซ็ต Eric Meyer, Normalize.css หรือชุดรหัสของคุณเอง
• องค์ประกอบ - ตัวเลือกองค์ประกอบ HTML เดียวโดยไม่มีคลาส
• วัตถุ - คลาสสำหรับโครงสร้างหน้าโดยทั่วไปจะเป็นไปตามวิธีการ OOCSS
• ส่วนประกอบ - คลาสสุนทรียศาสตร์สำหรับการออกแบบองค์ประกอบของหน้า & ทุกองค์ประกอบ (มักจะรวมกับโครงสร้างของคลาสวัตถุ)
• ปั้น - สไตล์ที่เฉพาะเจาะจงที่สุดสำหรับการเอาชนะสิ่งอื่นใดในสามเหลี่ยม

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

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

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

แม้ว่า Harry Roberts ผู้สร้างของ ITCSS สนใจที่จะรักษาวิธีการของเขาเป็นกรรมสิทธิ์สำหรับการใช้ภายใน แต่คุณสามารถค้นหา ตัวอย่างโอเพ่นซอร์สของ ITCSS ใน repit GitHub นี้ มันโฮสต์โดยบัญชี CSS Wizardry ซึ่งเป็นเว็บไซต์ส่วนตัวของ Harry Roberts.

BEM + IT = การตั้งชื่อ BEMIT

หนึ่งในรูปแบบการตั้งชื่อ CSS ที่เป็นที่นิยมที่สุดคือ BEM ย่อมาจาก Block-Element-Modifier และทำตามไวยากรณ์ที่เฉพาะเจาะจงมาก.

แต่ละองค์ประกอบใน BEM อธิบายถึงหลักการตั้งชื่อสำหรับคลาส CSS:

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

BEMIT เป็นแบบแผนการตั้งชื่อ รับรองโดย ITCSS, ซึ่งยืมความคิดจาก BEM ในขณะที่ใช้ความคิดใหม่กับ ITCSS.

ไวยากรณ์ BEM กำหนดกฎที่เจาะจงมาก ด้านล่างเป็นตัวอย่างจากเว็บไซต์ BEM:

.แบบฟอร์ม  .form - theme-xmas  .form - แบบง่าย  .form__input  .form__submit  .form__submit - ปิดใช้งาน  

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

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

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

นี่คือตัวอย่างรหัสบางส่วนที่เป็นตัวแทนของ แบบแผนการตั้งชื่อ BEMIT ทั่วไป.

  
... 
 
 

เขายังแนะนำให้ใช้ แอท คำต่อท้ายสำหรับชั้นเรียนตามสไตล์ของสื่อ ดังนั้น .o สื่อ ชั้นอาจเปลี่ยนเป็น .o สื่อ @ LG สำหรับหน้าจอขนาดใหญ่และ .o สื่อ @ md สำหรับหน้าจอขนาดกลาง.

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

ฉันขอแนะนำให้อ่านบทความแนะนำ BEMIT นี้เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับสาเหตุที่ ITCSS ขยาย BEM และวิธีที่คุณอาจต้องการตั้งชื่อคลาส CSS ของคุณ.

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

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

ห่อ

นักพัฒนา Front-end มักจะมองหาวิธีเพิ่มประสิทธิภาพเวิร์กโฟลว์ของพวกเขา ITCSS เป็นอีกวิธีการหนึ่งที่สามารถช่วยปรับปรุงวิธีการสร้างเว็บไซต์ที่ซับซ้อน.

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

• จัดการโครงการเว็บขนาดใหญ่ด้วยสถาปัตยกรรม CSS ใหม่ ITCSS (creativebloq.com)
• การจัดการโครงการ CSS ด้วย ITCSS - สไลด์การนำเสนอ (speakerdeck.com)
• โครงการ CSS พร้อม ITCSS (วิดีโอนำเสนอ 1 ชั่วโมง)
• ITCSS - วิธีที่น่าสนใจในการจัดระเบียบโครงการขนาดใหญ่ (css-tricks.com)

(ภาพปกผ่าน speakerdeck.com)