การใช้ CSS แต่ละยุคสมัย มีอะไรน่าสนใจบ้าง

รับทำเว็บไซต์ | ออกแบบเว็บไซต์ | รับเขียนโปรแกรม | รับทำระบบเว็บไซต์

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 พัฒนาต่อไป

เครื่องมือ SEO ฟรี – 8 เครื่องมือ ช่วยให้คุณเพิ่มประสิทธิภาพเว็บไซต์

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

การส่งอีเมลใน PHP โดยใช้ PHPMailer

PHPMailer อาจเป็นไลบรารี PHP แบบโอเพนซอร์สที่ได้รับความนิยมมากที่สุดในการส่งอีเมลด้วย ครั้งแรกที่ปล่อยออกมาปี 2001 และตั้งแต่นั้นมามันได้กลายเป็นวิธีท...

WordPress CMS กับ PHP Framework อะไรดีกว่ากัน?

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

5 ขั้นตอน ในการเพิ่มความเร็วรูปภาพของเว็บไซต์

รูปภาพเป็นองค์ประกอบหลักของทุกเว็บไซต์ เป็นข้อมูลมากกว่า 60% ที่โหลดบนหน้าเว็บไซต์ เป็นองค์ประกอบที่สำคัญของเว็บไซต์เกือบทั้งหมดไม่ว่าจะเป็น...

ออกแบบเว็บไซต์ รูปแบบต่างๆ ในการสร้าง Layout ใน HTML

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

HTML5 คืออะไรใช้ทำอะไรได้บ้าง

HTML5 คืออะไร?HTML5 เป็นภาษาโปรแกรมที่มีตัวย่อมาจาก Hyper Text Markup Language เป็นระบบที่อนุญาตให้ปรับเปลี่ยนรูปลักษณ์ของหน้าเว็บรวมทั้งปรับเปลี่...