"Framework" เป็นคำที่นิยมใช้กันมากในการพัฒนาเว็บในปัจจุบัน ตัวอย่างเช่น กรอบงาน JavaScript YUI, JQuery และ Prototype ได้รับความสนใจอย่างกว้างขวาง และกรอบงานเว็บแอปพลิเคชัน Rails และ Dojo ได้รับความสนใจมากยิ่งขึ้น ดูเหมือนว่าทุกคนจะใช้กรอบงานบางประเภทในการพัฒนาเว็บไซต์ของตนเอง แต่จริงๆ แล้วกรอบงานคืออะไรกันแน่ กรอบงานมีประโยชน์กับโปรแกรมเมอร์เท่านั้นหรือไม่?
กรอบคืออะไร?
เพื่ออำนวยความสะดวกในการสื่อสาร เราได้ให้คำจำกัดความแบบรวมของ "กรอบงาน" (อย่างน้อยในบทความนี้): ชุดเครื่องมือ ไลบรารีฟังก์ชัน แบบแผน และโมดูลทั่วไปที่พยายามสรุปงานทั่วไปและสามารถนำมาใช้ซ้ำได้ และนักพัฒนาเพื่อมุ่งเน้นไปที่ลักษณะเฉพาะของโครงการงานและหลีกเลี่ยงความซ้ำซ้อนของการพัฒนา โดยทั่วไปแล้ว เฟรมเวิร์กคือเฟรมเวิร์ก JavaScript และเฟรมเวิร์กแอปพลิเคชันเว็บที่กล่าวถึงข้างต้น
สิ่งสำคัญคือต้องเน้นว่าเราไม่จำเป็นต้องพูดถึงการก่อสร้าง บรรจุภัณฑ์ และการจัดจำหน่าย แต่มีเพียงคุณหรือทีมเท่านั้นที่สามารถใช้เฟรมเวิร์กได้
กรอบงานซีเอสเอส
บางครั้งคุณอาจได้ลิ้มรสประโยชน์ของโค้ด CSS แบบนามธรรมและที่คล้ายกัน ซึ่งชัดเจนที่สุดในบรรดานักออกแบบที่ออกแบบเว็บไซต์ที่คล้ายกันหลายเว็บไซต์ในเวลาเดียวกัน นอกจากนี้ นักออกแบบในทีมยังได้รับประโยชน์มากมายจากแนวทางของเฟรมเวิร์ก ตัวอย่างเช่น ฉันทำงานให้กับหนังสือพิมพ์ และเว็บไซต์มากกว่า 20 แห่งมีเนื้อหาที่เหมือนกันมาก เมื่อพิจารณาจากลักษณะของเว็บไซต์ข่าว พวกเขามักจะมีความคล้ายคลึงมากกว่าแตกต่างกัน แต่แม้แต่นักออกแบบคนเดียวที่ทำงานในโครงการที่ดูภายนอกแตกต่างกันมากก็สามารถสรุปส่วนเล็กๆ น้อยๆ ทั่วไปสำหรับเฟรมเวิร์ก CSS ได้
ที่ Lawrence Journal-World ที่ฉันทำงานอยู่ เราเพิ่งสร้างเฟรมเวิร์ก CSS และพบว่ามันเป็นตัวคูณประสิทธิภาพมหาศาล แน่นอนว่าเราต้องใช้เวลาหลายวันในการสร้างเฟรมเวิร์ก CSS ด้วยตัวเอง แต่เมื่อเฟรมเวิร์กเสร็จสมบูรณ์ การพัฒนาหน้าเว็บคุณภาพสูงก็ทำได้รวดเร็วมาก ยิ่งไปกว่านั้น เนื่องจากนักออกแบบทุกคนในทีมใช้เฟรมเวิร์กนี้ เมื่อนักออกแบบแก้ไขหน้าเว็บของสมาชิกในทีมคนอื่น พวกเขาไม่จำเป็นต้องใช้เวลา 20 นาทีในการทำความเข้าใจแนวคิดการก่อสร้างของผู้อื่นอีกต่อไป และสามารถเริ่มต้นได้ทันที
มีอะไรที่สามารถละเลยได้หรือไม่?
เมื่อลงทุนในเฟรมเวิร์ก CSS แบบองค์รวม สิ่งที่คุณต้องการค้นหาคือโค้ดทั่วไปที่ซ้ำแล้วซ้ำอีกในทุกโปรเจ็กต์ เป้าหมายคือการรวมตำแหน่งหลักของโค้ดเหล่านี้และปฏิบัติตาม "อย่าทำซ้ำตัวเอง" t ทำซ้ำตัวเอง)" วิธีการเข้ารหัส ทำให้การบำรุงรักษาง่ายขึ้นมากและประหยัดต้นทุนแบนด์วิธสำหรับผู้เยี่ยมชมของคุณ
ในเกือบทุกโครงการที่ฉันทำ มีปัญหา CSS บางประการที่ฉันต้องประกาศ:
"การรีเซ็ตแบบครอบคลุม" ของสไตล์เริ่มต้นของเบราว์เซอร์ เช่น การตั้งค่าระยะขอบและช่องว่างภายในขององค์ประกอบทั้งหมดเป็น 0, การลบเส้นขอบของชุดเฟรมและรูปภาพ เป็นต้น
จัดแนวให้เป็นพื้นฐาน ซึ่งรวมถึงสิ่งต่างๆ เช่น การตั้งค่าระยะขอบสำหรับองค์ประกอบระดับบล็อก เช่น ย่อหน้า ส่วนหัว และรายการให้มีความสูงของบรรทัดพื้นฐานเท่ากัน (หรือหลายรายการ)
สร้างสไตล์พื้นฐานของแบบฟอร์ม
สร้างคลาส CSS ที่ใช้กันทั่วไปหลายคลาส เช่น .hide (ตั้งค่าการแสดงผลเป็นไม่มี นั่นคือ ซ่อนองค์ประกอบ), .mute (ตั้งค่าเป็นแบบอักษรเล็กลงและสีสว่างกว่า)
และที่น่าตลกกว่านั้นก็คือ นักออกแบบเว็บไซต์จำนวนมากพบว่าตัวเองนำโครงสร้างพื้นฐานเดิมมาใช้ซ้ำแล้วซ้ำอีก ดังนั้นทำไมไม่สร้างมันขึ้นมาเอง ในแบบที่ยืดหยุ่นมากและสามารถใช้ได้กับหลาย ๆ เว็บไซต์ Yahoo ทำสิ่งนี้ แค่นี้เอง ยุ้ย. ตอนที่เราสร้างเฟรมเวิร์ก CSS สำหรับเว็บไซต์ Lawrence Journal-World ฉันเริ่มด้วยการดูว่า Yahoo ทำได้อย่างไร เราค่อนข้างแน่ใจว่านั่นไม่ใช่สิ่งที่เราต้องการ แต่มันทำหน้าที่เป็นตัวอย่างที่ดีและให้แนวคิดมากมายแก่เราในการคิดและวิธีสร้างกรอบงานของเราเอง เราจัดการกับปัญหา 16 เซลล์ที่ยืดหยุ่นพอที่จะทำงานกับทุกไซต์ของเรา แม้ว่าแต่ละไซต์จะดูแตกต่างจากที่อื่นเล็กน้อยก็ตาม นอกจากนี้ เว็บไซต์ส่วนใหญ่ยังแชร์วิดเจ็ต เช่น เมนูแบบเลื่อนลง เมนูการนำทาง ปุ่ม ฯลฯ สิ่งเหล่านี้ก็เป็นวัตถุหลักที่ต้องสรุปเช่นกัน นอกจากนี้ คุณอาจมีชื่อเนื้อหาทั่วไป เช่น ภาพขนาดย่อสำหรับรายการรูปภาพ คุณสามารถตั้งชื่อ CSS ให้เป็นมาตรฐานได้ เช่น "รายการภาพขนาดย่อ" เพื่อให้ภาพขนาดย่อทั้งหมดที่แสดงภาพขนาดย่อใช้คลาส CSS นี้
อีกสิ่งหนึ่งที่ต้องทำคือแยกแฮ็ก (เช่นความเข้ากันได้กับเบราว์เซอร์เก่าเหล่านั้น) และเพิ่มโมดูลสไตล์เพิ่มเติมของคุณเอง ฉันลองด้วยตัวเองแล้ว แต่พบว่าแฮ็คนั้นมีกรรมสิทธิ์เกินกว่าที่จะแยกออกเป็นเฟรมเวิร์กทั่วไปได้
ประโยชน์ที่แท้จริงคืออะไร?
ประโยชน์ที่แท้จริงของเฟรมเวิร์กคือสามารถเริ่มทำงานได้อย่างรวดเร็ว คุณสามารถสร้างไฟล์ (X)HMTL ใหม่และแนะนำเฟรมเวิร์กของคุณได้ คุณไม่จำเป็นต้องจัดการกับการรีเซ็ตช่องว่างภายในและระยะขอบที่สวยงามอีกต่อไป วิดเจ็ตที่ถูกต้อง ฯลฯ แน่นอนว่าคุณจะต้องปรับแต่งรูปลักษณ์และการใช้งานของแต่ละเว็บไซต์อย่างแน่นอน เพื่อให้บรรลุเป้าหมายนี้ สิ่งที่คุณต้องทำคือแทนที่และเพิ่มสไตล์เริ่มต้นตามที่จำเป็น
แน่นอนว่าแม้ว่าคุณจะต้องปรับแต่งรูปลักษณ์ของแต่ละเว็บไซต์ แต่สิ่งที่คุณต้องทำเพื่อให้บรรลุผลก็คือการเพิ่มโค้ดสองสามบรรทัดให้กับสไตล์เริ่มต้น ตัวอย่างเช่น หากคุณตั้งค่ารูปแบบการนำทางแนวนอนขั้นพื้นฐานสำหรับแท็ก UL ทั้งหมดด้วยแอตทริบิวต์คลาส "แท็บ" ในเฟรมของคุณ และมีเส้นขอบสีเทา คุณจะต้องใช้โค้ด CSS เพียงไม่กี่บรรทัดเพื่อปรับแต่งรูปลักษณ์ของคุณ เว็บไซต์สอดคล้องกับ
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: ul.tabs ลี { เส้นขอบ: ไม่มี; ภาพพื้นหลัง: url('/images/tabs/ ?site-special-tab-look.jpg'); - ul.tabs ลี { เส้นขอบ: ไม่มี; ภาพพื้นหลัง: url('/images/tabs/ ?site-special-tab-look.jpg'); - |
รายการจะลอยไปทางซ้ายและลิงก์จะอยู่ในรูปแบบบล็อกในรายการ ลิงก์จะลอยไปทางซ้ายและแบบอักษรจะอยู่ตรงกลาง งานออกแบบเพียงเน้นไปที่รายละเอียดเฉพาะที่น่าสนใจของเว็บไซต์ของคุณ แทนที่จะเขียนโค้ด CSS ที่เคยเขียนไว้เป็นล้านครั้งแล้ว
จะสร้างเฟรมเวิร์ก CSS ได้อย่างไร?
มีหลายวิธีที่เป็นไปได้ในการสร้างเฟรมเวิร์ก แต่วิธีที่ธรรมดาที่สุดและมีประโยชน์มากที่สุดก็คือ การสรุป CSS ทั่วไปให้เป็นไฟล์สไตล์ชีตแบบสแตนด์อโลนที่มีเฉพาะส่วนเฉพาะของทั้งหมดเท่านั้น ตัวอย่างเช่น คุณสามารถมีรูปแบบตัวอักษรของแฮนเดิลรูปแบบหนึ่งและการรีเซ็ตจำนวนมากของแฮนเดิลอีกรูปแบบหนึ่งได้ วิธีการที่ดีนี้ช่วยให้คุณสามารถแนะนำสไตล์ที่คุณต้องการได้ อาจมีไฟล์สไตล์ที่แตกต่างกันหกหรือเจ็ดไฟล์ในเฟรมเวิร์กของคุณ แต่คุณไม่จำเป็นต้องใช้หนึ่งหรือสองไฟล์ตราบใดที่ยังไม่ได้นำเข้า เฟรมเวิร์กที่สร้างโดยทีมงานของเราประกอบด้วยไฟล์สไตล์ 5 ไฟล์:
reset.css - จัดการการรีเซ็ต
type.css - จัดการการพิมพ์
grid.css – จัดการเค้าโครง
widgets.css — จัดการวิดเจ็ต เช่น เมนูแท็บ เมนูแบบเลื่อนลง และปุ่ม "เพิ่มเติม"
base.css — ประกอบด้วยไฟล์สไตล์ชีตอื่นๆ ทั้งหมด ดังนั้นเราเพียงแต่ต้องอ้างอิง base.css ใน (X)HTML เพื่อใช้เฟรมเวิร์ก CSS ทั้งหมด จากนั้นเราจะจัดเก็บเฟรมเวิร์กไว้ในที่แยกต่างหาก เพื่อให้ทุกไซต์นำเข้าเฟรมนี้ แน่นอนว่าแต่ละเว็บไซต์ยังต้องการสไตล์ชีทที่ไม่ซ้ำใคร และสไตล์ที่เป็นเอกลักษณ์จะช่วยเสริมกรอบการทำงานที่จำเป็น
คำแนะนำ
วิธีนี้ดี แต่ก็นำมาซึ่งปัญหาใหม่ด้วย: เพิ่มจำนวนลิงก์ http สำหรับแต่ละหน้า สำหรับเว็บไซต์ที่มีปริมาณการเข้าชมจำนวนมากและปานกลาง หากมีการเพิ่มการเชื่อมต่อ HTTP มากกว่า 5 รายการในแต่ละหน้า ผู้ดูแลระบบอาจประสบปัญหาใหญ่ สองวิธีที่เป็นไปได้:
ใส่สไตล์ทั้งหมดลงในไฟล์เดียวแทนที่จะแยกออกเป็นหลายโมดูล ปัญหาคือความยืดหยุ่นของเฟรมเวิร์กในการรวมเฉพาะไฟล์บางไฟล์จะหายไป และการบำรุงรักษากลายเป็นเรื่องที่ยุ่งยาก
มีโปรแกรมฝั่งเซิร์ฟเวอร์ที่ประมวลผลไฟล์เดียวหลายไฟล์แบบไดนามิกเป็นการตอบกลับ ฉันยังไม่เคยเห็นสิ่งนี้เสร็จสิ้น แต่ควรจะมีประสิทธิภาพมากหากทำได้ดี จากตัวอย่างเฟรมเวิร์กข้างต้นของฉัน กระบวนการประมวลผลแบบไดนามิกนี้จะถูกทริกเกอร์เมื่อมีการร้องขอ base.css ไม่ใช่เมื่อมีการร้องขอ type.css, grids.css ฯลฯ ด้วยวิธีนี้ แต่ละไฟล์จะยังคงใช้งานได้ และเฟรมเวิร์กทั้งหมดสามารถใช้ได้ในเวอร์ชันแพลตฟอร์ม
โดยสรุป สิ่งสำคัญคือต้องทราบว่าเป้าหมายของเราไม่ใช่นามธรรมมากที่สุดเท่าที่จะเป็นไปได้ เป้าหมายคือเพื่อให้เริ่มต้นได้อย่างรวดเร็วและกระบวนการออกแบบที่มีประสิทธิภาพมากขึ้นซึ่งเป็นไปได้อย่างแน่นอน หากคุณดูเป็นนามธรรมเกินไป สิ่งต่างๆ อาจสร้างความสับสนได้ และลิงก์ HTTP มากเกินไปอาจส่งผลต่อประสิทธิภาพไซต์ของคุณได้ ข้อควรจำ: กรอบการทำงานที่ดีไม่ได้เกี่ยวกับการทำให้สิ่งต่าง ๆ ยากขึ้นและซับซ้อนมากขึ้น แต่เป็นการเริ่มตั้งแต่เริ่มต้น
สรุป
พวกเรานักออกแบบเว็บไซต์มักจะทำซ้ำๆ กันตลอดเวลา และเช่นเดียวกับเพื่อนของฉันในโลกการเขียนโปรแกรม เรารีเซ็ตสไตล์เริ่มต้นของเบราว์เซอร์ เลย์เอาต์การออกแบบ และเมนูการนำทางซ้ำแล้วซ้ำเล่า—ในเกือบทุกโปรเจ็กต์ การใช้เวลาเพียงเล็กน้อยในการแยกแยะกรอบงาน CSS จะช่วยให้คุณเริ่มต้นโครงการเว็บไซต์แต่ละโครงการได้อย่างรวดเร็ว ดูแลรักษาเว็บไซต์ได้ง่ายขึ้น และช่วยให้นักออกแบบคนอื่นๆ ในทีมเข้าใจงานของคุณ ควรสังเกตว่าจะต้องได้รับสิทธิประโยชน์เหล่านี้โดยไม่กระทบต่อประสิทธิภาพของเว็บไซต์