แนะนำส่วนประกอบสไตล์ 5 นาที

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

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

ผ้าปูที่นอนสไตล์วุ่นวาย

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

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

คลื่นลูกใหม่ของ CSS

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

Styled Components เป็นหนึ่งในห้องสมุดเหล่านี้และได้รับความสนใจอย่างรวดเร็วเนื่องจากมีการผสมผสานระหว่างนวัตกรรมและความคุ้นเคย ดังนั้นหากคุณใช้ React (และหากคุณไม่ได้ลองดูแผนการศึกษา JavaScript ของฉันและคำนำของฉันเกี่ยวกับ React) มันก็คุ้มค่าที่จะดูทางเลือก CSS ใหม่นี้

ฉันเพิ่งใช้มันเพื่อออกแบบเว็บไซต์ส่วนตัวของฉันและวันนี้ฉันต้องการแบ่งปันบางสิ่งที่ฉันเรียนรู้ในกระบวนการ

ส่วนประกอบสไตล์

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

Hello World

h1.title {
  ขนาดตัวอักษร: 1.5em;
  สี: สีม่วง;
}

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

นำเข้าสไตล์จาก 'ส่วนประกอบสไตล์';
ชื่อเรื่อง const = styled.h1`
  ขนาดตัวอักษร: 1.5em;
  สี: สีม่วง;
`;
 Hello World 

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

กล่าวอีกนัยหนึ่งเรากำลังกำจัดคลาส CSS เป็นขั้นตอนตัวกลางระหว่างองค์ประกอบและสไตล์

Max Stoiber ผู้ร่วมสร้างองค์ประกอบที่มีสไตล์กล่าวว่า:

“ แนวคิดพื้นฐานขององค์ประกอบที่มีสไตล์คือการบังคับใช้แนวทางปฏิบัติที่ดีที่สุดโดยการลบการแมประหว่างสไตล์และส่วนประกอบ”

ความซับซ้อนในการขนถ่าย

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

แต่การแยกชิ้นส่วนนั้นสร้างความซับซ้อนมากมายและมีการโต้แย้งว่าเมื่อเปรียบเทียบกับ CSS ภาษาการเขียนโปรแกรมที่ "เหมือนจริง" อย่างจาวาสคริปต์นั้นดีกว่ามากในการจัดการกับความซับซ้อนนั้น

อุปกรณ์ประกอบฉากมากกว่าชั้นเรียน

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

Hello World

// จะเป็นสีฟ้า
h1.title {
  ขนาดตัวอักษร: 1.5em;
  สี: สีม่วง;
  
  และ .primary {
    สี: สีน้ำเงิน;
  }
}

คุณเขียน:

ชื่อเรื่อง const = styled.h1`
  ขนาดตัวอักษร: 1.5em;
  สี: $ {props => props.primary? 'blue': 'purple'};
`;
<ชื่อเรื่องหลัก> Hello World  // จะเป็นสีน้ำเงิน

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

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

ชื่อเรื่อง const = styled.h1`
  ขนาดตัวอักษร: 1.5em;
  สี: สีม่วง;
  
  และ .primary {
    สี: สีน้ำเงิน;
  }
`;
 Hello World  // จะเป็นสีน้ำเงิน

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

คำเตือน

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

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

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

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

เรียนรู้เพิ่มเติม

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

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

  • Max Stoiber เพิ่งเขียนบทความเกี่ยวกับสาเหตุของส่วนประกอบสไตล์นิตยสาร Smashing
  • repo ส่วนประกอบที่มีสไตล์นั้นมีเอกสารที่ครอบคลุม
  • บทความโดย Jamie Dixon สรุปประโยชน์บางประการของการสลับไปใช้ส่วนประกอบที่มีสไตล์
  • หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการใช้งานห้องสมุดจริง ๆ ลองดูที่บทความนี้โดย Max

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

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