วิธี Refactor CSS - คู่มือ

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

การปรับโครงสร้างช่วย ป้องกันการระเบิด CSS ปรับปรุงการอ่านรหัสและการใช้ซ้ำได้, และ ทำให้ CSS sleeker และเร็วขึ้นในการดำเนินการ.

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

วิธีที่ดีที่สุดในการรักษาโค้ด CSS ให้คงอยู่คือการยึดติดกับ “refactor ในช่วงต้น refactor มักจะ” หลักการง่ายๆ. ในบทความนี้เราจะมาดูเคล็ดลับเกี่ยวกับวิธีการที่เราสามารถดำเนินการกระบวนการฟื้นฟู CSS ที่มีประสิทธิภาพ.

1. ดำเนินการตรวจสอบเบื้องต้น

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

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

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

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

2. ตั้งค่าแผนการจัดการ

รหัสการทำงาน Refactoring นั้นเป็นงานที่น่ากลัวอยู่เสมอ แต่เราสามารถบรรเทาความเจ็บปวดได้ถ้าเราสร้างแผนเกี่ยวกับสิ่งที่เราต้องทำหั่นชิ้นกระบวนการ refactoring ให้เป็นกลุ่มที่จัดการได้และกำหนดเวลาที่เป็นไปได้.

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

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

3. ติดตามความคืบหน้า

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

4. ยึดแนวทางการเขียนโค้ดสไตล์

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

สิ่งสำคัญในการตัดสินใจคือ:

• แบบแผนการตั้งชื่อ
• กฎการจัดรูปแบบ
• คำสั่งประกาศ
• หน่วยและค่าที่เราต้องการใช้
• แสดงความคิดเห็นกฎ

หากเราไม่ต้องการสร้างคู่มือสไตล์การเข้ารหัสของเราเองเราสามารถใช้คนอื่นเช่น ThinkUp ที่สามารถพบได้ใน Github.

ยังไม่เพียงพอที่จะแนะนำคู่มือการเขียนโค้ดเรายังต้อง ติดมันเมื่อเราเขียนรหัสใหม่ ในระหว่างการฟื้นฟูและ คาดหวังเหมือนกันจากคนอื่น ๆ ใครทำงานในโครงการของเรา.

5. ตั้งค่าโครงสร้างไฟล์ที่สอดคล้องกัน

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

ส่วนใหญ่ขึ้นอยู่กับโครงการว่าจะจัดการไฟล์ของเราอย่างไรให้ดีที่สุด แต่มีกฎสากลบางประการเช่นการใช้ไฟล์แยกต่างหาก Normalize.css ไฟล์สำหรับสไตล์การรีเซ็ต CSS ซึ่งแยกต่างหาก global.css สำหรับสไตล์สากลที่ใช้ในโครงการทั้งหมดและเพื่อจัดเก็บไลบรารี่ของบุคคลที่สามในโฟลเดอร์แยกต่างหาก.

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

6. กำจัดกฎที่ไม่ได้ใช้และซ้ำ

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

เครื่องมือที่รู้จักกันดีที่สุดสำหรับวัตถุประสงค์นี้อาจเป็น UnCSS ซึ่งเป็นโมดูล Node.js ที่ทำให้สามารถกำจัดกฎ CSS ที่ไม่ได้ใช้อย่างรวดเร็วและยังให้ตัวเลือกการกำหนดค่าที่ซับซ้อนซึ่งทำให้ง่ายต่อการปรับกระบวนการทำความสะอาด.

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

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

7. ลดความจำเพาะ

ความเฉพาะเจาะจงของตัวเลือก CSS คำนวณจากจำนวนและประเภทของตัวเลือกภายในที่มี CSS ความเฉพาะเจาะจงจะแสดงเป็นตัวเลข 4 หลักที่ง่ายที่สุดในการทำความเข้าใจถ้าเราตรวจสอบเครื่องคิดเลข specifity CSS แบบภาพนี้:

ความจำเพาะต่ำสุด (0001) เป็นของตัวเลือกที่กำหนดเป้าหมายเฉพาะองค์ประกอบ HTML ทั่วไปเช่น

หรือ

. ยิ่งตัวเลือกด้านในประกอบด้วยตัวเลือกผสมยิ่งมีความจำเพาะสูงเท่าใด.

ตัวเลือกบางอย่างเช่น รหัส หรือตัวเลือกที่มาจากรูปแบบอินไลน์มีลำดับความสำคัญสูงกว่าเนื่องจากจะแทนที่สไตล์ที่เป็นของตัวเลือกทั่วไปที่มากกว่า ตัวอย่างเช่นความจำเพาะของ # id1 ตัวเลือกคือ 0100.

ในการปรับโครงสร้างใหม่เป้าหมายคือการลดความจำเพาะของตัวเลือก (ทำให้สั้นลง) ให้มากที่สุดเท่าที่จะทำได้ ตัวเลือกที่มีความจำเพาะสูงกว่าจะช่วยลดความสามารถในการเลือกใช้ซ้ำได้อย่างมาก, และ นำไปสู่ฐานรหัสป่อง.

ตัวเลือกความเฉพาะเจาะจงสูง 3 ประเภทหลักคือ:

1. ตัวเลือกที่ผ่านการรับรอง, เช่น p.class1 กำหนด พี แท็กไม่จำเป็นที่นี่เนื่องจากทำให้ไม่สามารถใช้คลาสเดียวกันกับองค์ประกอบ HTML อื่น ๆ ได้)
2. ตัวเลือกที่ซ้อนกันอย่างล้ำลึก, เช่น .class1 .class2 .class3 .class4 …
3. รหัส, เช่น # id1

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

8. กำจัดวัชพืช !สำคัญ กฎระเบียบ

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

เมื่อเราต้องการเขียน CSS อย่างรวดเร็วเราอาจเริ่มพึ่งพาพวกเขาเพราะความเรียบง่าย.

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

9. ล้างตัวเลขเวทย์มนตร์และค่าฮาร์ดโค้ด

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

 .class1 ตำแหน่ง: สัมบูรณ์; ด้านบน: 28px; เหลือ: 15.5%; 

ปัญหาหลักของเลขอาถรรพ์ก็คือ ตามสถานการณ์, และพวกเขารวบรวม “การเขียนโปรแกรมโดยเรียงสับเปลี่ยน” antipattern ในระหว่างกระบวนการ refactoring เราจำเป็นต้องลบกฎเกณฑ์เหล่านี้ออกจากรหัสของเราและแทนที่ด้วยวิธีที่เหมาะสมกว่าในทุกที่ที่ทำได้.

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

 / * ไม่ดีเราจะต้องเพิ่มกฎความสูงบรรทัดคงที่พิเศษให้กับองค์ประกอบย่อยของ. class1 * / .class1 font-size: 20px; line-height: 24px;  / * ดีกฎความสูงบรรทัดที่ยืดหยุ่นสามารถใช้งานได้อย่างปลอดภัยโดยองค์ประกอบลูกเช่นกัน * / .class1 font-size: 20px; ความสูงของเส้น: 1.2; 

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

10. หน่วย Refactor และค่า

เพื่อทำให้การบำรุงรักษาและการดีบักง่ายขึ้นในอนาคตและเพื่อหลีกเลี่ยงความล้มเหลวที่อาจเกิดจากการใช้หน่วยต่าง ๆ เช่น em และ px, พร้อมกันเราต้อง ยึดกฎที่เชื่อมโยงกันเกี่ยวกับวิธีที่เราใช้ค่าที่สัมพันธ์กันและค่าสัมบูรณ์.

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

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