เคล็ดลับสำหรับโครงสร้าง CSS สำหรับเว็บไซต์ธุรกิจ (หรืออื่น ๆ สำหรับเรื่องนั้น)

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

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

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

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

สร้างด้วยส่วนประกอบไม่ใช่เพจ

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

นี่คือคำแนะนำที่พบบ่อยที่สุดและแนวทางปฏิบัติที่ดีที่สุด (จนถึงปัจจุบัน) ที่คุณสามารถนำไปใช้ได้

มีสไตล์โดยคำนึงถึงส่วนประกอบ

ตอนนี้คุณจัดการความแตกต่างเฉพาะหน้าอย่างไร เพราะนี่คือสาเหตุที่พบบ่อยที่สุดในการจัดรูปแบบต่อหน้า? มีหลายวิธี:

ใช้ตัวปรับแต่ง

ใน“ BEM”“ M” ย่อมาจาก Modifier นี่คือรูปลักษณ์ของตัวปรับแต่ง. block__child แม้ว่าคุณจะไม่ได้ใช้ BEM แต่ตัวดัดแปลงก็ยังมีอยู่ หากมีการเปลี่ยนแปลงไปยังองค์ประกอบหรือส่วนให้เพิ่มตัวปรับแต่งสำหรับส่วนประกอบนั้น

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

ตัวแก้ไของค์ประกอบบล็อก

ส่วนประกอบของเด็กสไตล์

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

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

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

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

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

ทำงานในส่วน

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

แยกหน้า Landing Page เป็นส่วน ๆ

  • section.section-container - อาจเป็น "ชื่อส่วนประกอบ" หากคุณต้องการซึ่งเก็บ paddings / margins ที่สอดคล้องกันหรืออะไรก็ตามที่จำเป็น
  • section.section-border-top - เป็นตัวปรับแต่ง สิ่งนี้ไม่ได้ใช้ BEM แต่คุณสามารถ "แปล" เป็น section-container-border ได้หากจำเป็น
  • section.section-welcome - จะเป็น ชื่อ ของส่วน

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

การแยกไฟล์

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

  • ทั่วไป - ทั่วไปมักประกอบด้วยโค้ดการตั้งค่าเช่นการสร้างตารางรูปแบบไปยังแท็ก HTML รีเซ็ต / Normalizer รูปแบบเฉพาะ CMS และสิ่งที่ชอบ
  • Pages - ลักษณะหน้าตามที่อธิบายไว้ข้างต้น ตามหลักการแล้วคุณควรเก็บรหัสไว้ที่นี่น้อยมาก
  • ส่วนประกอบ - แกนกลางของโครงสร้าง - ส่วนประกอบต่างๆอยู่ที่นี่ เคล็ดลับอย่างหนึ่งคือคุณสามารถมี "องค์ประกอบ" หรือ "อื่น ๆ " ที่จะรวมส่วนประกอบที่มีขนาดเล็กลงในไฟล์เดียวแทนที่จะเป็นไฟล์ 80 ไฟล์ แน่นอนว่าไฟล์ที่ใหญ่กว่าควรอยู่ในไฟล์แยกกัน
  • เค้าโครง - สไตล์ส่วนกลางเช่นบนส่วนหัวส่วนท้ายแล้วเค้าโครงหน้าตัวปรับแต่งตารางของคุณและอื่น ๆ
  • ปลั๊กอิน - สิ่งภายนอกที่สร้างขึ้นจากปลั๊กอินส่วนขยายหรืออะไรก็ตาม เป็นการดีที่จะแยกมันออกจากกันเนื่องจากคุณสามารถนำกลับมาใช้ในโครงการอื่น ๆ ได้

รักษาตัวเลือกให้สะอาด

สัญญาณที่ดีของรหัสสะอาดคือดูง่ายแค่ไหน ไม่มีคุณสมบัติแปลก ๆ ทุกอย่างมีจุดประสงค์มีการเยื้องต่ำ ตัวเลือก“ ดูฉลาด” เมื่อไม่จำเป็นไม่ได้ทำให้โค้ดของคุณ“ เจ๋ง” หากคุณสามารถแทนที่สิ่งเช่น #container> .row div [rel =” something”] ด้วย. rel-something (สมมติว่าเป็นชื่อคลาสที่มีความหมาย) คุณก็ควรอัปเดตมาร์กอัปเล็กน้อย เป้าหมายคือทำให้ทุกอย่างง่ายขึ้น

ให้การเยื้องต่ำ คุณแทบไม่จำเป็นต้องไปมากกว่าสามระดับ มาดูตัวอย่างคลาส .entry:


.entry {... }
.entry-title {... }

ดูว่าไม่จำเป็นต้องเยื้อง .entry-title ข้างใน .entry ในภายหลังเมื่อคุณเพิ่มตัวปรับแต่งลงในไฟล์คุณสามารถมี. entry-modifier {} และ .entry-modifier .entry-title {} ได้

ด้วยวิธีนี้การเขียนทับสไตล์ในอนาคตจึงง่ายขึ้น ลองมาดูตัวอย่างทั่วไปอื่น ๆ : คุณมีมาร์กอัป nav.site-nav> ul.list-menu> li.list-items * 5> a (emmet)

ตอนนี้เพื่อสไตล์สิ่งที่คุณต้องมีคือ:


.site-nav {} - องค์ประกอบ 1

.list-menu {} - ส่วนประกอบ 2
.list-menu .list-item {}
.list-menu a {}

หากคุณมีส่วนประกอบเพิ่มเติมอยู่ภายในเช่นรายการแบบเลื่อนลงเพิ่มเติมคุณสามารถซ้อนองค์ประกอบเหล่านี้ได้โดยตรงใน. list-menu คุณไม่จำเป็นต้องเขียน. site-nav .list-menu .list-item .dropdown {} (ระดับลึก 4 ระดับ) เมื่อคุณมี. list-menu .dropdown ได้สองระดับ {}

เขียนชื่อคลาสนามธรรมเพิ่มเติมสำหรับตัวดัดแปลง

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

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

เช่นเดียวกันกับสีและคุณสมบัติประเภทอื่น ๆ สมมติว่าคุณมีเส้นคั่นเนื้อหาบางส่วน (เช่นแท็ก <hr>) คุณตั้งชื่อนั้นว่า. line-dash เพราะเป็นเส้นประ ทำให้รู้สึกสมบูรณ์แบบ แต่แล้วการเปลี่ยนแปลงก็มาถึงและต้องมีจุด คุณไปเปลี่ยนชื่อเป็น. line-dotted หรือไม่? นี่ไม่ใช่ตัวปรับแต่งนี่คือส่วนประกอบ แทนที่จะเป็นเช่นนี้คุณสามารถตั้งชื่อเป็น. line-Separator จากนั้นหากคุณต้องการเจาะจงคุณสามารถเพิ่มตัวปรับแต่งสำหรับ. dot หรือ. dashed ได้ การตั้งชื่อประเภทนี้มักจะใช้เวลามากที่สุดในการสร้างไซต์

สรุป

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

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

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