จัดการโครงการเว็บขนาดใหญ่ด้วยสถาปัตยกรรม CSS ใหม่ ITCSS

ผู้เขียน: Louise Ward
วันที่สร้าง: 5 กุมภาพันธ์ 2021
วันที่อัปเดต: 18 พฤษภาคม 2024
Anonim
จัดการโครงการเว็บขนาดใหญ่ด้วยสถาปัตยกรรม CSS ใหม่ ITCSS - ความคิดสร้างสรรค์
จัดการโครงการเว็บขนาดใหญ่ด้วยสถาปัตยกรรม CSS ใหม่ ITCSS - ความคิดสร้างสรรค์

เนื้อหา

สถาปัตยกรรม CSS กำลังเป็นที่นิยมในขณะนี้ เป็นสิ่งที่คุณไม่ต้องสงสัยเลยว่าได้ยินได้กล่าวถึงหลายครั้งในช่วงปีที่ผ่านมาและด้วยเหตุผลที่ดี: UI (และทีมที่สร้างขึ้น) มีขนาดใหญ่ขึ้นและซับซ้อนมากขึ้นกว่าเดิม

CSS มีหลายแง่มุมที่ทำให้ยุ่งยากเช่นกัน

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

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

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

ป้อนสถาปัตยกรรม CSS: วิธีการวางแผนและจัดโครงสร้าง CSS ของคุณสำหรับโครงการขนาดใหญ่และดำเนินการมายาวนาน


แนะนำ ITCSS

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

  • Harry Roberts ได้เขียนแนะนำ ITCSS ฉบับพิเศษหกหน้าสำหรับนิตยสาร net ฉบับใหม่

เราสนทนากับ Harry Roberts - ผู้สร้าง ITCSS

ทำไมคุณไม่แนะนำตัวเอง?

เฮ้! ฉันคือแฮร์รี่ ฉันเป็นที่ปรึกษา Front-end Architect จากสหราชอาณาจักร งานของฉันคือการเดินทางไปรอบ ๆ จากลูกค้าไปยังลูกค้าเพื่อช่วยให้พวกเขาและทีมของพวกเขาเข้าใจและจัดการทุกอย่างได้ดีขึ้นตั้งแต่กระบวนการออกแบบไปจนถึงสถาปัตยกรรม CSS ไปจนถึงประสิทธิภาพ

ฉันโชคดีพอที่จะทำสิ่งนี้ให้กับผู้คนเช่น Google, Kickstarter และ BBC และอื่น ๆ ฉันมีงานที่ดีที่สุดในโลก


และ ITCSS. มันคืออะไร?

ITCSS ซึ่งย่อมาจาก Inverted Triangle CSS เป็นสถาปัตยกรรม CSS ที่มีการจัดการเต็มรูปแบบ ไม่ใช่กรอบงานหรือไลบรารี ไม่มีอะไรให้ดาวน์โหลดหรือติดตั้ง

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

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

คุณจะอธิบายปรัชญาของ ITCSS ได้อย่างไร?

ปรัชญาของ ITCSS นั้นเป็นหลักที่เรียบง่าย โดยพื้นฐานแล้วเราควรจัดลำดับ CSS ตามเมตริกที่กำหนดโดยภาษา (และคุณลักษณะของมัน) มากกว่ามาตรฐานปกติของรูปแบบที่มุ่งเน้นมนุษย์

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


กล่าวได้ว่าการย้ายไปยัง ITCSS (ทั้งในเชิงแนวคิดและในทางปฏิบัติ) ไม่ได้สร้างความตกใจให้กับระบบอย่างที่คุณคิด โดยพื้นฐานแล้วจะต้องใช้ปัจจัยพื้นฐานสองสามอย่างจากนั้นจึงเป็นธุรกิจตามปกติ

คุณสร้างมันขึ้นมาทำไม?

ฉันเริ่มทำงานในทีมผลิตภัณฑ์ในปี 2011 ซึ่งยังไม่มีงานเขียนและการค้นคว้าเกี่ยวกับ CSS ในระดับนั้นมากนัก ฉันถูกโยนเข้าไปในสภาพแวดล้อมที่ฉันเป็นนักพัฒนาส่วนหน้าเพียงคนเดียวในทีมวิศวกรรมของ dozes ซึ่งทำงานบนโค้ดเบสขนาดใหญ่ที่เราจะอยู่ในช่วงหลายปีต่อ ๆ ไป

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

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

อื่น ๆ ในช่วงสี่ปีที่ผ่านมางานนี้ได้รับการยกย่องให้เป็น ITCSS อย่างเป็นทางการ

หน้าถัดไป: วิธีการทำงานของ ITCSS และเวลาที่นักพัฒนาควรพิจารณาเรียกร้อง ...

สำหรับคุณ
วิธีสร้างรายได้ในฐานะนักออกแบบ: 4 เคล็ดลับสำหรับมืออาชีพ
อ่านเพิ่มเติม

วิธีสร้างรายได้ในฐานะนักออกแบบ: 4 เคล็ดลับสำหรับมืออาชีพ

คู่มือและแบบสำรวจเงินเดือนประจำปีของ Creativepool ให้ข้อมูลเชิงลึกที่มีคุณค่าเกี่ยวกับความหมายของการทำงานในอุตสาหกรรมสร้างสรรค์ในสหราชอาณาจักรในปัจจุบัน การสำรวจผู้เชี่ยวชาญด้านครีเอทีฟกว่า 2,500 คนตั...
วิธีการออกแบบสำหรับจอแสดงผลความละเอียดสูง
อ่านเพิ่มเติม

วิธีการออกแบบสำหรับจอแสดงผลความละเอียดสูง

ผู้เชี่ยวชาญด้านการออกแบบเว็บไซต์ Chri topher chmitt ตอบคำถามในเชิงบวกว่าเราควรคำนึงถึงการแสดงผลความละเอียดสูงในวิธีการออกแบบของเราหรือไม่:“ เราเคยมีสงครามเบราว์เซอร์ ตอนนี้เรามีสงครามแท็บเล็ต ตลาดจะอ...
แหล่งเรียนรู้ชั้นนำ 12 แห่งสำหรับนักวาดภาพประกอบ
อ่านเพิ่มเติม

แหล่งเรียนรู้ชั้นนำ 12 แห่งสำหรับนักวาดภาพประกอบ

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