ทำซ้ำสไตล์ - วิธีปฏิบัติที่ดีที่สุด

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

“ คุณสมบัติ CSS สองรายการเดินเข้าไปในบาร์ barstool ในแถบที่แตกต่างกันโดยสิ้นเชิงตกลงมา”

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

นี่คือภาพหน้าจอของโครงการที่ผ่านมาของฉัน ส่วนหัวชั้นเรียนทั่วทุกสถานที่ ID กระจัดกระจายไปทั่ว มันเป็นระเบียบ

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

ป้อน: tyStyled-Components

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

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

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

จัดแต่งทรงผมสไตล์

ไลบรารีสไตล์ CSS เช่น Bootstrap, Materialize ฯลฯ ล้วน แต่ออกมาพร้อมกับไลบรารีองค์ประกอบเฉพาะของ React เนื่องจากไม่มี classNames คุณจึงไม่สามารถกำหนดเป้าหมาย CSS เพื่อเปลี่ยนเป็นสไตล์ของคุณได้ วิธีเดียวในการเปลี่ยนสไตล์คือการเปลี่ยนสไตล์เป็นวัตถุ (ซึ่งเป็นอุปสรรคสำหรับนักพัฒนาส่วนหน้าบางคนที่ไม่คุ้นเคยกับจาวาสคริปต์) ผลลัพธ์นี้ในทุก ๆ เว็บไซต์. มอง อย่างแน่นอน เหมือน. ตอนนี้เมื่อใช้ส่วนประกอบที่มีสไตล์คุณสามารถสร้างองค์ประกอบสไตล์ที่กำหนดเองซึ่งกำหนดเป้าหมายไปที่องค์ประกอบที่มีธีม เด็ดสุด ๆ

การสร้างองค์ประกอบสไตล์ที่กำหนดเองจากนั้นจัดแต่งสไตล์องค์ประกอบที่มีสไตล์ สไตล์มากมาย!

องค์กรและการอ่านง่าย

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

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

JSX อาจยุ่งเล็กน้อยด้วยสไตล์ <div> s, <span> และอินไลน์ที่นับไม่ถ้วนสวัสดีน่ารัก

'ปฏิบัติที่ดีที่สุด'

คุณยังคงสามารถใช้สไตล์ชีทกับส่วนประกอบที่มีสไตล์ (แม้ว่ามันจะเอาชนะจุดที่นี่ได้อย่างชัดเจน) และยังมีวิธีในการฉีดสไตล์ทั่วโลก (เช่นปรับมาตรฐานหรือรีเซ็ตไฟล์ css) องค์ประกอบในการออกแบบสไตล์ภายในส่วนประกอบนั้นเป็นแนวปฏิบัติที่ดีที่สุดที่นักพัฒนาหลายคนกำลังมุ่งไปที่ React โดยเฉพาะ ฉันขอแนะนำให้ทุกคนทำการค้นคว้าเกี่ยวกับเรื่องนี้โดยเฉพาะอย่างยิ่งหากพวกเขากำลังมองหาการใช้ภาษาส่วนหน้าเช่น React และ Angular 2

นี่คือลิงก์เพื่อเรียนรู้เพิ่มเติม:

David Chan ให้คำปรึกษาเกี่ยวกับสไตล์การจัดองค์ประกอบใน React
เขาอธิบายวิธีสร้างสไตล์สำหรับระบบที่ใช้ส่วนประกอบโดยทั่วไป

Glen Maddern พูดคุยเกี่ยวกับระบบที่อิงองค์ประกอบ
ผู้สร้างร่วมของไลบรารีองค์ประกอบที่มีสไตล์มีสไตล์มากกว่าองค์ประกอบโดยทั่วไปไม่ได้มุ่งเน้นไปที่ตัวไลบรารีเอง

หน้าเว็บของ Styled Components อย่างเป็นทางการและลิงค์ไปยัง GitHub:
เอกสารมีรายละเอียดและกระชับ

Max Stoiber พูดคุยที่ ReactConf 2016
ผู้ร่วมสร้างส่วนประกอบที่มีสไตล์นั้นมีรายละเอียดและรับคำถามเกี่ยวกับไลบรารีสไตล์ใหม่

ตอน Podcast Jabber JavaScript กับ Max Stoiber
Stoiber พูดคุยเกี่ยวกับ create-react-app ซึ่งเขาสร้างเช่นเดียวกับไลบรารีคอมโพเนนต์ที่มีสไตล์