วิธีเพิ่มประสิทธิภาพ CSS ด้วยคำแนะนำสไตล์โค้ด

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

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

การใช้คู่มือสไตล์โค้ดที่เหมาะสมนั้นทำให้เรามี การจัดระเบียบที่ดีขึ้นฐานรหัสที่สอดคล้องกันปรับปรุงการอ่านรหัสและรหัสบำรุงรักษามากขึ้น. ไม่ใช่เรื่องบังเอิญที่ บริษัท เทคโนโลยีรายใหญ่เช่น Google, AirBnB หรือ Dropbox ใช้ประโยชน์ได้ดี.

ในโพสต์นี้เราจะมาดูว่าเราสามารถเพิ่มประสิทธิภาพ CSS ของเราอย่างชาญฉลาดด้วยความช่วยเหลือของคู่มือสไตล์รหัส CSS.

คำแนะนำเกี่ยวกับรูปแบบโค้ดเทียบกับไลบรารีรูปแบบ

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

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

ทั้งแนวทางสไตล์โค้ดและไลบรารี่รูปแบบนั้นรวมถึงกลยุทธ์การกำหนดสไตล์ แต่ต่างกัน ไลบรารีรูปแบบเช่น Bootstrap, Zurb Foundation, Global Experience Language หรือไลบรารีรูปแบบของ MailChimp ทำให้เรามี UI ที่มีคลาส CSS ที่สร้างไว้ล่วงหน้า, การพิมพ์, โทนสี, บางครั้งเป็นระบบกริด.

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

โปรดทราบว่าเครื่องกำเนิดคู่มือการใช้ชีวิตเช่น KSS, Styledown หรือ Pattern Lab, สร้างห้องสมุดรูปแบบ และ ไม่ คู่มือการเข้ารหัสสไตล์. ในขณะที่ไลบรารีรูปแบบยังมีประโยชน์อย่างมากและยกระดับกระบวนการพัฒนาเว็บ แต่ก็ไม่อนุญาตให้เราปรับโค้ดให้เหมาะสม.

สร้างคู่มือสไตล์โค้ด CSS ของคุณ

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

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

ตัวอย่างเช่น AirBnB แสดงตัวอย่างที่ดีและไม่ดีให้กับนักพัฒนาด้วยวิธีย่อยง่าย ๆ ดังต่อไปนี้:

โครงสร้างไฟล์

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

คู่มือสไตล์บางอย่างเช่น ThinkUp's ยังเตือนเราเกี่ยวกับ ไม่ใช้สไตล์แบบอินไลน์หรือแบบฝัง เว้นแต่จะหลีกเลี่ยงไม่ได้ นอกจากนี้ยังเป็นกฎที่มีประโยชน์ที่ควรค่าแก่การใช้.

การทำรัง

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

 .class_1 .class_2 # id_1 # id_2 ระยะเวลา color: #bad; 

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

กฎการตั้งชื่อ

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

สไตล์ทั่วไปสี่แบบที่ใช้ในการตั้งชื่อตัวเลือก ได้แก่ .ตัวพิมพ์เล็ก, .under_scores, .รีบ-ES, และ .lowerCamelCase. ไม่เป็นไรที่จะเลือกสิ่งใดสิ่งหนึ่ง แต่เราจำเป็นต้องทำตามตรรกะเดียวกันตลอดทั้งโครงการ.

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

ยิ่งไปกว่านั้น หากเราต้องการเปลี่ยนสีจากสีแดงเป็นอย่างอื่นในอนาคตเราสามารถทำได้โดยไม่ต้องยุ่งยาก. นอกจากนี้ยังมีแบบแผนการตั้งชื่อ CSS ที่สร้างไว้ล่วงหน้าเช่นการประชุม BEM (Block, Element, Modifier) ส่งผลให้โครงสร้างการตั้งชื่อที่สอดคล้องกัน ด้วยชื่อที่ไม่ซ้ำใครและมีความหมาย.

กฎการจัดรูปแบบ

การจัดรูปแบบโค้ดรวมถึงสิ่งต่าง ๆ เช่นการใช้ whitespace แท็บเยื้องระยะห่างตัวแบ่งบรรทัด ฯลฯ ไม่มีวิธีการจัดรูปแบบที่ดีหรือไม่ดีในการจัดรูปแบบกฎทั่วไปเพียงอย่างเดียวคือ เลือกกฎที่สอดคล้องกันซึ่งส่งผลให้สามารถอ่านรหัสได้, และติดตามพวกเขาผ่าน.

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

คำสั่งประกาศ

สิ่งที่ได้รับคำสั่งนั้นง่ายต่อการมองผ่านและ สั่งการประกาศ CSS (คุณสมบัติที่มีค่า) ตามกฎที่ทำให้รู้สึกถึงผลลัพธ์ในการจัดระเบียบรหัสที่ดีขึ้น.

ลองดูตัวอย่างกฎการสั่งซื้อคุณสมบัติของ WordPress โดยจะกำหนดพื้นฐานที่เรียบง่าย แต่มีเหตุผลสำหรับการสั่งซื้อคุณสมบัติที่จัดกลุ่มตามความหมาย:

1. แสดง
2. การวางตำแหน่ง
3. โมเดลกล่อง
4. สีและตัวอักษร
5. อื่น ๆ

หน่วยและค่านิยม

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

แค่คิดเว็บไซต์ที่ใช้สลับกัน px, em, และ REM การวัดความยาว ไม่เพียง แต่จะดูไม่ดีในเครื่องมือแก้ไขโค้ด แต่ส่วนใหญ่แล้วองค์ประกอบบางอย่างจะมีขนาดเล็กหรือใหญ่ในเว็บไซต์นั้นอย่างน่าประหลาดใจ.

เราจำเป็นต้องตัดสินใจเกี่ยวกับค่าสี (เลขฐานสิบหก rgb หรือ hsl) และว่าเราต้องการใช้คุณสมบัติชวเลขและเป็นไปตามกฎใด มีคำแนะนำที่รวมอยู่ในคู่มือสไตล์โค้ด CSS ทุกอันที่ฉันชนนั่นคือ. อย่าระบุหน่วยเป็น 0 ค่า (จริงๆแค่ไม่ได้).

.ชั้น // อัตรากำไรขั้นต้นที่ดี: 0; // อัตรากำไรขั้นต้นไม่ดี: 0px; // อัตรากำไรขั้นต้นไม่ดี: 0em; // อัตรากำไรขั้นต้นไม่ดี: 0rem; 

แสดงความคิดเห็น

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

ตัวอย่างเช่น Idiomatic CSS สร้างระบบการแสดงความคิดเห็นที่มีความหมายซึ่งใช้ศิลปะ ASCII พื้นฐานบางอย่างและผลลัพธ์ในโค้ดที่จัดระเบียบอย่างสวยงาม: