แนวทางปฏิบัติที่ดีที่สุดของ CSS: 16 วิธีในการพัฒนาทักษะ CSS ของคุณอย่างรวดเร็ว

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

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

หากสิ่งใดสิ่งหนึ่ง (หรือทั้งสองอย่าง) เป็นสิ่งที่คุณปรารถนา เรามาพูดถึงแนวทางปฏิบัติที่ดีที่สุดของ CSS ที่ช่วยให้คุณทำเช่นนั้นได้

1. ทำให้รหัสของคุณอ่านได้

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

เราได้เขียนบทความทั้งหมดเกี่ยวกับการจัดรูปแบบโค้ดและความคิดเห็น ดังนั้นเราจะไม่ทำซ้ำทั้งหมดที่นี่ อย่างไรก็ตาม นี่คือภาพรวมโดยย่อ (ตรวจสอบบทความสำหรับสิ่งทั้งหมด):

• เยื้องโค้ดของคุณ — ไม่ว่าคุณจะใช้แท็บหรือช่องว่างหลายช่อง (ตัดสินใจว่าจะใช้กี่ช่อง!) อย่าลืมเยื้องคู่ค่า CSS ของคุณ เมื่อใช้คิวรีมีเดีย ให้ซ้อนไว้ภายในอันอื่นเพื่อแสดงการพึ่งพา
• ใช้ตัวแบ่งบรรทัด — แยกคุณสมบัติ CSS ที่แตกต่างกันด้วยตัวแบ่งบรรทัด และใส่คู่ค่าในบรรทัดของตัวเอง
• จัดเรียงกฎตามลำดับตัวอักษร — ช่วยให้ค้นหาสิ่งที่คุณต้องการได้ง่ายขึ้น
• ใช้ความคิดเห็น — รวมความคิดเห็นเพื่อแยกส่วนต่างๆ ของสไตล์ชีตออกจากกัน นอกจากนี้ ให้พิจารณารวมสารบัญที่จุดเริ่มต้นของไฟล์ คุณยังสามารถแสดงความคิดเห็นด้วยข้อมูลสำคัญที่คุณอาจลืมในภายหลัง หรือที่สำคัญต่อการทำความเข้าใจการมีอยู่ของมาร์กอัปบางตัว (เช่น ทางเลือกสำรองสำหรับเบราว์เซอร์รุ่นเก่า)

นี่คือตัวอย่างของโค้ด CSS ที่มีรูปแบบเหมาะสม:

 .search-submit { border-radius: 0 2px 2px 0; bottom: 0; overflow: hidden; padding: 0; position: absolute; right: 0; top: 0; width: 42px; } @media screen and (min-width: 56.875em) { .site-header { padding-right: 4.5455%; padding-left: 4.5455%; } }

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

เมื่อคุณรักษาความสม่ำเสมอ แม้ว่าคุณจะทำให้ทุกอย่างยุ่งเหยิง มันก็ง่ายกว่ามากที่จะแก้ไขข้อผิดพลาดเดียวกันทั้งหมดในคราวเดียว (ขอบคุณ ค้นหาและแทนที่!)

2. จัดรูปแบบสไตล์ชีตของคุณให้ดี

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

• ใช้วิธีการจากบนลงล่าง — รูปแบบการสั่งซื้อในไฟล์ของคุณเมื่อแสดงผลในเบราว์เซอร์ ซึ่งหมายความว่า เปลี่ยนจากกฎทั่วไปไปเป็นมาร์กอัปที่เฉพาะเจาะจงมากขึ้น ตัวอย่างเช่น เริ่มต้นด้วย body , a , p , headings แล้วตามด้วยองค์ประกอบที่เฉพาะเจาะจงมากขึ้น
• แบ่งไฟล์ออกเป็นส่วนๆ — จัดกลุ่มสไตล์ตามหัวข้อ: การพิมพ์ ลิงก์ การนำทาง ฯลฯ แม้แต่หน้าเดียวก็สามารถมีส่วนของตัวเองได้หากมาพร้อมกับสไตล์ของตัวเอง ดูคำแนะนำก่อนหน้านี้เกี่ยวกับข้อคิดเห็นและการสร้างสารบัญ นอกจากนี้คุณยังสามารถแสดงความคิดเห็นเพื่อทำเครื่องหมายส่วนใดส่วนหนึ่ง
• ใช้สไตล์ชีตแยกต่างหากสำหรับโครงการขนาดใหญ่ — หากมาร์กอัปของคุณจะมีโค้ดหลายพันบรรทัด การแยกย่อยออกเป็นหลายไฟล์สำหรับส่วนต่างๆ ของไซต์อาจเหมาะสม โดยเฉพาะอย่างยิ่งหากส่วนเหล่านั้นมีรูปแบบที่แตกต่างกันมาก (เช่น ร้านค้าออนไลน์กับหน้าเกี่ยวกับ) ในกรณีนั้น แผ่นงานขนาดใหญ่หนึ่งแผ่นสำหรับสไตล์ส่วนกลางและไฟล์ขนาดเล็กแยกต่างหากสำหรับส่วนต่างๆ ของไซต์เฉพาะจะเหมาะสมกว่า

3. กำจัดตัวเองจากความซ้ำซ้อน

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

• ใช้ DRY (“อย่าทำซ้ำตัวเอง”) — ตรวจสอบการทำซ้ำในมาร์กอัปของคุณ ทำให้โค้ดของคุณช้าลงและอ่านยากขึ้น กำหนดสิ่งต่างๆ เพียงครั้งเดียว จากนั้นเขียนทับด้านล่างเพิ่มเติมตามความจำเป็น
• ใช้ประโยชน์จาก CSS ชวเลข — CSS ให้ความเป็นไปได้มากมายในการกำหนดคุณสมบัติหลายอย่างพร้อมกัน ตัวอย่างเช่น margin-top margin-bottom margin-right และ margin-left สามารถกำหนดได้ด้วยการประกาศ margin เดียว ใช้พื้นที่น้อยลง ใช้โค้ดน้อยลง และทำงานได้ดีเช่นกัน ส่งผลให้ประสิทธิภาพดีขึ้น
• รวมตัวเลือกหากเป็นไปได้ — หากองค์ประกอบหลายอย่าง เช่น คำจำกัดความการพิมพ์สำหรับหัวเรื่องและย่อหน้า จะใช้สไตล์เดียวกันทั้งหมด ตรวจสอบให้แน่ใจว่าได้รวมทั้งหมดไว้ในชุดกฎการเรียกชุดเดียว ไม่จำเป็นต้องทำซ้ำมาร์กอัปเดียวกันแยกกัน
• หลีกเลี่ยงตัวเลือกที่ซ้ำซ้อน — ระบุให้เฉพาะเจาะจงเท่าที่จำเป็นกับตัวเลือกของคุณเพื่อให้ได้ผลลัพธ์ แต่ไม่เกินกว่านั้น การปฏิบัติตามสิ่งนี้ยังทำให้ง่ายต่อการเขียนทับมาร์กอัปด้วย CSS ที่เฉพาะเจาะจงมากขึ้นหากจำเป็น ในทางกลับกัน หลีกเลี่ยงตัวเลือกที่กว้างมากเนื่องจากใช้พลังการประมวลผลมากกว่า

4. ข้อสำคัญ: หลีกเลี่ยง !important

ขั้นตอนต่อไปในแนวทางปฏิบัติที่ดีที่สุดของ CSS คือการพยายามหลีกเลี่ยงการใช้แท็ก !important ให้มากที่สุด

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

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

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

กล่าวโดยย่อ สำรอง !important เพื่อวัตถุประสงค์ในการทดสอบ แต่หลีกเลี่ยงในสภาพแวดล้อมการผลิต

5. พิจารณาการใช้กรอบงาน

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

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

ดังนั้น หากคุณพบว่าตัวเองกำลังเขียนทับสไตล์เฟรมเวิร์กของคุณหรือแฮ็กมัน คุณอาจไม่ควรใช้มัน

6. ใช้การรีเซ็ต/ทำให้ CSS ของคุณเป็นปกติ

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

 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

ข้อมูลข้างต้นมาจาก MeyerWeb ซึ่งเป็นหนึ่งในโซลูชั่นยอดนิยม คุณยังสามารถดูที่ Normalize.css

7. สร้างการเข้าถึงในการออกแบบของคุณ

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

• ให้คอนทราสต์เพียงพอ — ตรวจสอบให้แน่ใจว่าคุณมีความแตกต่างเพียงพอระหว่างสีพื้นหน้า (เช่น ข้อความ) และสีพื้นหลัง เพื่อให้ผู้ที่มีความบกพร่องทางสายตาสามารถอ่านได้ คุณสามารถใช้ตัวตรวจสอบความคมชัด สำหรับการที่. ในทำนองเดียวกัน ทำให้ลิงก์ของคุณมีสีสันเพื่อให้เป็นที่จดจำ นอกจากนี้ ใช้ขนาดตัวอักษรที่ใหญ่เพียงพอ (อย่างน้อย 18-20px)
• รักษาคุณสมบัติ outline ไว้ — โครงร่างเป็นสิ่งสำคัญสำหรับผู้ที่สำรวจไซต์ของคุณด้วยแป้นพิมพ์หรือโปรแกรมอ่านหน้าจอ ช่วยติดตามว่าองค์ประกอบใดทำงานอยู่ หากคุณไม่ชอบลักษณะโครงร่างของคุณ คุณสามารถจัดรูปแบบได้ ข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนั้นที่นี่
• มองเห็นองค์ประกอบที่โฮเวอร์อยู่ — ในแนวทางเดียวกัน ตรวจสอบให้แน่ใจว่าคำแนะนำเครื่องมือหรือองค์ประกอบอื่นๆ ที่ปรากฏขึ้นเมื่อวางเมาส์เหนือองค์ประกอบนั้นปรากฏขึ้นเช่นกันเมื่อเลือกผ่านแท็บ ดูบทบาทของ ARIA สำหรับสิ่งนั้น

สำหรับหลาย ๆ อย่างข้างต้น การรู้เกี่ยวกับองค์ประกอบเทียมนั้นมีประโยชน์มาก เพิ่มเติมเกี่ยวกับ CSS และการเข้าถึงที่นี่

8. หลีกเลี่ยงการแก้ไขสไตล์ชีตของธีมใน WordPress โดยตรง

WordPress มาพร้อมกับ CSS มากมาย ส่วนใหญ่อยู่ในสไตล์ชีตของธีม (เว้นแต่คุณจะใช้ธีมแบบบล็อก) หากแผนของคุณคือการเปลี่ยนแปลงสไตล์ของธีม ความคิดที่แย่ที่สุดคือการแก้ไข style.css โดยตรง

ทำไม

เนื่องจากครั้งต่อไปที่คุณคลิกปุ่ม อัปเดต ทันทีสำหรับธีมของคุณ (หรือในครั้งต่อไปที่การอัปเดตอัตโนมัติเริ่มทำงาน) การแก้ไขทั้งหมดของคุณจะถูกลบ

แล้วจะทำอย่างไรแทน?

หากคุณวางแผนที่จะเปลี่ยนแปลงเพียงเล็กน้อย คุณสามารถใช้ส่วน CSS เพิ่มเติม ใน WordPress Customizer

เป็นหลักฐานการอัปเดตและแทรก CSS ของคุณลงในส่วน <head> ของไซต์โดยตรง

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

9. เคล็ดลับง่ายๆ สำหรับ CSS Best Practices

เอาล่ะ สำหรับส่วนสุดท้าย เราจะให้แนวทางปฏิบัติที่ดีที่สุดเกี่ยวกับ CSS ที่รวดเร็วซึ่งคุณควรคำนึงถึง:

• เรียนรู้เกี่ยวกับคลาสเทียบกับ ID — คลาสและ IF ถูกใช้ในลักษณะที่แตกต่างกันมาก คลาสมีไว้สำหรับองค์ประกอบที่ซ้ำกัน ID สำหรับองค์ประกอบที่ไม่ซ้ำ สำหรับข้อมูลเพิ่มเติม เรามีบทความทั้งหมดเกี่ยวกับเรื่องนี้
• เปลี่ยนไปใช้ flex และ grid แทน float — Float เคยเป็นวิธีหลักในการจัดเรียงองค์ประกอบของเว็บไปทางซ้ายและขวาและสร้างเลย์เอาต์ ตอนนี้มีระบบที่มั่นคงสำหรับสิ่งนั้นด้วยเฟล็กซ์บ็อกซ์และกริด ดังนั้นจงใช้เวลาและใช้งานมัน
• ใช้ประโยชน์จากตัวประมวลผลล่วงหน้า — ตัวประมวลผลล่วงหน้าช่วยจัดระเบียบมาร์กอัปของคุณ หลีกเลี่ยงการทำซ้ำ เพิ่มการทำให้เป็นโมดูล ให้ระบบอัตโนมัติ และอื่นๆ อีกมากมาย ในช่วงเวลาของตัวแปรที่กำหนดเอง ตัวแปรเหล่านี้ไม่จำเป็นอีกต่อไป แต่ก็ยังมีประโยชน์ ที่นิยมมากที่สุดคือ SASS, LESS และ Stylus คุณอาจพิจารณาตัวประมวลผลภายหลัง เช่น PostCSS และตัวแก้ไขคำนำหน้าอัตโนมัติ
• ใช้หน่วยสัมพัทธ์ — ในยุคของการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์และเว็บไซต์ที่แสดงบนขนาดหน้าจอที่หลากหลาย โดยปกติแล้วคุณควรใช้หน่วยเช่น em , rem , % และขนาดสัมพัทธ์อื่นๆ ขนาดคงที่เช่น px ใช้สำหรับบางสถานการณ์เท่านั้น
• ลดขนาด CSS ของคุณ — การย่อขนาดจะลบทุกสิ่งออกจากโค้ดที่จำเป็นสำหรับการอ่านของมนุษย์ (เช่น ทุกสิ่งที่เราบอกให้คุณใส่ไว้ก่อนหน้านี้) อย่างไรก็ตาม เบราว์เซอร์ไม่ต้องการการจัดรูปแบบพิเศษและการย่อขนาดให้เล็กลงสำหรับไฟล์ที่เล็กลงและการโหลดที่เร็วขึ้น ไปเลย! Autoptimize เป็นปลั๊กอินที่ยอดเยี่ยมที่สามารถทำได้โดยอัตโนมัติ
• ลบมาร์กอัป ที่ไม่ได้ใช้ — ด้วยเหตุผลที่คล้ายคลึงกันข้างต้น ให้ตรวจสอบโค้ดของคุณเพื่อหามาร์กอัปที่ไม่ได้ใช้งานจริงในเพจของคุณ แล้วลบออก นี่จะลดขนาดไฟล์ของคุณอีก เรามีบทความทั้งหมดในหัวข้อนั้นด้วย
• ใช้ตัวตรวจสอบ CSS — ตรวจสอบ CSS ของคุณเพื่อตรวจสอบมาร์กอัปสำหรับการใช้งานที่ถูกต้อง มีเครื่องมือออนไลน์เพียงพอสำหรับสิ่งนั้น

แนวทางปฏิบัติที่ดีที่สุดของ CSS เป็นพื้นฐานที่ดีสำหรับการเรียนรู้เพิ่มเติม

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

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

แนวทางปฏิบัติที่ดีที่สุดของ CSS อื่นใดที่คุณคิดว่าจำเป็นอย่างยิ่งที่จะต้องรู้ แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง!