Clean Code: ทำไม HTML/CSS Essentials ถึงมีความสำคัญ

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

แม้แต่นักพัฒนาที่ดีที่สุดจากบริษัทชั้นนำก็ไม่ ได้ ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดและเขียนโค้ดที่สามารถทำความสะอาดและเพิ่มประสิทธิภาพได้เสมอไป

ผลที่ตามมาของรหัสยุ่งและสกปรก

หากต้องการอ้างอิงโพสต์บล็อกที่เก่าแต่ยังคงมีความเกี่ยวข้องซึ่งกล่าวถึงหลักการของโค้ดที่สะอาด:

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

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

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

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

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

โค้ดจัดแต่งทรงผม Essentials

เริ่มต้นด้วยพื้นฐานของโค้ด HTML และ CSS ที่ดี: ความถูกต้องของ W3C หลักการตั้งชื่อ โครงสร้างไฟล์ และอื่นๆ

คำนึงถึงโครงสร้างตั้งแต่วันแรก

หากคุณกำลังจะพัฒนาแอปขนาดใหญ่ คุณต้องดูแลโครงสร้างไฟล์ สามารถหรือควรมีลักษณะดังนี้:

ใช้เครื่องตรวจสอบความถูกต้องเพื่อตรวจสอบรหัสของคุณ

พยายามใช้ตัวตรวจสอบ HTML และ CSS เสมอ

รหัสไม่ถูกต้อง:

 <figure> <div> <img src="demo.jpg" alt=""> <figcaption> <h2>Hello world</h2> </figcaption> </div> </figure> <picture> <source src="demo.webp" type="image/webp"> <img src="demo.jpg" alt=""> </picture> <details> <header> <summary>Expand details</summary> </header> <p>All content goes here</p> </details>

 p { font: 400 inherit/1.125 serif; }

รหัสที่ดี:

 <figure> <img src="demo.jpg" alt=""> <!-- figcaption should be child of element figure element, not div --> <figcaption> <h2>Hello world</h2> </figcaption> </figure> <picture> <!-- source should have srcset attribute --> <source type="image/webp"> <img src="demo.jpg" alt=""> </picture> <details> <!-- summary is not allowed as child of header --> <summary>Expand details</summary> <p>All content goes here</p> </details>

 p { font-weight: 400; font-size: inherit; line-height: 1.125; font-family: serif; }

ใช้ข้อความแสดงแทนบนแท็ก <img> เพื่อความถูกต้องของหลักการโค้ดที่ชัดเจน

คุณลักษณะนี้มีบทบาทสำคัญใน SEO, เครื่องมือค้นหา, โปรแกรมรวบรวมข้อมูลเว็บ, โปรแกรมอ่านหน้าจอ ฯลฯ

รหัสไม่ถูกต้อง:

 <img src="demo.jpg">

รหัสที่ดี:

 <img src="demo.jpg" alt="This is placeholder of the image">

ใช้เคบับเคส (spinal-case)

สำหรับชื่อ ลองใช้ kebab-case ( spinal-case ) และไม่ใช้ camelCase หรือ under_score ใช้ under_score เฉพาะเมื่อใช้ BEM เท่านั้น แม้ว่าคุณจะใช้ Bootstrap ก็ตาม ควรใช้ให้สม่ำเสมอและใช้เป็น - คั่นจะดีกว่า

รหัสไม่ถูกต้อง:

 <section class="section_featured_Listing"> <h1 class="largeTitle">H1 title</h1> </section>

รหัสที่ดี:

 <section class="section-featured-listing"> <h1 class="large-title">H1 title</h1> </section>

kebab-case อ่านง่าย camelCase และ under_score

ใช้ชื่อที่มีความหมายที่ทุกคนสามารถเข้าใจได้ ตั้งชื่อให้สั้น

ชื่อของคลาสควรมีลักษณะเหมือน .noun-adjective

พยายามใช้ชื่อสามัญของคลาสแทนการเขียนชื่อเฉพาะของเนื้อหา ทำให้โค้ดอ่านง่ายขึ้น

รหัสไม่ถูกต้อง:

 <div class="team-wrapper"> <button class="large-button-green"></button> <p class="greenText-john-smith-description"></p> <div class="white-bg"></div> </div>

รหัสที่ดี:

 <div class="section-team"> <button class="btn-lg btn-success"></button> <p class="text-success"></p> <div class="bg-white"></div> </div>

อย่าเขียนแอตทริบิวต์ประเภทสำหรับสไตล์ชีตและสคริปต์ใน HTML5

ไม่ จำเป็นต้องใช้กับ HTML5 แต่ต้องใช้โดยมาตรฐาน W3C ใน HTML4/XHTML

รหัสไม่ถูกต้อง:

 <link type="text/css" rel="stylesheet" href="../styles.css"> <script type="text/javascript" src="..//main.js"></script>

รหัสที่ดี:

 <link rel="stylesheet" href="styles.css"> <script src="app.js"></script>

ใช้ชั้นเรียนเฉพาะเมื่อจำเป็น

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

รหัสไม่ถูกต้อง:

 section aside h1 span { margin-left: 25%; }

รหัสที่ดี:

 .left-offset { margin-left: 25%; }

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

เพิ่มคลาสให้กับองค์ประกอบหลักหากคุณต้องการกำหนดสไตล์อื่นให้กับบล็อกเดียวกัน

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

รหัสไม่ถูกต้อง:

 <article> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> <article class=”another-article”> <h1 class=”other-styling-title”>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article>

 article { padding: 10px 15px; h1 { font-size: 32px; color: #ff0000; } } .another-article { padding-bottom: 30px; border-bottom: 4px solid #ccc; } h1.other-styling-title { font-size: 20px; }

รหัสที่ดี:

 <article> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> <article class=”other-styling”> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article>

 article { padding: 10px 15px; h1 { font-size: 32px; color: #ff0000; } &.other-styling { padding-bottom: 30px; border-bottom: 4px solid #ccc; /* you will have less classes */ h1 { font-size: 20px; } } }

วางหน่วยจากค่าศูนย์

การเพิ่มหน่วยไม่จำเป็นและไม่ให้ค่าเพิ่มเติม ไม่มีความแตกต่างระหว่าง 0px, 0em, 0% หรือค่าศูนย์อื่นๆ หน่วยไม่สำคัญเพราะค่ายังคงเป็นศูนย์

รหัสไม่ถูกต้อง:

 div { margin: 20px 0px; letter-spacing: 0%; padding: 0px 5px; }

รหัสที่ดี:

 div { margin: 20px 0; letter-spacing: 0; padding: 0 5px; }

อย่าเขียน border-bottom ใน CSS ถ้าคุณสามารถเพิ่มแท็ก hr ได้

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

รหัสไม่ถูกต้อง:

 <p class="border-bottom">I want this section to have a border.</p> <p>Lorem ipsum</p>

 .border-bottom { border-bottom: 1px solid #000; }

รหัสที่ดี:

 <p>I want this section to have a border.</p> <hr> <p>Lorem ipsum</p> // If necessary change hr variable in bootstrap

ใช้ตัวเลือก A > B

มีประโยชน์มากที่จะใช้ตัวเลือก A > B ซึ่งใช้กฎกับเด็กโดยตรงเท่านั้น ในกรณีนี้ คุณจะไม่ต้องรีเซ็ตสไตล์ของเด็กคนอื่นๆ ทั้งหมดที่ไม่ต้องการสไตล์นั้น ตัวอย่างเช่น มีประโยชน์มากเมื่อเข้ารหัสเมนูที่ซ้อนกัน คุณไม่จำเป็นต้องกำหนดรูปแบบเมนูย่อยใหม่

รหัสไม่ถูกต้อง:

 <ul> <li>List 1</li> <li>List 2</li> <li>List 3 <ul> <li>Submenu 1</li> <li>Submenu 2</li> </ul> </li> </ul>

 ul li { list-style-type: none; } li ul li { /* redefine to default value */ list-style-type: disc; }

รหัสที่ดี:

 <ul> <li>List 1</li> <li>List 2</li> <li>List 3 <ul> <li>Submenu 1</li> <li>Submenu 2</li> </ul> </li> </ul>

 ul > li { list-style-type: none; }

วิธีเขียน HTML ที่สะอาด

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

พยายามมี front-end ที่อิงตามมาร์กอัปให้ได้มากที่สุด

ทำให้โค้ดส่วนหน้าใช้มาร์กอัปแทนการเขียน CSS มากเกินไป

ซึ่งจะช่วยให้เสิร์ชเอ็นจิ้นและทำให้โค้ดของคุณอ่านง่ายขึ้น ซึ่งอาจช่วยเพิ่มอันดับการค้นหาและประสบการณ์ของผู้ใช้

รหัสไม่ถูกต้อง:

 <div class="main-content"> <p class="content-title">Main text title</p> <img src="http://via.placeholder.com/150x150" alt="example"> <p class="image-description">Here is image description</p> </div>

รหัสที่ดี:

 <main> <h1>Main text title</h1> <figure> <img src="http://via.placeholder.com/150x150" alt="example"> <figcaption> Here is image description </figcaption> </figure> </main>

หลีกเลี่ยงการใช้ Wrapper ที่ไม่จำเป็นใน HTML

พยายามอย่าใช้องค์ประกอบ wrapper ที่ไม่จำเป็นใน HTML การมีองค์ประกอบ <div> และ <span> มากมายเป็นเรื่องที่ผ่านมา การรักษาสิ่งต่าง ๆ ให้ละเอียดและเป็นเส้นตรงช่วยให้คุณได้โค้ดขั้นต่ำ (ดูจุดถัดไป)

รหัสไม่ถูกต้อง:

 <section class=”container”> <div class=”row”> <div class=”col-xs-12”> <div class=”inner-wrapper”> <span>Unnecessary br tags</span> </div> </div> </div> </section>

รหัสที่ดี:

 <section class=”container”> <p>Unnecessary br tags</p> </section>

ใช้คลาสปรมาณูสำหรับจัดแต่งทรงผม

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

รหัสไม่ถูกต้อง:

 <h1>Without using atomic class</h1> <p>Paragraph without atomic class</p> <section> <h1> Another h1 text</h1> <p>Paragraph inside div without class</p> </section>

 h1 { color: red; } section > h1 { color: blue; }

รหัสที่ดี:

 <h1 class="text-red">Without using atomic class</h1> <p>Paragraph without atomic class</p> <section> <h1 class="text-blue"> Another h1 text</h1> <p>Paragraph inside div without class</p> </section>

 .text-red { color: red; } .text-blue { color: blue; }

พยายามเก็บคลาสแบบละเอียดและแบบอะตอม และใช้เมื่อจำเป็น ส่วนหน้าของคุณจะกลายเป็นมาร์กอัปมากขึ้นตามผลลัพธ์

ใช้ประโยชน์จากองค์ประกอบเชิงความหมาย

การใช้ความหมายมีโครงสร้างที่ดีขึ้นและทำให้โค้ดและเนื้อหาอ่านง่ายขึ้น

รหัสไม่ถูกต้อง:

 <span class="heading"><strong>Welcome</strong></span> <span>This is unnecessary br tag.</span>

รหัสที่ดี:

 <h1>Welcome</h1> <p>This is unnecessary br tag.</p>

ใช้แท็ก HTML5

แท็กใหม่ช่วยให้คุณมีอิสระในการแสดงออกมากขึ้นและทำให้องค์ประกอบทั่วไปเป็นมาตรฐาน ซึ่งช่วยปรับปรุงการประมวลผลเอกสารแบบอัตโนมัติ นี่คือรายการที่สมบูรณ์ขององค์ประกอบทั้งหมด ฉันพบว่านักพัฒนาจำนวนมากมักใช้ <div> และ <span> เป็นจำนวนมาก แต่ก่อนอื่น โปรดตรวจสอบที่นี่ว่าแท็กใดเหมาะสมกับบริบทของคุณ:

รหัสไม่ถูกต้อง:

 <div class="article-blue"> <div class="article-title-red">HTML 4 title</div> <div class="content"> Semantics <span class="boldtext">are</span> important. </div> </div>

รหัสที่ดี:

 <article> <h1>HTML5 title</h1> <p> Semantics <strong>are</strong> important. </p> </article>

บรรทัดล่าง: เรียนรู้และใช้องค์ประกอบใหม่ใน HTML5 มันคุ้มค่ากับความพยายาม!

CSS: โค้ดสะอาดและตัวประมวลผลล่วงหน้า

เมื่อพูดถึง CSS เป็นเรื่องยากที่จะไม่เริ่มต้นด้วยคำแนะนำที่ไม่เป็นต้นฉบับ แต่หน้าด้าน:

ใช้ตัวประมวลผลล่วงหน้า CSS

Sass เป็นภาษาส่วนขยาย CSS ระดับมืออาชีพที่เติบโตเต็มที่ เสถียร และทรงพลังที่สุดในโลก

Sass มี 2 syntax ให้เลือก สิ่งแรกเรียกว่า SCSS (Sassy CSS) และใช้ตลอดการอ้างอิงนี้เป็นส่วนขยายของไวยากรณ์ของ CSS ไวยากรณ์ที่สองหรือเก่ากว่า เรียกว่าไวยากรณ์เยื้อง (หรือบางครั้งอาจแค่ "Sass") ให้วิธีการเขียน CSS ที่กระชับยิ่งขึ้น

จัดกลุ่มตัวเลือกของคุณ: ใช้ @extend ใน SASS

โดยการจัดกลุ่มตัวเลือกของคุณหรือใช้ @extend ใน SASS คุณควรช่วยให้โค้ดของคุณแห้ง (อย่าทำซ้ำตัวเอง)

รหัสไม่ถูกต้อง:

 p { font-size: 22px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1 { font-size: 41px; color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

รหัสที่ดี:

 .font-smoothing { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p { font-size: 22px; @extend .font-smoothing; } h1 { font-size: 22px; @extend .font-smoothing; }

ใช้หน่วย rem แทนพิกเซลใน CSS

ใช้ REM สำหรับขนาดและระยะห่าง เช่น ขนาดแบบอักษรที่สร้างขึ้นตาม font-size ขององค์ประกอบราก <html> นอกจากนี้ยังช่วยให้คุณปรับขนาดทั้งโปรเจ็กต์ได้อย่างรวดเร็วด้วยการเปลี่ยนขนาดฟอนต์รูท (เช่น ที่คิวรี่สื่อ/ขนาดหน้าจอที่แน่นอน)

คุณจะเขียนโค้ดน้อยลงสำหรับมุมมองที่ตอบสนอง:

รหัสไม่ถูกต้อง:

 p { font-size: 22px; padding: 10px; } @media (max-width: 767px) { p { font-size: 16px; padding: 5px; } }

รหัสที่ดี:

 html { font-size: 14px; } @media (max-width: 767px) { html { font-size: 12px; } } p { font-size: 1.6rem; padding: 1rem; }

พยายามหลีกเลี่ยงการมีความสูงหรือความกว้างคงที่ใน CSS

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

รหัสไม่ถูกต้อง:

 <footer class="text-center"> <h2>Let's Get In Touch!</h2> <hr> <p>Ready to start your next project with us?</p> </footer>

 #footer { height: 130px; }

รหัสที่ดี:

 <footer class="text-center"> <h2>Let's Get In Touch!</h2> <hr> <p>Ready to start your next project with us?</p> </footer>

 #footer { padding-top: 23px; padding-bottom: 47px; }

ตรวจสอบให้แน่ใจว่าใช้รายการหลักเพียงครั้งเดียวใน SCSS

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

รหัสไม่ถูกต้อง:

 .section-parent-class { position: relative; h2 { color: #ff0; } header { margin: 2rem 1rem; } } @media (max-width: 767px) { .section-parent-class { footer { padding: .5rem; } } }

รหัสที่ดี:

 .section-parent-class { position: relative; h2 { color: #ff0; } header { margin: 2rem 1rem; } footer { @media (max-width: 767px) { padding: .5rem; } } }

ลองนึกถึงองค์ประกอบที่จะได้รับผลกระทบก่อนที่จะเขียนกฎ CSS

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

รหัสไม่ถูกต้อง:

 /* Commonly used class */ .title { color: #008000; }

รหัสที่ดี:

 /* Specify it not to affect other titles */ .section-blog .title { color: #008000; }

พยายามค้นหากฎและตัวแปร CSS ที่มีอยู่ก่อนที่จะเขียนกฎใหม่

มองหากฎที่มีอยู่ซึ่งเหมาะกับสไตล์ที่ต้องการเสมอ ทั้งใน CSS ที่กำหนดเองและในเฟรมเวิร์ก เฉพาะในกรณีที่ไม่มีอะไรเพียงพอให้ดำเนินการเขียนใหม่

นี่เป็นสิ่งสำคัญอย่างยิ่งเมื่อทำงานกับแอพขนาดใหญ่

รหัสไม่ถูกต้อง:

 .jumbotron { margin-bottom: 20px; }

รหัสที่ดี:

 // change $jumbotron-padding from _variables.scss .jumbotron { margin-bottom: $jumbotron-padding; }

ใช้กฎเกณฑ์เฉพาะ

หากพื้นหลังมีหนึ่งคุณสมบัติ เราจะระบุคุณสมบัตินั้น แต่ถ้ามีคุณสมบัติพื้นหลังต่างกัน เราสามารถให้การประกาศเพียงครั้งเดียว

รหัสไม่ถูกต้อง:

 .selector { background: #fff; }

รหัสที่ดี:

 .selector { /* This way background image will not be overwritten if there is any */ background-color: #fff; }

ใช้คุณสมบัติจดชวเลขและค่า

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

รหัสไม่ถูกต้อง:

 img { margin-top: 5px; margin-right: 10px; margin-bottom: 25px; margin-left: 10px; } button { padding: 0 0 0 20px; }

รหัสที่ดี:

 img { /* Shorthand style */ margin: 5px 10px 25px; } button { /* Don't play with shorthand too much */ padding-left: 20px; }

ใช้ em แทน px สำหรับความสูงของบรรทัด

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

รหัสไม่ถูกต้อง:

 p { font-size: 12px; line-height: 24px; }

รหัสที่ดี:

 p { font-size: 12px; line-height: 2em; /* or just line-height: 2; */ }

ใช้คลาส Bootstrap ให้มากที่สุด

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

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

รหัสไม่ถูกต้อง:

 <section class="without-bootstrap"> <div class="first-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> <div class="second-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> </section>

 .first-column, .second-column { width: 25%; float: left; padding-left: 15px; padding-right: 15px; } ...

รหัสที่ดี:

 <section class="row"> <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> </section>

ปรับแต่งกรอบงานของคุณอย่างเหมาะสม

Bootstrap อาศัยไฟล์ variables.scss ซึ่งช่วยให้คุณกำหนดค่าและปรับแต่งส่วนหน้าของคุณได้อย่างง่ายดายโดยไม่ต้องเขียนโค้ดแม้แต่บรรทัดเดียว มิฉะนั้น หากคุณกำลังจะเขียนการปรับแต่งทั้งหมดด้วยตัวเอง จะดีกว่าที่จะไม่ใช้เฟรมเวิร์กเลย

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

รหัสไม่ถูกต้อง:

 navbar { padding: 20px 10px; } .carousel-indicators { li { width: 6px; height: 6px; margin-right: 3px; margin-left: 3px; } }

รหัสที่ดี:

 $navbar-padding-y: ($spacer / 2) !default; $navbar-padding-x: $spacer !default; $carousel-indicator-width: 30px !default; $carousel-indicator-height: 3px !default; $carousel-indicator-spacer: 3px !default;

อย่าเขียนทับ . .container width

พยายามอย่าเขียนทับความกว้างของ . .container ลองใช้ระบบกริดแทน หรือเพียงแค่เปลี่ยนความกว้างของคอนเทนเนอร์ใน _variables.scss หากคุณต้องการลดความกว้าง ให้ใช้ max-width แทน width ในกรณีนั้น . .container จาก Bootstrap จะไม่ถูกแตะต้องในมุมมองที่ตอบสนอง

รหัสไม่ถูกต้อง:

 .container { @media (min-width: $screen-lg-min) { width: 1300px; } }

รหัสที่ดี:

 // change $container-lg from _variables.scss .container { @media (min-width: $screen-lg-min) { width: $container-lg; } }

ใช้คลาส Bootstrap 4 และเขียน CSS น้อยลง

เริ่มใช้ Bootstrap 4 แม้ว่าจะอยู่ในช่วงเบต้าก็ตาม ประกอบด้วยคลาสใหม่ๆ มากมายที่จะช่วยให้คุณสร้างเลย์เอาต์ได้เร็วขึ้น โดยเฉพาะ Flexbox และสเปเซอร์

รหัสไม่ถูกต้อง:

 <div class="flex-ex"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div> <div class="flex-ex flex-reverse"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div>

 .flex-ex { display: flex; > div { padding: 2px; } &.flex-reverse { flex-direction: row-reverse; } li { list-style: none; padding: .5rem; } }

รหัสที่ดี:

 <ul class="list-unstyled list-inline d-flex flex-row"> <li class="p-2">Flex item 1</li> <li class="p-2">Flex item 2</li> <li class="p-2">Flex item 3</li> </ul> <ul class="list-unstyled list-inline d-flex flex-row-reverse"> <li class="p-2">Flex item 1</li> <li class="p-2">Flex item 2</li> <li class="p-2">Flex item 3</li> </ul>

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

รหัสไม่ถูกต้อง:

 <div class="border-example2 py-5"> <span class="border0"></span> <span class="border-top0"></span> <span class="border-right0"></span> <span class="border-bottom0"></span> <span class="border-left0"></span> </div>

 border-example2 { > span { width: 100px; height: 100px; display: inline-block; margin: .50rem; background-color: #e1e1e1; border: 1px solid; &.border0 { border: none; } &.border-top0 { border-top: none; } &.border-right0 { border-right: none; } &.border-bottom0 { border-bottom: none; } &.border-left0 { border-left: none; } } }

รหัสที่ดี:

 <div class="border-example py-5"> <span class="d-inline-block m-2 border-0"></span> <span class="d-inline-block m-2 border-top-0"></span> <span class="d-inline-block m-2 border-right-0"></span> <span class="d-inline-block m-2 border-bottom-0"></span> <span class="d-inline-block m-2 border-left-0"></span> </div>

 .border-example { > span { width: 100px; height: 100px; background-color: #e1e1e1; border: 1px solid; } }

ใช้ .col-sm-X หาก .col-md-X และ .col-lg-X มีค่าเท่ากันสำหรับ X

อย่าเขียน .col-md-X และ .col-lg-X ถ้า .col-sm-X มีค่าเท่ากันสำหรับ X ตัวอย่างเช่น ไม่จำเป็นต้องเขียน .col-lg-10 เพราะเมื่อเราเขียน .col-md-10 เราจะรวม .col-lg-10 เข้าไปโดยอัตโนมัติ

รหัสไม่ถูกต้อง:

 <ul class="press-list list-inline row"> <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li> <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li> </ul>

รหัสที่ดี:

 <ul class="press-list list-inline row"> <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li> <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li> </ul>

อย่าใช้ .col-xs-12

อย่าใช้ .col-xs-12 เพราะถ้าไม่ .col-xs-X ไว้ มันจะเป็น .col-xs-12 ตามค่าเริ่มต้น

รหัสไม่ถูกต้อง:

 <section> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>Services</h2> <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3> </div> </div> <div class="row text-center"> <div class="col-md-6 col-xs-12"> <h4>E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p> </div> </div> </div> </section>

รหัสที่ดี:

 <section class="text-center"> <div class="container"> <h2>Services</h2> <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3> <div class="row"> <div class="col-md-6"> <h4>E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p> </div> </div> </div> </section>

อย่าใช้ reset.css ; ใช้ normalize.css แทน

หากคุณกำลังใช้ Bootstrap อยู่ จะมีการรวม normalize.css ไว้ที่นั่นแล้ว ไม่จำเป็นต้องรวมสองครั้ง

ปฏิบัติตามหลักเกณฑ์ แม้ว่าจะไม่ใช่แนวทางปฏิบัติที่ดีที่สุดก็ตาม

เพื่อความสอดคล้องกัน ควรปฏิบัติตามกฎและหลักเกณฑ์ที่คุณเริ่มต้นเสมอ (ไม่ว่าจะเป็นเรื่องการตั้งชื่อ ลักษณะโค้ด หรือโครงสร้างไฟล์)

ห่อ

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

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

ฉันหวังว่าจะขยายไปสู่หัวข้อขั้นสูงเพิ่มเติมในโพสต์ในอนาคต เนื่องจากฉันตั้งใจจะพูดถึงการทำให้กระบวนการเขียนโค้ดเป็นอัตโนมัติ โดยใช้งาน Gulp/Grunt, Linters, ปลั๊กอินตัวแก้ไข, เครื่องมือที่สร้างโค้ด, เครื่องมือ AI ที่เขียนโค้ดแทนคุณ และอื่นๆ หัวข้อที่เกี่ยวข้อง.

ฉันหวังว่านี่จะเป็นการอ่านที่น่าสนใจและให้ข้อมูล ขอให้โชคดีในความพยายามเขียนโค้ดของคุณ

อ่านเพิ่มเติมในบล็อก Toptal Engineering:

• วิธีเข้าถึงแอนิเมชั่น SVG ใน CSS