คุณรู้หรือไม่ว่ากว่า 97% ของเว็บไซต์ใช้ CSS ในการจัดรูปแบบ
Cascading Style Sheets หรือ CSS ช่วยให้นักพัฒนาสร้างเว็บเพจที่ดูดี สแกนได้ และนำเสนอได้
ภาษา CSS ระบุวิธีการนำเสนอเอกสารต่อผู้ใช้ ในกรณีนี้ เอกสารคือไฟล์ที่เขียนด้วยภาษามาร์กอัป เช่น XML หรือ HTML
สไตล์ใน React คืออะไร?
ความเรียบง่ายในการสร้าง เรียกใช้ และบำรุงรักษาแอป React คือเหตุผลหลักที่อยู่เบื้องหลังความนิยม React เป็นไลบรารี JavaScript แทนที่จะเป็นเฟรมเวิร์ก ซึ่งมีมากกว่าฟังก์ชันที่เขียนไว้ล่วงหน้าและข้อมูลโค้ด
ความพร้อมใช้งานของส่วนประกอบที่นำกลับมาใช้ใหม่ได้ ความยืดหยุ่น ความเสถียรของโค้ด ความเร็ว และประสิทธิภาพเป็นสาเหตุบางประการที่ทำให้ React ได้รับการจัดอันดับสูงในเฟรมเวิร์กและไลบรารี JavaScript
สไตล์ใน React คือกระบวนการสร้างส่วนประกอบต่างๆ ในแอป React ให้ดึงดูดสายตาโดยใช้ CSS อย่างไรก็ตาม เป็นที่น่าสังเกตว่า React ใช้ JSX (JavaScript และ XML) แทน HTML เป็นภาษามาร์กอัป ข้อแตกต่างที่สำคัญประการหนึ่งคือ HTML ใช้ .class เพื่อติดป้ายกำกับคลาส ในขณะที่ JSX ใช้ .ClassName เพื่อแสดงถึงสิ่งเดียวกัน
ทำไมคุณควรจัดสไตล์ React โดยใช้ CSS
- ทำให้แอปของคุณตอบสนอง เว็บแอปสมัยใหม่ควรเข้าถึงได้ทั้งบนหน้าจอขนาดเล็กและขนาดใหญ่ CSS อนุญาตให้คุณใช้คิวรีสื่อกับแอป React และทำให้ตอบสนองต่อขนาดหน้าจอที่แตกต่างกัน
- เร่งกระบวนการพัฒนา คุณสามารถใช้กฎ CSS เดียวกันกับหลายๆ คอมโพเนนต์ของแอป React ได้
- ทำให้แอป React สามารถบำรุงรักษาได้ การเปลี่ยนแปลงลักษณะที่ปรากฏของส่วนประกอบ/ส่วนต่างๆ ของแอปทำได้ง่ายโดยใช้ CSS
- ปรับปรุงประสบการณ์ผู้ใช้ CSS ช่วยให้การจัดรูปแบบเป็นมิตรกับผู้ใช้ การตอบสนองด้วยข้อความและปุ่มในตำแหน่งตรรกะนั้นง่ายต่อการนำทางและใช้งาน
มีหลายวิธีที่นักพัฒนาสามารถใช้เพื่อจัดรูปแบบแอป React ของตนได้ ต่อไปนี้คือสิ่งที่พบได้บ่อยที่สุด
เขียนสไตล์อินไลน์
สไตล์อินไลน์เป็นวิธีที่ง่ายที่สุดในการจัดรูปแบบแอป React เนื่องจากผู้ใช้ไม่จำเป็นต้องสร้างสไตล์ชีตภายนอก สไตล์ CSS ถูกนำไปใช้กับโค้ด React โดยตรง
เป็นที่น่าสังเกตว่าสไตล์อินไลน์มีความสำคัญเหนือสไตล์อื่นๆ ดังนั้น หากคุณมีสไตล์ชีตภายนอกที่มีการจัดรูปแบบบางอย่าง ลักษณะนั้นจะถูกแทนที่ด้วยสไตล์อินไลน์
นี่คือการสาธิตการออกแบบอินไลน์ในแอป React
import React from 'react';
import ReactDOM from 'react-dom/client';
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello World!!!!!</h1>
<h2>Add a little style!</h2>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
องค์ประกอบที่แสดงจะแสดง h1 พร้อมพื้นหลังสีน้ำเงินอ่อน
ข้อดีของการจัดแต่งทรงผมแบบอินไลน์
- เร็ว. เป็นวิธีที่ง่ายที่สุด เนื่องจากคุณเพิ่มสไตล์ลงในแท็กที่คุณต้องการจัดสไตล์โดยตรง
- มีความชอบเป็นอย่างยิ่ง สไตล์อินไลน์แทนที่สไตล์ชีตภายนอก ดังนั้น คุณจึงสามารถใช้เพื่อเน้นการทำงานเฉพาะโดยไม่ต้องเปลี่ยนแอปทั้งหมด
- ยอดเยี่ยมสำหรับการสร้างต้นแบบ คุณสามารถใช้สไตล์อินไลน์เพื่อทดสอบการทำงานก่อนที่จะรวมการจัดรูปแบบเข้ากับสไตล์ชีตภายนอก
ข้อเสียของสไตล์อินไลน์
- อาจจะน่าเบื่อ การจัดรูปแบบทุกแท็กโดยตรงนั้นใช้เวลานาน
- ถูก จำกัด. คุณไม่สามารถใช้คุณสมบัติ CSS เช่น ตัวเลือกและภาพเคลื่อนไหวที่มีรูปแบบอินไลน์
- รูปแบบอินไลน์จำนวนมากทำให้โค้ด JSX ไม่สามารถอ่านได้
นำเข้าสไตล์ชีตภายนอก
คุณสามารถเขียน CSS ในไฟล์ภายนอกและนำเข้าไปยังแอป React วิธีการนี้เปรียบได้กับการนำเข้าไฟล์ CSS ในแท็ก
ของเอกสาร HTMLเพื่อให้บรรลุเป้าหมายนี้ คุณต้องสร้างไฟล์ CSS ในไดเร็กทอรีของแอป นำเข้าไปยังส่วนประกอบเป้าหมาย และเขียนกฎสไตล์สำหรับแอปของคุณ
เพื่อสาธิตวิธีการทำงานของสไตล์ชีต CSS ภายนอก คุณสามารถสร้างไฟล์ CSS และตั้งชื่อว่า App.css จากนั้นคุณสามารถส่งออกได้ดังนี้
import { React } from "react";
import "./Components/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;
ข้อมูลโค้ดด้านบนนำเข้าสไตล์ชีตภายนอกไปยังคอมโพเนนต์ App.js ไฟล์ App.css อยู่ในโฟลเดอร์ Components
ข้อดีของสไตล์ชีต CSS ภายนอก
- ใช้ซ้ำได้ คุณสามารถใช้กฎ CSS เดียวกันในคอมโพเนนต์ต่างๆ ในแอป React
- ทำให้โค้ดเรียบร้อยยิ่งขึ้น การทำความเข้าใจโค้ดเป็นเรื่องง่ายเมื่อใช้สไตล์ชีตภายนอก
- ให้การเข้าถึงคุณสมบัติ CSS ขั้นสูง คุณสามารถใช้คลาสหลอกและตัวเลือกขั้นสูงเมื่อใช้สไตล์ชีตภายนอก
ข้อเสียของสไตล์ชีต CSS ภายนอก
- ต้องการหลักการตั้งชื่อที่เชื่อถือได้เพื่อให้แน่ใจว่าสไตล์จะไม่ถูกแทนที่
ใช้โมดูล CSS
แอพ React สามารถขยายใหญ่ขึ้นได้ ชื่อแอนิเมชั่น CSS และชื่อคลาสจะถูกกำหนดขอบเขตโดยรวมตามค่าเริ่มต้น การตั้งค่านี้อาจเป็นปัญหาได้เมื่อจัดการกับสไตล์ชีตขนาดใหญ่ เนื่องจากสไตล์หนึ่งสามารถแทนที่อีกสไตล์หนึ่งได้
โมดูล CSS แก้ปัญหานี้ด้วยการกำหนดขอบเขตแอนิเมชันและชื่อคลาสในเครื่อง วิธีการนี้ช่วยให้แน่ใจว่าชื่อคลาสมีเฉพาะในไฟล์/ คอมโพเนนต์ที่จำเป็นเท่านั้น ชื่อคลาสแต่ละชื่อจะได้รับชื่อทางโปรแกรมที่ไม่ซ้ำกัน เพื่อหลีกเลี่ยงความขัดแย้ง
หากต้องการใช้โมดูล CSS ให้สร้างไฟล์ด้วย .module.css หากคุณต้องการตั้งชื่อสไตล์ชีตของคุณเป็นสไตล์ ชื่อไฟล์จะเป็น style.module.css
นำเข้าไฟล์ที่สร้างขึ้นไปยังส่วนประกอบ React ของคุณ และคุณก็พร้อมที่จะเริ่มต้น
ไฟล์ CSS ของคุณอาจมีลักษณะดังนี้
/* styles.module.css */
.font {
color: #f00;
font-size: 30px;
}
คุณสามารถนำเข้าโมดูล CSS บน App.js ได้ดังนี้
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello admintrick.com reader</h1>
);
}
export default App;
ข้อดีของการใช้โมดูล CSS
- รวมเข้ากับ SCSS และ CSS ได้อย่างง่ายดาย
- หลีกเลี่ยงความขัดแย้งของชื่อคลาส
ข้อเสียของการใช้โมดูล CSS
- การอ้างอิงชื่อคลาสโดยใช้โมดูล CSS อาจทำให้ผู้เริ่มต้นสับสนได้
ใช้ส่วนประกอบที่มีสไตล์
ส่วนประกอบที่มีสไตล์ช่วยให้นักพัฒนาสามารถสร้างส่วนประกอบโดยใช้ CSS ในโค้ด JavaScript คอมโพเนนต์ที่มีสไตล์ทำหน้าที่เป็นคอมโพเนนต์ React ที่มาพร้อมกับสไตล์ คอมโพเนนต์ที่มีสไตล์นำเสนอสไตล์ไดนามิกและชื่อคลาสที่ไม่ซ้ำใคร
ในการเริ่มใช้ Styled Components คุณสามารถติดตั้งแพ็คเกจบนโฟลเดอร์รูทของคุณโดยใช้คำสั่งนี้
npm install styled-components
ขั้นตอนต่อไปคือการนำเข้าส่วนประกอบที่มีสไตล์ไปยังแอป React ของคุณ
ต่อไปนี้เป็นข้อมูลโค้ดของ App.js ที่ใช้ Styled Components
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 80%;
height: 120px;
background-color: lightblue;
display: block;
`;
return <Wrapper />;
}
export default App;
แอปที่แสดงผลจะมีสไตล์ด้านบนที่นำเข้าจากส่วนประกอบที่มีสไตล์
ข้อดีของส่วนประกอบที่มีสไตล์
- สามารถคาดเดาได้ สไตล์ในแนวทางการจัดสไตล์นี้ซ้อนอยู่ในองค์ประกอบแต่ละส่วน
- ไม่จำเป็นต้องให้ความสำคัญกับหลักการตั้งชื่อชั้นเรียนของคุณ เพียงแค่เขียนสไตล์ของคุณ แล้วแพ็คเกจจะจัดการส่วนที่เหลือเอง
- คุณสามารถส่งออกส่วนประกอบที่มีสไตล์เป็นอุปกรณ์ประกอบฉากได้ Styled Components แปลง CSS ปกติเป็นส่วนประกอบ React คุณสามารถใช้รหัสนี้ซ้ำ ขยายรูปแบบผ่านอุปกรณ์ประกอบฉาก และส่งออก
Con ของส่วนประกอบสไตล์
- คุณต้องติดตั้งไลบรารีของบุคคลที่สามเพื่อเริ่มต้น
สไตล์ชีตที่ยอดเยี่ยมทางไวยากรณ์ (SASS / SCSS)
SASS มาพร้อมกับเครื่องมือและฟีเจอร์ที่ทรงพลังกว่าซึ่งไม่มีใน CSS ทั่วไป คุณสามารถเขียนสไตล์ในสองสไตล์ที่แตกต่างกันซึ่งแนะนำโดยส่วนขยายเหล่านี้ .scss และ .sass
ไวยากรณ์สำหรับ SASS คล้ายกับ CSS ทั่วไป อย่างไรก็ตาม คุณไม่จำเป็นต้องใส่วงเล็บเปิดและปิดเมื่อเขียนกฎสไตล์ใน SASS
ตัวอย่างง่ายๆ ของ SASS จะปรากฏขึ้นดังนี้
nav ul margin-right: 20px padding: 0 list-style: list li display: block a display: block padding: 6px 12px text-decoration: underline nav
ในการเริ่มใช้ SASS ในแอป React คุณต้องคอมไพล์ SASS เป็น CSS ธรรมดาก่อน หลังจากตั้งค่าแอปของคุณผ่านคำสั่ง Create React App แล้ว คุณสามารถติดตั้ง node-sass เพื่อดูแลการคอมไพล์ได้
npm install node-sass
จากนั้น คุณสามารถสร้างไฟล์และกำหนดนามสกุลเป็น .scss หรือ .sass จากนั้นคุณสามารถนำเข้าไฟล์ของคุณได้ตามปกติ ตัวอย่างเช่น;
import "./Components/App.sass";
ข้อดีของ SASS/SCSS
- มันมาพร้อมกับคุณสมบัติไดนามิกมากมาย เช่น มิกซ์อิน การซ้อน และการขยาย
- คุณไม่มีสำเร็จรูปมากนักในการเขียนโค้ด CSS เมื่อใช้ SASS/SCSS
ข้อเสียของ SASS/SCSS
- สไตล์เป็นแบบสากล ดังนั้นคุณอาจพบปัญหาที่ครอบงำได้
วิธีการจัดแต่งทรงผมที่ดีที่สุดคืออะไร?
เนื่องจากเราได้พูดคุยกันถึง 5 วิธี คุณจึงอยากทราบว่าวิธีใดดีที่สุด เป็นการยากที่จะเน้นผู้ชนะในการสนทนานี้ อย่างไรก็ตาม ข้อควรพิจารณาเหล่านี้จะช่วยให้คุณตัดสินใจได้อย่างชาญฉลาด:
- เมตริกประสิทธิภาพ
- ไม่ว่าคุณจะต้องการระบบการออกแบบ
- ความง่ายดายในการเพิ่มประสิทธิภาพโค้ดของคุณ
การจัดรูปแบบแบบอินไลน์นั้นเหมาะสมเมื่อคุณมีแอปง่ายๆ ที่มีโค้ดไม่กี่บรรทัด อย่างไรก็ตาม คนอื่นๆ ทั้งหมด; ภายนอก, SASS, Styled Components และ CSS Modules เหมาะสำหรับแอปขนาดใหญ่
แนวทางปฏิบัติที่ดีที่สุดในการดูแล CSS ในแอปพลิเคชันตอบสนองขนาดใหญ่คืออะไร
- หลีกเลี่ยงการใส่สไตล์อินไลน์ การเขียนสไตล์ CSS แบบอินไลน์สำหรับทุกแท็กในแอป React ขนาดใหญ่อาจเป็นเรื่องที่น่าเบื่อหน่าย ให้ใช้สไตล์ชีตภายนอกที่เหมาะกับความต้องการของคุณแทน
- Lint รหัสของคุณ Linters เช่น Stylelint จะเน้นข้อผิดพลาดเกี่ยวกับสไตล์ในโค้ดของคุณ เพื่อให้คุณแก้ไขได้ตั้งแต่เนิ่นๆ
- ทำการตรวจสอบรหัสเป็นประจำ การเขียน CSS นั้นดูน่าสนุก แต่การทบทวนโค้ดเป็นประจำทำให้ง่ายต่อการระบุข้อบกพร่องตั้งแต่เนิ่นๆ
- ทำการทดสอบไฟล์ CSS ของคุณโดยอัตโนมัติ Enzyme และ Jest เป็นเครื่องมือที่ยอดเยี่ยมที่คุณสามารถใช้เพื่อทดสอบโค้ด CSS ของคุณโดยอัตโนมัติ
- เก็บรหัสของคุณไว้ให้แห้ง เมื่อต้องจัดการกับสไตล์ที่ใช้กันทั่วไป เช่น สีและระยะขอบ ให้ใช้ตัวแปรยูทิลิตี้และคลาสตามหลักการ Don’t Repeat Yourself (DRY)
- ใช้หลักการตั้งชื่อ เช่น Block Element Modifier วิธีการดังกล่าวทำให้ง่ายต่อการเขียนคลาส CSS ที่เข้าใจง่ายและนำไปใช้ซ้ำได้
บทสรุป
ด้านบนคือบางวิธีที่คุณสามารถใช้เพื่อจัดรูปแบบ React ทางเลือกของวิธีการจัดแต่งทรงผมจะขึ้นอยู่กับความต้องการ ทักษะ และรสนิยมของคุณ คุณยังสามารถรวมแนวทางการจัดสไตล์ต่างๆ เช่น สไตล์ชีทแบบอินไลน์และภายนอกเข้าด้วยกันในแอป React ของคุณ
คุณยังสามารถสำรวจเฟรมเวิร์กและไลบรารี CSS ที่ดีที่สุดสำหรับนักพัฒนาส่วนหน้า
