บทความ IT เจ๋งๆ
5 CSS Practices ที่ Web Developer ควรหลีกเลี่ยง
09-ก.ค.-21
คัมภีร์เทพ IT
บางคนคิดว่า CSS นั้นเรียนรู้ได้ยาก คุณอาจเผลอทำบางสิ่งบางอย่างที่สร้างปัญหาให้กับคุณโดยไม่ได้ตั้งใจ และในบทความนี้ จะกล่าวถึง 5 CSS Practices ที่ Web Developer ควรหลีกเลี่ยง
1. Set ค่า Margins หรือ Padding จากนั้นก็ Reset พวกมัน
เรามักจะเห็นผู้คน Set ค่า Margins หรือ Padding สำหรับ Elements ทั้งหมด แล้วจากนั้นก็ Reset พวกมัน สำหรับ Element แรกหรือ Element สุดท้าย ไม่แน่ใจว่า ทำไมพวกเขาถึงใช้กฎถึง 2 ข้อ ในเมื่อคุณสามารถใช้กฎเพียงข้อเดียวได้ ซึ่งมันจะง่ายกว่ามาก หากคุณ Set ค่า Margins หรือ Padding สำหรับ Elements ที่จำเป็นทั้งหมดได้ในคราวเดียว
คุณสามารถใช้หนึ่งในตัวเลือกต่อไปนี้ สำหรับ CSS ที่เรียบง่ายและกระชับยิ่งขึ้น: nth-child/nth-of-type Selectors, :not() Pseudo-class, หรือ Adjacent Sibling Combinator ที่เรารู้จักกันดีก็คือ +
อย่าทำแบบนี้:
คุณสามารถใช้:
หรือ:
หรือ:
2. ทำการ Add display: block สำหรับ Elements ด้วย position: absolute หรือ position: fixed
คุณรู้หรือไม่ว่า เราไม่จำเป็นต้องเพิ่ม display: block สำหรับ Elements ด้วย position: absolute หรือ position: fixed เพราะว่ามันเป็นค่า Default อยู่แล้ว
นอกจากนี้ หากคุณใช้ inline-* values ค่าเหล่านี้จะถูกเปลี่ยนแปลงดังนี้: inline หรือ inline-block จะเปลี่ยนเป็น block, inline-flex -> flex, inline-grid -> grid และ inline-table -> table
ดังนั้น เพียงแค่เขียน position: absolute หรือ position: fixed และ Add display เมื่อคุณต้องการ flex หรือ grid values เท่านั้น
อย่าทำแบบนี้:
หรือ:
คุณสามารถใช้:
หรือ:
3. ใช้ transform: translate (-50%, -50%) To Center
มีอยู่ปัญหาหนึ่ง ที่สร้างปัญหามากมาย เรากำลังพูดถึงการจัด Element ให้อยู่ Center ด้วยความสูงตามแต่จะกำหนดทอดไปตาม 2 แกน
โดยเฉพาะอย่างยิ่ง Solution หนึ่งก็คือ การใช้ Absolute Positioning และ Transform Property ร่วมกัน เทคนิคนี้ทำให้เกิดปัญหา Text ที่พร่ามัวใน Chromium-based Browsers
แต่หลังจากที่มี flexbox ดูเหมือนเทคนิคนี้จะไม่เกี่ยวเนื่องกันอีกต่อไป ประเด็นคือ มันไม่สามารถแก้ปัญหา Text ที่พร่ามัวได้ ยิ่งไปกว่านั้น มันยังทำให้คุณต้องใช้ถึง 5 Properties ดังนั้น เราจะใช้เคล็ดลับที่สามารถลด Code ให้เหลือเพียงแค่ 2 Properties เท่านั้น
เราสามารถใช้ margin: auto ภายใน flex Container และ Browser จะจัด Element ให้อยู่ตรงกลาง นั่นคือ เราใช้เพียงแค่ 2 Properties เอง
อย่าทำแบบนี้:
คุณสามารถใช้:
4. ใช้ width: 100% สำหรับ Block Elements
เรามักใช้ flexbox เพื่อสร้าง Multi-Column Grid ที่ค่อย ๆ แปลงให้เหลือเพียง Column เดียว
และในการแปลง Grid ให้เป็น Column เดียว Developers จะใช้ width: 100% ซึ่งไม่เข้าใจว่าทำไมพวกเขาถึงทำแบบนั้น Grid Elements เป็น Block Elements ที่สามารถทำได้โดย Default อยู่แล้วโดยที่ไม่ต้องใช้ Properties อื่นเพิ่มเติม
ดังนั้น เราจึงไม่จำเป็นต้องใช้ width: 100% แต่เราควรเขียน Media Query เพื่อให้ flexbox ถูกใช้ในการ Multi-Column Grid เท่านั้น
อย่าทำแบบนี้:
คุณสามารถใช้:
5. Set ค่า display: block สำหรับ Flex Items
เมื่อใช้ flexbox สิ่งสำคัญคือต้องจำไว้ว่า เมื่อคุณสร้าง flex container (add display: flex), children ทั้งหมด (flex items) จะกลายเป็น blockified
ซึ่งหมายความว่า Elements จะถูก Set ไปยัง display และสามารถมีแค่ block values ได้เท่านั้น ดังนั้น หากคุณ Set ค่า inline หรือ inline-block มันจะเปลี่ยนเป็น block, inline-flex -> flex, inline-grid -> grid และ inline-table -> table
ดังนั้น อย่าเพิ่ม display: block เข้าไปใน flex items เพราะ Browser จะทำให้คุณเอง
อย่าทำแบบนี้:
คุณสามารถใช้:
ที่มา: https://betterprogramming.pub/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด