แนวทางปฏิบัติที่ดีที่สุดของ CSS: สัญญาณเก้าประการของ CSS ที่ไม่ดี

เผยแพร่แล้ว: 2020-12-16

CSS หรือ Cascading Style Sheets - ภาษาที่กำหนดลักษณะของหน้าเว็บและบางครั้งก็มีพฤติกรรม นักพัฒนาเว็บมักมองข้ามว่าเป็นภาษา "ง่าย" ที่ไม่ต้องให้ความสนใจมากเกินไป การจดจำคุณสมบัติที่พบบ่อยที่สุดการไหลทั่วไปและคุณสมบัติที่คลุมเครือมากขึ้นคือหนทางที่จะไป แต่อย่างที่นักพัฒนาที่มีประสบการณ์สูงทราบดีว่าไม่มีภาษาใดที่ควรมองข้ามเนื่องจากมีวิธีการที่ดีและไม่ดีในการทำบางสิ่งอยู่เสมอ

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

ภาษาการเขียนโปรแกรม

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

ความซับซ้อนของ CSS

CSS ยากไหม ไม่! ไม่แน่นอนมันมีกฎโครงสร้างพื้นฐานสองสามข้อ คุณมีตัวเลือก (คลาส, id, องค์ประกอบ) คุณมีคุณสมบัติและคุณมีขอบเขต มันน้อยกว่าภาษาเช่น C, Java หรือ PHP นักพัฒนาสามารถรับแนวคิดทั้งหมดได้ในเวลาไม่กี่นาทีในการอ่านและเริ่มจัดแต่งทรงผม แน่นอนหากต้องการทราบความแตกต่างระหว่างระยะขอบและระยะห่างคุณสามารถดูที่ w3schools ได้ แต่จะใช้เมื่อใดจะต้องใช้ประสบการณ์ แต่ไม่ใช่วิทยาศาสตร์จรวด

ตอนนี้สิ่งที่ทำให้สิ่งต่าง ๆ ซับซ้อนขึ้นเล็กน้อยคือวิธีการที่ตัวเลือกแข่งขันกันเพื่อที่จะเขียนทับถัดไปและคุณสมบัติหนึ่งส่งผลต่ออีกคุณสมบัติหนึ่งอย่างไร (display: block vs display: inline เป็นต้น) จากนั้นเราจะมีรายละเอียดที่เล็กกว่าเช่นการยุบระยะขอบการซ้อนดัชนี z คุณสมบัติประสิทธิภาพของ GPU เทียบกับ CPU โมเดลกล่องและคุณสมบัติการพิมพ์

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

รองรับเบราว์เซอร์สำหรับคุณสมบัติที่กำหนดเองที่ค่อนข้างใหม่

หากเราดูสองย่อหน้าด้านบนเราจะเห็นสองขั้นตอนหลักที่นักพัฒนาส่วนหน้าได้รับผลกระทบเมื่อพวกเขาทำงานกับ CSS - หนึ่งคือ " โอ้นั่นทั้งหมดหรือ ” และอย่างที่สองคือ“ โอ้ **** นั่นไม่ใช่ทั้งหมด ” นี่คือความหมายของ“ CSS Complexity”

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

WordPress CSS: คู่มือพื้นฐานสำหรับผู้เริ่มต้น

วิธีการเขียน CSS: ต่อสู้กับความซับซ้อน

มีวิธีแก้ปัญหาบางอย่างที่คนฉลาดคิดขึ้นมาภาพรวมจะเป็น:

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

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

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

อัดทั้งหมดในที่เดียว

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

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

จับตาดูเครื่องมือใหม่ ๆ ! พวกเขาหยุดไม่ให้เราต่อสู้กับปัญหาที่ชุมชนนักพัฒนาได้พบแก้ไขและจัดหาวิธีจัดการกับปัญหาเหล่านี้

ตอนนี้เราได้สรุปแล้วว่า CSS Complexity หมายถึงอะไรและเคล็ดลับเริ่มต้นบางประการในการต่อสู้กับมันเรามาดูภาพรวมโดยละเอียดเพิ่มเติมและให้ตัวอย่างโดยตรง

เคล็ดลับในการออกแบบเว็บไซต์: วิธีการพัฒนาเกมของคุณในการออกแบบเว็บไซต์

เก้าสัญญาณของ CSS ที่ไม่ดี

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

ระยะขอบทำหน้าที่แปลก ๆ

ปัญหาทั่วไปที่นักพัฒนาต้องเผชิญคือเมื่อสององค์ประกอบไม่รวมกัน (บน / ล่าง) ตัวอย่างเช่นเรามีสอง <p> องค์ประกอบที่มีระยะขอบ: 20px 0; ช่องว่างทั้งหมดระหว่างพวกเขาคือ 20px ไม่ใช่ 40 ซึ่งเกิดจากการยุบขอบ ยกเว้นว่าองค์ประกอบลอยหรืออยู่ในตำแหน่งที่แน่นอน “ ยกเว้น” นี้มีอยู่เกือบทุกที่สำหรับคำจำกัดความ

ดัชนี Z: 9999999 และยังไม่อยู่ด้านบนของดัชนี z: 1

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

บริบท stackimg ทำงานอย่างไร

ไม่เคลื่อนไหวคุณสมบัติที่เหมาะสม

เป็นคำถามที่ค่อนข้างง่าย แต่นักพัฒนาบางคนต้องดิ้นรนในเรื่องของภาพเคลื่อนไหวและแนวทางที่จะดำเนินการ ขั้นแรกสิ่งที่สามารถเคลื่อนไหวได้? สิ่งที่สามารถมีค่าเริ่มต้นมูลค่าสิ้นสุดและสิ่งที่อยู่ระหว่าง ความทึบเป็นคุณสมบัติดังกล่าวคุณสามารถเริ่มจาก 0 สิ้นสุดที่ 1 และเพิ่มขั้นตอนที่ไม่มีที่สิ้นสุดระหว่างเช่น 0.3, 0.6758, 0.9875 เป็นต้นคุณไม่สามารถ "แสดง" แบบเคลื่อนไหวได้เนื่องจากไม่มีขั้นตอนกลางระหว่างอินไลน์และกริด

ภาพเคลื่อนไหวที่ไม่มีประสิทธิภาพ

สาเหตุที่พบบ่อยที่สุดสำหรับ FPS ที่ไม่ดีบนภาพเคลื่อนไหวเกิดจากคุณสมบัติที่ไม่ถูกต้องในการเคลื่อนไหว หากคุณเปลี่ยนคุณสมบัติ“ ซ้าย” ขององค์ประกอบสัมบูรณ์คุณจะใช้ CPU ในการคำนวณ อย่างไรก็ตามหากคุณใช้การแปลงจะเป็น GPU และ GPU อย่างที่เรารู้กันดีว่าทำกราฟิกได้ดีกว่า

การเปรียบเทียบระหว่างภาพเคลื่อนไหวของ GPU และ CPU ในเบราว์เซอร์

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

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

ตัวเลือกที่ลึกเกินไป

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

บางครั้งเราต้องการเขียนทับส่วนประกอบซึ่งเป็นลูกของส่วนประกอบอื่นในหน้าใดหน้าหนึ่ง ดังนั้นเราจึงลงเอยด้วยสิ่งนี้: .page-name .section-name .component-1 .component-2 {…} ลึกไปแล้วสี่ระดับ แต่สิ่งที่ปรากฎก็คือเราทำได้เพียงแค่ทำ. page-name .componen-2 {…} สั้นดีกว่า! เพราะถ้ามันเกิดขึ้นด้วยเหตุผลบางอย่างที่คุณต้องเขียนทับรูปแบบใหม่นั้นคุณไม่จำเป็นต้องไปลึก 5 ระดับจากนั้น 6 แล้วมากกว่านั้น

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

ไฟล์ใหญ่เกินไป

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

Bundling-Assets-out-of-Control-Is-Impactful-to-Speed

เฟรมเวิร์กที่รวมซึ่งมีการใช้คุณสมบัติเพียงไม่กี่อย่างก็เป็นสาเหตุทั่วไปสำหรับไฟล์ขนาดใหญ่ รวม bootstrap / foundation, font-awesome, animate.css และ framework / libraries อื่น ๆ ที่คล้ายกันเข้าด้วยกันและคุณจะได้ไฟล์ขนาดใหญ่ที่คุณใช้ประมาณ 2% ทำความสะอาดให้เป็นระเบียบเรียบร้อยและใช้เฉพาะสิ่งที่จำเป็นจริงๆเท่านั้น หลายครั้งไม่จำเป็นต้องมีกรอบ

กรอบเมื่อไม่จำเป็น

Bootstrap, Foundation, UIKit และ Framework อื่น ๆ ทั้งหมดนั้นยอดเยี่ยมมาก! พวกเขาแก้ปัญหาที่แท้จริงและมีคุณค่าอย่างยิ่งต่อชุมชนการพัฒนาเว็บ ไม่จำเป็นต้องรู้ HTML หรือ CSS ที่ดีในการสร้างแดชบอร์ดและไซต์ แต่ให้เดินออกไปจากกรณีนั้นเริ่มเขียน CSS และคุณจะพบปัญหาเล็กน้อย

Best-CSS-Frameworks

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

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

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

ไม่อนุญาตให้กำหนดขนาดเนื้อหา

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

ตัวอย่างเช่นคุณไม่ต้องการตั้งค่าคุณสมบัติ ความกว้าง ของไซต์เป็น 1200px คุณต้องการตั้งค่า ความกว้างสูงสุด เป็น 1200px ด้วยวิธีนี้วิวพอร์ตจะช่วยให้ไซต์ของคุณยังคงตอบสนองต่อไป

จากนั้นช่องป้อนข้อมูลไม่ควรมีความสูง 40px ควรมีช่องว่างภายใน 1em ตอนนี้ขนาดตัวอักษรเนื้อหาคือสิ่งที่กำหนดขนาด และถ้าเนื้อหาข้างในโตขึ้นองค์ประกอบก็จะไม่แตก

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

เนื้อหากำหนดขนาด

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

แฮ็ก JavaScript

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

แน่นอนว่ามีฟังก์ชันการสลับมาตรฐานซึ่งคุณสามารถใช้อินพุตช่องทำเครื่องหมายเพื่อเปลี่ยนรูปแบบเมื่อ: เลือกมีการซ้อนทับพื้นหลังที่สามารถเรียกใช้งานได้ง่ายและมีคุณสมบัติเช่นตัวนับเพื่อสร้างรายการ <ol> แบบธรรมดามากกว่า .

คำแนะนำคือให้มองหาโซลูชัน CSS ก่อน สมมติว่าคุณต้องการสร้างป๊อปอัป มันแสดงขึ้นตรงกลาง (ตำแหน่ง: คงที่) จากนั้นคุณต้องการปิดจากไอคอน [X] หรือเมื่อคุณคลิกรอบ ๆ ใน JS คุณจะต้องเขียนเหตุการณ์ที่จะทริกเกอร์อะไรก็ได้ยกเว้นเนื้อหาป๊อปอัป แต่ยังคงเรียกใช้ [X] ซึ่งอยู่ในเนื้อหาป๊อปอัป

จาก CSS คุณสามารถเขียน <div> อื่นที่มีขนาด 100vw, 100vh และดัชนี z ได้ในป๊อปอัป จากนั้นคุณสามารถกำหนดเป้าหมาย div นั้นใน JS ซึ่งเป็นซับบรรทัดเดียว

อีกตัวอย่างหนึ่ง - คุณต้องการปุ่มสำหรับวางในเนื้อหาซึ่งจะ "ขยาย" เนื้อหาใด ๆ ที่ตามมา ง่ายด้วย CSS ซับซ้อนขึ้นเล็กน้อยด้วย JS ด้วย CSS คุณสามารถทำสิ่งนี้:

 Label.button - จัดรูปแบบปุ่มด้วยสายตา
 Input: not (: checked) ~ * {display: none} - ซ่อนทุกอย่างหลังจากนั้นในคอนเทนเนอร์เดียวกัน

บิตนั้น“ ในคอนเทนเนอร์เดียวกัน” คุณต้องใช้ตรรกะที่กำหนดเองใน JS คุณยังต้องเลือกองค์ประกอบทั้งหมดซึ่งต้องใช้การข้ามโครงสร้าง DOM จากนั้นใช้สไตล์ CSS กับพวกเขาซึ่งจะลงท้ายด้วยแท็ก style =”” ซึ่งจะต้องมี! สำคัญถ้าคุณต้องจัดการกับพวกเขาด้วยเหตุผลบางอย่าง ใน CSS โชคดีที่มันง่ายมาก

เส้นทางสู่การเป็นนักออกแบบเว็บไซต์ที่ดี

สรุป

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

DevriX WordPress Development Retainers

การพัฒนาการสนับสนุนและนวัตกรรมในระยะยาวสำหรับแพลตฟอร์ม WordPress ของคุณ DevriX เป็นพันธมิตรทางเทคนิคสำหรับ SMEs และ บริษัท ที่เพิ่งเริ่มต้นอย่างรวดเร็ว เราสร้างโซลูชัน WordPress และปรับขนาดแพลตฟอร์มที่มีการดูเพจมากถึง 20,000,000 ครั้งต่อเดือน

มาทำงานกันเถอะ