CSS ถือว่าเป็นภาษาที่ง่ายที่สุดหรืออาจจะเป็นภาษาที่ยากที่สุดในการเรียนรู้ในฐานะนักพัฒนาเว็บไซต์ เรากำหนดคุณสมบัติและค่าของสไตล์เพื่อนำไปใช้กับองค์ประกอบเฉพาะและนั่นคือทั้งหมดที่เราต้องทำ อย่างไรก็ตามมันยุ่งและซับซ้อนในการจัดระเบียบ CSS ให้มีความหมายสำหรับโครงการขนาดใหญ่ การเปลี่ยนบรรทัดของ CSS เพื่อจัดรูปแบบองค์ประกอบในบางหน้า มักทำให้เกิดการเปลี่ยนแปลงโดยไม่ได้ตั้งใจสำหรับองค์ประกอบในหน้าอื่น ๆ
เพื่อจัดการกับความซับซ้อนโดยธรรมชาติของ CSS จึงมีการกำหนดแนวทางปฏิบัติที่ดีที่สุดที่แตกต่างกันทุกประเภท ปัญหาคือไม่มีรูปแบบที่ชัดเจนว่าแนวทางปฏิบัติที่ดีที่สุดคืออะไรที่ดีที่สุดและหลายคนดูเหมือนจะมีการใช้งานที่แตกต่างกัน หากคุณกำลังพยายามเรียนรู้ CSS เป็นครั้งแรกสิ่งนี้อาจทำให้สับสนเล็กน้อย
การใช้ CSS พื้นฐาน
เริ่มจากเว็บไซต์พื้นฐานโดยใช้ index.htmlไฟล์ธรรมดาที่ลิงก์ไปยัง index.cssไฟล์แยกต่างหาก
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modern CSS</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>นี่คือส่วนหัว</header>
<main>
<h1>นี่คือเนื้อหาหลัก</h1>
<p>...</p>
</main>
<nav>
<h4>นี่คือส่วนการนำทาง</h4>
<p>...</p>
</nav>
<aside>
<h4>นี่คือส่วนอื่น ๆ</h4>
<p>...</p>
</aside>
<footer>นี่คือส่วนท้าย</footer>
</body>
</html>เราสามารถเพิ่ม CSS เพื่อให้เนื้อหามาความสวยงามมากขึ้น ใน index.css ทำการเขียน CSS ปรับรูปแบบต่างๆ เช่น สี ขนาด ตัวอักษร เป็นต้น
html {
font-size: 62.5%;
font-family: serif;
}body {
font-size: 1.8rem;
line-height: 1.618;
max-width: 38em;
margin: auto;
color: #4a4a4a;
background-color: #f9f9f9;
padding: 13px;
}@media (max-width: 684px) {
body {
font-size: 1.53rem;
}
}@media (max-width: 382px) {
body {
font-size: 1.35rem;
}
}h1, h2, h3, h4, h5, h6 {
line-height: 1.1;
font-family: Verdana, Geneva, sans-serif;
font-weight: 700;
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}h1 {
font-size: 2.35em;
}h2 {
font-size: 2em;
}h3 {
font-size: 1.75em;
}h4 {
font-size: 1.5em;
}h5 {
font-size: 1.25em;
}h6 {
font-size: 1em;
}แต่ CSS ไม่ได้มีเพียงเท่านี้ เริ่มน่าสนใจยิ่งขึ้นเมื่อเราใช้ CSS มากกว่าแค่ตัวอักษรและสี มีอีกมายมากนอกจากนี้ ทุกอย่างในการแสดงผล รวมทั้งรูปแบบการใช้งานต่างๆ ที่มีเยอะมาก และยังไม่มีรูปแบบการใช้ CSS ไหนที่ดีที่สุด จึงมีการทดลองและพัฒนาอย่างต่อเนื่องต่อไป เรามาดูพัฒนาการที่น่าสนใจกันเลย
การใช้ CSS สำหรับเค้าโครง
ในช่วงทศวรรษ 1990 ก่อนที่ CSS จะมีการนำไปใช้อย่างกว้างขวาง ไม่มีตัวเลือกมากมายในการจัดวางเนื้อหาบนหน้าเว็บ เดิม HTML ได้รับการออกแบบให้เป็นภาษาสำหรับสร้างเอกสารธรรมดาไม่ใช่เว็บไซต์แบบไดนามิกที่มีแถบด้านข้างคอลัมน์ ฯลฯ ในยุคแรก ๆ การจัดวางมักใช้ตาราง HTML หน้าเว็บทั้งหมดจะอยู่ในตารางซึ่งสามารถใช้ในการจัดระเบียบ เนื้อหาในแถวและคอลัมน์ วิธีนี้ใช้ได้ผล แต่ข้อเสียคือการเชื่อมโยงเนื้อหาและการนำเสนอเนื้อหาจำนวนมาก หากคุณต้องการเปลี่ยนเค้าโครงของเว็บไซต์คุณจะต้องเขียน HTML จำนวนมากขึ้นมาใหม่
เมื่อ CSS เข้ามามีส่วนร่วมมีการผลักดันอย่างมาก โดยใช้ HTML ในการเก็บเนื้อหา แยกจากงานนำเสนอเขียนใน CSS ผู้คนจึงค้นพบวิธีย้ายโค้ดเลย์เอาต์ทั้งหมดออกจาก HTML (ไม่นิยมใช้ตารางอีกต่อไป) ลองมาดูวิธีการทำงานในทางปฏิบัติกับตัวอย่างข้างต้นของเรา ก่อนที่เราจะกำหนดเลย์เอาต์ CSS ใด ๆ ก่อนอื่นเราจะรีเซ็ตระยะขอบและแพดดิ้ง (ซึ่งมีผลต่อการคำนวณเลย์เอาต์) รวมทั้งให้สีของส่วนที่แตกต่างกัน (ไม่ใช่เพื่อให้มันสวย แต่เพื่อให้แต่ละส่วนดูโดดเด่นเมื่อทดสอบเลย์เอาต์ที่แตกต่างกัน)
body {
margin: 0;
padding: 0;
max-width: inherit;
background: #fff;
color: #4a4a4a;
}header, footer {
font-size: large;
text-align: center;
padding: 0.3em 0;
background-color: #4a4a4a;
color: #f9f9f9;
}nav {
background: #eee;
}main {
background: #f9f9f9;
}aside {
background: #eee;
}ตอนนี้เราพร้อมที่จะใช้ CSS เพื่อจัดวางเนื้อหาบนหน้าแล้ว เราจะดู 3 วิธีที่แตกต่างกันตามลำดับเวลาโดยเริ่มจากเลย์เอาต์แบบลอยตัว
เค้าโครงแบบลอย
เดิมทีคุณสมบัติ CSS float ถูกนำมาใช้เพื่อลอยรูปภาพภายในคอลัมน์ข้อความทางซ้ายหรือขวา นักพัฒนาเว็บไซต์ในช่วงต้นทศวรรษ 2000 ใช้ประโยชน์จากข้อเท็จจริงที่ว่าคุณไม่สามารถลอยได้เพียงแค่รูปภาพเท่านั้น แต่ยังรวมถึงองค์ประกอบใดก็ได้ซึ่งหมายความว่าคุณสามารถสร้างภาพลวงตาของแถวและคอลัมน์โดยการลอยทั้ง div ของเนื้อหา แต่อีกครั้งการลอยตัวไม่ได้ออกแบบมาเพื่อจุดประสงค์นี้ดังนั้นการสร้างภาพลวงตานี้จึงยากที่จะดึงออกมาให้สอดคล้องกัน ด้านล่างนี้เป็นเค้าโครงแบบลอยตัวสำหรับตัวอย่างของเราตามเทคนิคที่อธิบายไว้
body {
padding-left: 200px;
padding-right: 190px;
min-width: 240px;
}header, footer {
margin-left: -200px;
margin-right: -190px;
}main, nav, aside {
position: relative;
float: left;
}main {
padding: 0 20px;
width: 100%;
}nav {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
}aside {
width: 130px;
padding: 0 10px;
margin-right: -100%;
}footer {
clear: both;
}* html nav {
left: 150px;
}เค้าโครงที่ใช้ Flexbox
คุณสมบัติ Flexbox CSS ได้รับการเสนอครั้งแรกในปี 2009 แต่ไม่ได้รับการยอมรับอย่างแพร่หลายในเบราว์เซอร์จนกระทั่งประมาณปี 2015 Flexbox ได้รับการออกแบบมาเพื่อกำหนดวิธีการกระจายพื้นที่ในคอลัมน์หรือแถวเดียวซึ่งทำให้เป็นตัวเลือกที่ดีกว่าสำหรับการกำหนดเค้าโครงเมื่อเทียบกับการใช้ ลอย นั่นหมายความว่าหลังจากใช้เลย์เอาต์แบบลอยตัวมาเป็นเวลาสิบปีในที่สุดนักพัฒนาเว็บก็สามารถใช้ CSS สำหรับเลย์เอาต์ได้โดยไม่ต้องใช้การลอย
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}.container {
display: flex;
flex: 1;
}main {
flex: 1;
padding: 0 20px;
}nav {
flex: 0 0 180px;
padding: 0 10px;
order: -1;
}aside {
flex: 0 0 130px;
padding: 0 10px;
}เค้าโครงตามตาราง (Grid)
CSS grid ได้รับการเสนอครั้งแรกในปี 2011 หลังจาก flexbox ไม่นานนัก แต่ใช้เวลานานในการยอมรับอย่างกว้างขวางกับเบราว์เซอร์ ในช่วงต้นปี 2018 CSS grid ได้รับการสนับสนุนโดยเบราว์เซอร์ที่ทันสมัยที่สุด ผลลัพธ์ที่ได้จะเหมือนกันกับรูปแบบที่ใช้ flexbox อย่างไรก็ตาม CSS ที่นี่ได้รับการปรับปรุงให้ดีขึ้นมากในแง่ที่แสดงเค้าโครงที่ต้องการได้อย่างชัดเจน ขนาดและรูปร่างของคอลัมน์และแถวถูกกำหนดไว้ในตัวเลือกเนื้อหาและแต่ละรายการในตารางจะถูกกำหนดโดยตำแหน่งโดยตรง
body {
display: grid;
min-height: 100vh;
grid-template-columns: 200px 1fr 150px;
grid-template-rows: min-content 1fr min-content;
}header {
grid-row: 1;
grid-column: 1 / 4;
}nav {
grid-row: 2;
grid-column: 1 / 2;
padding: 0 10px;
}main {
grid-row: 2;
grid-column: 2 / 3;
padding: 0 20px;
}aside {
grid-row: 2;
grid-column: 3 / 4;
padding: 0 10px;
}footer {
grid-row: 3;
grid-column: 1 / 4;
}การใช้ตัวประมวลผลล่วงหน้า CSS
จนถึงตอนนี้เราได้กล่าวถึงการใช้ CSS สำหรับการจัดรูปแบบพื้นฐานและการจัดวาง ตอนนี้เราจะเข้าสู่เครื่องมือที่สร้างขึ้นเพื่อช่วยปรับปรุงประสบการณ์ในการทำงานกับ CSS เป็นภาษาของตัวเองโดยเริ่มจากตัวประมวลผลล่วงหน้า CSS
ตัวประมวลผลล่วงหน้า CSS ช่วยให้คุณสามารถเขียนสไตล์โดยใช้ภาษาอื่นซึ่งจะถูกแปลงเป็น CSS ที่เบราว์เซอร์เข้าใจได้ นี่เป็นสิ่งสำคัญในสมัยที่เบราว์เซอร์ใช้งานคุณลักษณะใหม่ ๆ ได้ช้ามาก ตัวประมวลผลล่วงหน้า CSS หลักตัวแรกคือ Sass ซึ่งเปิดตัวในปี 2549 โดยมีไวยากรณ์ใหม่ที่กระชับ (การเยื้องแทนวงเล็บไม่มีอัฒภาค ฯลฯ ) และเพิ่มคุณสมบัติขั้นสูงที่ขาดหายไปจาก CSS เช่น ตัวแปรฟังก์ชันตัวช่วยและการคำนวณ
$dark-color: #4a4a4a $light-color: #f9f9f9 $side-color: #eeebody color: $dark-color header, footer background-color: $dark-color color: $light-color main background: $light-colornav, aside background: $side-color
ในปี 2009 Less CSS เปิดตัว นอกจากนี้ยังเขียนด้วย Ruby และนำเสนอคุณสมบัติที่คล้ายกันกับ Sass ความแตกต่างที่สำคัญคือไวยากรณ์ซึ่งออกแบบมาให้ใกล้เคียงกับ CSS มากที่สุด ซึ่งหมายความว่าโค้ด CSS ใด ๆ ที่ถูกต้อง Less code นี่คือตัวอย่างเดียวกันที่เขียนโดยใช้ Less syntax
@dark-color: #4a4a4a;
@light-color: #f9f9f9;
@side-color: #eee;body {
color: @dark-color;
}
header, footer {
background-color: @dark-color;
color: @light-color;
}
main {
background: @light-color;
}nav, aside {
background: @side-color;
}เกือบจะเหมือนกัน ( @คำนำหน้าแทนที่จะ$เป็นตัวแปร) แต่ไม่สวยเท่าตัวอย่าง Sass ที่มีวงเล็บปีกกาและเซมิโคลอนแบบเดียวกับ CSS ความจริงที่ว่ามันใกล้เคียงกับ CSS มากขึ้นทำให้นักพัฒนาสามารถนำมาใช้งานได้ง่ายขึ้น ในปี 2012 Less ถูกเขียนใหม่เพื่อใช้ JavaScript โดยเฉพาะ Node.js แทน Ruby ในการคอมไพล์ สิ่งนี้ทำให้เร็วกว่าคู่ Ruby น้อยกว่าและทำให้มันน่าสนใจยิ่งขึ้นสำหรับนักพัฒนาที่ใช้ Node.js ในเวิร์กโฟลว์ของพวกเขา
นักพัฒนา Sass จึงปรับตัวโดยการเพิ่มไวยากรณ์ใหม่ที่เรียกว่า SCSS ในปี 2010 (ซึ่งเป็นส่วนเหนือของ CSS ที่คล้ายกับ Less) พวกเขายังเปิดตัว LibSass ซึ่งเป็นพอร์ต C / C ++ ของเอ็นจิ้น Ruby Sass ซึ่งทำให้เร็วขึ้นและสามารถใช้งานได้ในภาษาต่างๆ
ตัวประมวลผลล่วงหน้า CSS ทางเลือกอื่นคือ Stylus ซึ่งออกมาในปี 2010 เขียนด้วย Node.js และเน้นไปที่ไวยากรณ์ที่สะอาดกว่าเมื่อเทียบกับ Sass หรือ Less โดยปกติแล้วการสนทนาเกี่ยวกับตัวประมวลผลล่วงหน้า CSS จะเน้นที่ทั้งสามเป็นที่นิยมมากที่สุด (Sass, Less และ Stylus) ในท้ายที่สุดพวกเขาทั้งหมดมีความคล้ายคลึงกันในแง่ของคุณสมบัติที่นำเสนอ
อย่างไรก็ตามบางคนโต้แย้งว่าตัวประมวลผลล่วงหน้า CSS มีความจำเป็นน้อยลงเนื่องจากในที่สุดเบราว์เซอร์ก็เริ่มใช้คุณลักษณะบางอย่าง เช่นตัวแปรและการคำนวณ นอกจากนี้ยังมีวิธีการอื่นที่เรียกว่า CSS Postprocessing ซึ่งมีศักยภาพในการทำให้ตัวประมวลผลล่วงหน้า CSS ล้าสมัย ซึ่งเราจะพูดถึงในขั้นต่อไป
การใช้ตัวประมวลผลหลัง CSS สำหรับคุณสมบัติการเปลี่ยนแปลง
ตัวประมวลผลหลัง CSS ใช้ JavaScript เพื่อวิเคราะห์และแปลง CSS ของคุณให้เป็น CSS ที่ถูกต้อง ในแง่นี้มันค่อนข้างคล้ายกับตัวประมวลผลล่วงหน้า CSS คุณอาจคิดว่ามันเป็นวิธีการอื่นในการแก้ปัญหาเดียวกัน ความแตกต่างที่สำคัญคือในขณะที่ตัวประมวลผลล่วงหน้า CSS ใช้ไวยากรณ์พิเศษเพื่อระบุสิ่งที่ต้องเปลี่ยน แต่ตัวประมวลผลหลัง CSS สามารถแยกวิเคราะห์ CSS ปกติและแปลงได้โดยไม่ต้องใช้ไวยากรณ์พิเศษใด ๆ นี่เป็นตัวอย่างที่ดีที่สุด มาดูส่วนหนึ่งของ CSS ที่เรากำหนดไว้ข้างต้นเพื่อจัดรูปแบบแท็กส่วนหัว
h1, h2, h3, h4, h5, h6 {
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}ที่นี่เรากำลังใช้คุณสมบัติ mixin ของ Sass ซึ่งช่วยให้คุณสามารถกำหนดส่วนของ CSS หนึ่งครั้งและนำกลับมาใช้ที่อื่นได้ แทนที่จะใช้มิกซ์อินจะเป็นการดีที่จะเขียน CSS ธรรมดาและมีเครื่องมือระบุคุณสมบัติที่ต้องการคำนำหน้าและเพิ่มตามนั้นโดยอัตโนมัติ ตัวประมวลผลหลัง CSS สามารถทำเช่นนั้นได้ ตัวอย่างเช่นหากคุณใช้ PostCSS กับ ปลั๊กอิน autoprefixer คุณสามารถเขียน CSS ตามปกติโดยไม่ต้องมีคำนำหน้าผู้ขายและปล่อยให้ผู้ประมวลผลหลังทำงานส่วนที่เหลือ
ใช้วิธีการ CSS เพื่อการบำรุงรักษา
เครื่องมือเช่นตัวประมวลผลล่วงหน้า CSS และตัวประมวลผลหลัง CSS ช่วยปรับปรุงประสบการณ์การพัฒนา CSS ได้อย่างยาวนาน แต่เครื่องมือเหล่านี้เพียงอย่างเดียวไม่เพียงพอที่จะแก้ปัญหาในการบำรุงรักษาโค้ด CSS ขนาดใหญ่ เพื่อแก้ไขปัญหานี้ผู้คนเริ่มจัดทำเอกสารแนวทางต่างๆเกี่ยวกับวิธีการเขียน CSS โดยทั่วไปเรียกว่า CSS methodologies ลองมาดูวิธีการที่เป็นที่นิยมบางส่วนตามลำดับเวลาคร่าวๆ
OOCSS
OOCSS (Object Oriented CSS) ถูกนำเสนอครั้งแรกในปี 2009 โดยเป็นวิธีการที่จัดระเบียบตามหลักการหลักสองประการ หลักการแรกคือโครงสร้างที่แยกต่างหาก ซึ่งหมายความว่าไม่ควรนำ CSS ที่ใช้กำหนดโครงสร้าง (เช่นเค้าโครง) มาผสมกับ CSS เพื่อกำหนดสกิน (เช่นสีฟอนต์ ฯลฯ ) ทำให้ง่ายต่อการ “re-skin” หลักการที่สองคือองค์ประกอบเป็นวัตถุที่ใช้ซ้ำได้โดยมีแนวคิดสำคัญคือวัตถุควรมีลักษณะเหมือนกันไม่ว่าจะอยู่ที่ใดในหน้า
OOCSS มีแนวทางที่คิดไว้เป็นอย่างดี แต่ไม่ได้มีการกำหนดแนวทางเฉพาะเจาะจงมากนัก แนวทางต่อมาเช่น SMACSS ได้ใช้แนวคิดหลักและเพิ่มรายละเอียดเพิ่มเติมเพื่อให้ง่ายต่อการเริ่มต้น
SMACSS
SMACSS (Scalable และ Modular Architecture for CSS) ถูกนำมาใช้ในปี 2011 เป็นวิธีการตามรอบการเขียน CSS ใน 5 ประเภทที่แตกต่าง กฎฐาน , กฎรูปแบบ , โมดูล , กฎระเบียบของรัฐและกฎธีม วิธีการ SMACSS ยังแนะนำหลักการตั้งชื่อบางประการ สำหรับกฎรูปแบบที่คุณจะคำนำหน้าชื่อชั้นด้วยหรือ l- layout- กฎระเบียบที่คุณจะคำนำหน้าชื่อชั้นที่อธิบาย เช่น is-hiddenis-collapsed
SMACSS มีแนวทางที่เฉพาะเจาะจงมากขึ้นเมื่อเทียบกับ OOCSS แต่ก็ยังต้องใช้ความคิดอย่างรอบคอบในการตัดสินใจว่ากฎ CSS ควรอยู่ในหมวดหมู่ใด แนวทางในภายหลังเช่น BEM ได้นำการตัดสินใจบางอย่างออกไปเพื่อให้ง่ายต่อการนำไปใช้
BEM
BEM (Block, Element, Modifier) ถูกนำมาใช้ในปี 2010 โดยเป็นวิธีการที่จัดระเบียบตามแนวคิดในการแบ่งส่วนติดต่อผู้ใช้ออกเป็นบล็อกอิสระ (<form class="search-form"></form>) องค์ประกอบเป็นส่วนหนึ่งที่มีขนาดเล็กของบล็อก ที่ไม่สามารถนำกลับมาใช้ในตัวของมันเอง (เป็นตัวอย่างจะเป็นปุ่มที่อยู่ในฟอร์มการค้นหาที่กำหนดไว้<button class="search-form__button">Search</button>)
วิธีการของ BEM นั้นเข้าใจง่ายโดยมีรูปแบบการตั้งชื่อเฉพาะที่ช่วยให้ผู้มาใหม่สามารถนำไปใช้ได้โดยไม่ต้องทำการตัดสินใจที่ซับซ้อน ข้อเสียสำหรับบางคนคือว่าชื่อชั้นจะค่อนข้างละเอียดและไม่ปฏิบัติตามกฎแบบดั้งเดิมสำหรับเขียนชื่อชั้นความหมาย แนวทางต่อมาเช่น Atomic CSS จะนำแนวทางนอกตำรานี้ไปใช้ในอีกระดับหนึ่ง
Atomic CSS
Atomic CSS (หรือที่เรียกว่า Functional CSS) ถูกนำมาใช้ในปี 2014 โดยเป็นวิธีการที่จัดขึ้นโดยใช้แนวคิดในการสร้างคลาสขนาดเล็กที่มีวัตถุประสงค์เดียวโดยใช้ชื่อตามฟังก์ชั่น วิธีนี้ขัดแย้งกับ OOCSS, SMACSS และ BEM อย่างสิ้นเชิง แทนที่จะถือว่าองค์ประกอบบนเพจเป็นวัตถุที่ใช้ซ้ำได้ Atomic CSS จะละเว้นวัตถุเหล่านี้ทั้งหมดและใช้คลาสยูทิลิตี้จุดประสงค์เดียวที่ใช้ซ้ำได้เพื่อจัดรูปแบบแต่ละองค์ประกอบ เช่น <button class="search-form__button">Search</button><button class="f6 br3 ph3 pv2 white bg-purple hover-bg-light-purple">Search</button>
CSS ใน JS
CSS ใน JS ถูกนำมาใช้ในปี 2014 โดยเป็นวิธีการที่จัดระเบียบเกี่ยวกับการกำหนดสไตล์ CSS ไม่ได้อยู่ในสไตล์ชีตแยกกัน แต่อยู่ในแต่ละองค์ประกอบโดยตรง มันถูกนำมาใช้เป็นแนวทางสำหรับกรอบงาน React JavaScript การใช้งานในภายหลังใช้ JavaScript เพื่อสร้าง CSS (ด้วยชื่อคลาสที่ไม่ซ้ำกันตามส่วนประกอบ) และแทรกลงในเอกสารด้วยแท็กสไตล์
CSS ในระเบียบวิธี JS ขัดกับแนวทางปฏิบัติที่ดีที่สุดของ CSS ในการแยกข้อกังวลอีกครั้ง เนื่องจากวิธีที่เราใช้เว็บได้เปลี่ยนไปอย่างมากเมื่อเวลาผ่านไป เดิมทีเว็บส่วนใหญ่ประกอบด้วยเว็บไซต์แบบคงที่ การแยกเนื้อหา HTML ออกจากการนำเสนอ CSS มีความหมายมาก ปัจจุบันเว็บใช้สำหรับการสร้างเว็บแอปพลิเคชันแบบไดนามิกซึ่งเป็นเรื่องที่สมเหตุสมผลที่จะแยกสิ่งต่างๆออกจากส่วนประกอบที่ใช้ซ้ำได้
เป้าหมายของ CSS ในวิธีการ JS คือการสามารถกำหนดองค์ประกอบที่มีขอบเขตยากซึ่งประกอบด้วย HTML / CSS / JS ที่มีกรอบของตัวเองเพื่อให้ CSS ในองค์ประกอบหนึ่งไม่มีโอกาสที่จะส่งผลกระทบต่อส่วนประกอบอื่น ๆ React เป็นหนึ่งในเฟรมเวิร์กที่นำมาใช้กันอย่างแพร่หลายซึ่งผลักดันให้ส่วนประกอบเหล่านี้มีขอบเขตที่ยากและมีอิทธิพลต่อเฟรมเวิร์กหลักอื่น ๆ เช่น Angular, Ember และ Vue.js เพื่อให้เหมาะสม สิ่งสำคัญคือต้องทราบว่าวิธีการ CSS ใน JS มีการทดลองมากมายเกิดขึ้นจากนักพัฒนาที่พยายามสร้างแนวทางปฏิบัติที่ดีที่สุดสำหรับ CSS ในยุคของส่วนประกอบสำหรับเว็บแอปพลิเคชัน
สรุป
CSS สมัยใหม่สามารถใช้งานได้หลากหลาย และมีประโยชน์มากในการ รับทำเว็บไซต์ เนื่องจากยังคงมีการเปลี่ยนแปลงและพัฒนาไปอย่างรวดเร็ว แต่สิ่งสำคัญคือต้องจำบริบทเดิมทางว่าเว็บมีการพัฒนาอย่างไร เมื่อเวลาผ่านไปและเป็นเรื่องดีที่ทราบว่ามีคนฉลาดจำนวนมากที่เต็มใจสร้างเครื่องมือและวิธีการที่เป็นรูปธรรมเพื่อช่วยให้แนวทางปฏิบัติที่ดีที่สุดของ CSS พัฒนาต่อไป