การทำให้เป็นโมดูล CSS และการแบ่งงานและการทำงานร่วมกันแบบหลายคน

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

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

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

(1) สร้างมาตรฐานการตั้งชื่อ CSS ลำดับการเขียน และความคิดเห็น

ไม่ต้องพูดถึงความสำคัญของประเด็นนี้ เป็นการยากที่จะจินตนาการว่าจะเกิดความสับสนเพียงใดหากวิธีการตั้งชื่อ "ส่วนบุคคลอย่างยิ่ง" หลายวิธีปรากฏในสไตล์ชีตในเวลาเดียวกัน การตั้งชื่อสามารถใช้การเชื่อมต่อสัญลักษณ์ตรงกลาง "-", "_" เช่น กล่องข้อความ เนื้อหาข้อความ text_box หรือการเขียน "ตัวพิมพ์ใหญ่" ตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก กล่องข้อความ เนื้อหาข้อความ เป็นต้น ความคิดเห็นมีความสำคัญมาก ความคิดเห็นสามารถแบ่งออกเป็นสามระดับ หมวดหมู่หลักๆ ของความคิดเห็นใช้ในการแบ่งบล็อก CSS เช่น ส่วนหัว, คอนเทนเนอร์, ส่วนท้าย ใส่คำอธิบายประกอบไว้ในตัวเลือก ใช้ความคิดเห็นหรือแฮ็กความคิดเห็นเกี่ยวกับเอฟเฟกต์พิเศษบางอย่าง รูปแบบการเขียนสามารถใช้การเยื้องแนวนอนเพื่อแสดงความสัมพันธ์แบบลำดับชั้น

(2) กำหนดการแบ่งโครงสร้างของสไตล์ชีตตามการเรนเดอร์

มีการแนะนำมากมายบนอินเทอร์เน็ตเกี่ยวกับการแบ่งโครงสร้างไฟล์ CSS ซึ่งโดยทั่วไปจะมีเพียงไม่กี่ไฟล์:layout.css/main.css/footer.css/header.css/reset.css ฯลฯ ใครๆ ก็บอกว่าเป็น เก่งแล้วฝึกฝนให้เข้าใจ ไม่มีดีที่สุด มีแต่เหมาะสมที่สุดเท่านั้น การแบ่งสไตล์ที่ดีที่สุดควรขึ้นอยู่กับโครงสร้าง HTML อย่างใกล้ชิด แทนที่จะเป็นแบบสากล
นอกเหนือจากการอำนวยความสะดวกในการแบ่งงานและการทำงานร่วมกันในอนาคตแล้ว การกระจายไฟล์ css ยังมีจุดที่สำคัญมากอีกด้วย: หากไบต์มีขนาดเล็ก ก็สามารถบีบอัดได้มากที่สุดเพื่อลดจำนวนการเชื่อมต่อที่เกิดขึ้นพร้อมกัน หากไบต์นั้นมากเกินไป ใหญ่สามารถแบ่งออกได้เพื่อป้องกันไม่ให้ความเร็วในการดาวน์โหลดช้าเกินไป ส่งผลต่อการโหลดสไตล์ สิ่งเหล่านี้เป็นปัญหาเฉพาะที่ต้องจัดการเป็นรายกรณี ตัวอย่างเช่น สำหรับเพจที่มีการเข้าชมสูง เช่น เครื่องมือค้นหาและหน้าแรกของพอร์ทัล วิธีที่ดีที่สุดคือเขียน CSS ภายในเพจ

ตัดสินใจเบื้องต้นเกี่ยวกับโครงสร้างสไตล์ CSS:

ตัวอย่างซอร์สโค้ด

reset.css /*การเติมเงินสไตล์เพจ*/
header.css /*รูปแบบส่วนหัวทั้งไซต์*/
footer.css /*รูปแบบส่วนท้ายของเว็บไซต์แบบเต็ม*/
public.css /*รูปแบบโมดูลสาธารณะสำหรับทั้งไซต์*/
index.css /*หน้าแรกมีสไตล์ไม่ซ้ำใคร*/
container.css /*รูปแบบเนื้อหาระดับ 2 และต่ำกว่า*/
print.css /*รูปแบบการพิมพ์*/
ie.css /*IE แฮ็ค*/

(3) กองแรงงานและความร่วมมือ

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

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