กฎขอบเขตของ CSS: การเจาะลึกการนำ Style Encapsulation ไปใช้งาน

ในการพัฒนาเว็บสมัยใหม่ การจัดการสไตล์ CSS อย่างมีประสิทธิภาพเป็นสิ่งสำคัญอย่างยิ่งสำหรับการสร้างแอปพลิเคชันที่สามารถบำรุงรักษาและขยายขนาดได้ เมื่อโปรเจกต์มีความซับซ้อนมากขึ้น ความเสี่ยงของข้อขัดแย้งใน CSS และการเขียนทับสไตล์โดยไม่ตั้งใจก็เพิ่มขึ้นอย่างมาก กฎขอบเขตของ CSS (CSS scope rule) พร้อมด้วยเทคนิคการห่อหุ้มสไตล์ (style encapsulation) ต่างๆ ได้มอบวิธีแก้ปัญหาสำหรับความท้าทายเหล่านี้ คู่มือฉบับสมบูรณ์นี้จะสำรวจแนวคิดของขอบเขต CSS แนวทางการนำไปใช้งานในรูปแบบต่างๆ และแนวทางปฏิบัติที่ดีที่สุดเพื่อให้ได้การห่อหุ้มสไตล์ที่มีประสิทธิภาพ

ทำความเข้าใจเกี่ยวกับขอบเขตของ CSS

ขอบเขตของ CSS (CSS scope) หมายถึงความสามารถในการจำกัดผลกระทบของกฎ CSS ให้มีผลเฉพาะกับส่วนที่ต้องการของหน้าเว็บ หากไม่มีการกำหนดขอบเขตที่เหมาะสม สไตล์ที่กำหนดไว้ในส่วนหนึ่งของแอปพลิเคชันอาจส่งผลกระทบต่อส่วนอื่นๆ โดยไม่ได้ตั้งใจ นำไปสู่ความไม่สอดคล้องทางภาพที่ไม่คาดคิดและฝันร้ายในการดีบัก เนื่องจากธรรมชาติของ CSS ที่เป็นแบบโกลบอล (global) หมายความว่ากฎสไตล์ใดๆ ที่ประกาศไว้ โดยค่าเริ่มต้นจะถูกนำไปใช้กับทุกองค์ประกอบที่ตรงกันบนหน้าเว็บ โดยไม่คำนึงถึงตำแหน่งหรือบริบทของมัน

ปัญหาของ CSS แบบโกลบอล

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

นี่คือตัวอย่างง่ายๆ เพื่อแสดงให้เห็นถึงปัญหา:

/* สไตล์ของคอมโพเนนต์ A */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
}

/* สไตล์ของคอมโพเนนต์ B */
.button {
  background-color: green;
  color: black;
  padding: 12px 24px;
}

ในกรณีนี้ สไตล์ที่กำหนดสำหรับ .button ในคอมโพเนนต์ B จะเขียนทับสไตล์ที่กำหนดในคอมโพเนนต์ A ซึ่งอาจทำให้รูปลักษณ์ของปุ่มในคอมโพเนนต์ A เสียหายได้

เทคนิคในการกำหนดขอบเขต CSS

มีเทคนิคหลายอย่างที่สามารถใช้เพื่อกำหนดขอบเขต CSS และห่อหุ้มสไตล์ได้อย่างมีประสิทธิภาพ ซึ่งรวมถึง:

• ข้อตกลงในการตั้งชื่อ CSS (BEM, SMACSS, OOCSS): ระเบียบวิธีเหล่านี้ให้แนวทางในการตั้งชื่อคลาส CSS ในลักษณะที่สะท้อนถึงโครงสร้างและวัตถุประสงค์ ซึ่งช่วยลดโอกาสที่จะเกิดการชนกันของชื่อ
• CSS Modules: CSS Modules จะสร้างชื่อคลาสที่ไม่ซ้ำกันโดยอัตโนมัติสำหรับแต่ละไฟล์ CSS เพื่อให้แน่ใจว่าสไตล์จะถูกจำกัดขอบเขตอยู่ภายในคอมโพเนนต์ที่เป็นเจ้าของ
• Shadow DOM: Shadow DOM เป็นวิธีการห่อหุ้มสไตล์ไว้ภายในเว็บคอมโพเนนต์ เพื่อป้องกันไม่ให้สไตล์รั่วไหลออกไปและส่งผลกระทบต่อส่วนที่เหลือของหน้า
• CSS-in-JS: ไลบรารี CSS-in-JS ช่วยให้คุณสามารถเขียนสไตล์ CSS ได้โดยตรงในโค้ด JavaScript ของคุณ ซึ่งมักจะมีกลไกการกำหนดขอบเขตในตัว

ข้อตกลงในการตั้งชื่อ CSS

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

• BEM (Block, Element, Modifier): BEM เป็นข้อตกลงในการตั้งชื่อที่ได้รับความนิยม ซึ่งเน้นความเป็นโมดูลและความสามารถในการนำกลับมาใช้ใหม่ของคลาส CSS ประกอบด้วยสามส่วน: บล็อก (คอมโพเนนต์อิสระ), อิลิเมนต์ (ส่วนหนึ่งของบล็อก), และโมดิฟายเออร์ (รูปแบบที่แตกต่างของบล็อกหรืออิลิเมนต์)
• SMACSS (Scalable and Modular Architecture for CSS): SMACSS แบ่งประเภทกฎ CSS ออกเป็นประเภทต่างๆ เช่น กฎพื้นฐาน, กฎเลย์เอาต์, กฎโมดูล, กฎสถานะ และกฎธีม ซึ่งแต่ละประเภทมีข้อตกลงในการตั้งชื่อของตัวเอง
• OOCSS (Object-Oriented CSS): OOCSS มุ่งเน้นไปที่การสร้างอ็อบเจกต์ CSS ที่สามารถนำกลับมาใช้ใหม่ได้ ซึ่งสามารถนำไปใช้กับองค์ประกอบหลายอย่างได้ ส่งเสริมการแยกโครงสร้างและรูปลักษณ์ออกจากกัน ทำให้คุณสามารถเปลี่ยนรูปลักษณ์ของอ็อบเจกต์ได้โดยไม่ส่งผลกระทบต่อโครงสร้างพื้นฐาน

ตัวอย่าง BEM

นี่คือตัวอย่างการใช้ BEM เพื่อตั้งชื่อคลาส CSS สำหรับคอมโพเนนต์ปุ่ม:

/* บล็อก: button */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
}

/* อิลิเมนต์: button__label */
.button__label {
  font-size: 16px;
}

/* โมดิฟายเออร์: button--primary */
.button--primary {
  background-color: green;
}

ในตัวอย่างนี้ .button คือบล็อก, .button__label คืออิลิเมนต์ภายในปุ่ม, และ .button--primary คือโมดิฟายเออร์ที่เปลี่ยนรูปลักษณ์ของปุ่ม

ข้อดี:

• นำไปใช้งานได้ค่อนข้างง่าย
• ปรับปรุงการจัดระเบียบและความสามารถในการอ่านของ CSS

ข้อเสีย:

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

CSS Modules

CSS Modules เป็นระบบที่สร้างชื่อคลาสที่ไม่ซ้ำกันโดยอัตโนมัติสำหรับแต่ละไฟล์ CSS สิ่งนี้ช่วยให้แน่ใจว่าสไตล์จะถูกจำกัดขอบเขตอยู่ภายในคอมโพเนนต์ที่เป็นเจ้าของ ป้องกันการชนกันของชื่อและการเขียนทับสไตล์โดยไม่ได้ตั้งใจ โดยทั่วไป CSS Modules จะใช้ร่วมกับเครื่องมือบิลด์ (build tools) เช่น Webpack หรือ Parcel

ตัวอย่าง

พิจารณาคอมโพเนนต์ที่มีไฟล์ CSS ต่อไปนี้ (Button.module.css):

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
}

เมื่อไฟล์ CSS นี้ถูกประมวลผลโดยเครื่องมือบิลด์ที่รองรับ CSS Modules มันจะสร้างชื่อคลาสที่ไม่ซ้ำกันสำหรับ .button ตัวอย่างเช่น ชื่อคลาสอาจถูกแปลงเป็น _Button_button_12345 จากนั้นคอมโพเนนต์สามารถนำเข้าไฟล์ CSS และใช้ชื่อคลาสที่สร้างขึ้น:

import styles from './Button.module.css';

function Button() {
  return Click me;
}

ข้อดี:

• กำจัดปัญหาการชนกันของชื่อใน CSS
• ห่อหุ้มสไตล์ไว้ภายในคอมโพเนนต์
• สามารถใช้กับไวยากรณ์ CSS ที่มีอยู่ได้

ข้อเสีย:

• ต้องใช้เครื่องมือบิลด์เพื่อประมวลผล CSS Modules
• อาจทำให้การดีบักยากขึ้นเนื่องจากชื่อคลาสที่ถูกสร้างขึ้น (แม้ว่าเครื่องมือบิลด์มักจะให้ source maps มาด้วย)

Shadow DOM

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

ตัวอย่าง

class MyComponent extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });

    const wrapper = document.createElement('div');
    wrapper.setAttribute('class', 'wrapper');

    const style = document.createElement('style');
    style.textContent = `
      .wrapper {
        background-color: #f0f0f0;
        padding: 20px;
      }
      p {
        color: red;
      }
    `;

    const p = document.createElement('p');
    p.textContent = 'This is a paragraph inside the shadow DOM.';

    wrapper.appendChild(p);
    shadow.appendChild(style);
    shadow.appendChild(wrapper);
  }
}

customElements.define('my-component', MyComponent);

ในตัวอย่างนี้ สไตล์ที่กำหนดภายในองค์ประกอบ <style> จะถูกจำกัดขอบเขตอยู่ภายใน Shadow DOM ขององค์ประกอบ <my-component> สไตล์ใดๆ ที่กำหนดไว้นอก Shadow DOM จะไม่ส่งผลกระทบต่อองค์ประกอบภายใน Shadow DOM และในทางกลับกัน

ข้อดี:

• ให้การห่อหุ้มสไตล์ที่แข็งแกร่ง
• ป้องกันข้อขัดแย้งของ CSS และการเขียนทับสไตล์โดยไม่ได้ตั้งใจ
• เป็นส่วนหนึ่งของมาตรฐานเว็บ และรองรับโดยเบราว์เซอร์สมัยใหม่

ข้อเสีย:

• อาจมีความซับซ้อนในการนำไปใช้มากกว่าเทคนิคอื่นๆ
• ต้องพิจารณาอย่างรอบคอบเกี่ยวกับวิธีการสื่อสารระหว่าง Shadow DOM และ DOM หลัก (เช่น การใช้ custom events หรือ properties)
• ไม่รองรับอย่างเต็มที่ในเบราว์เซอร์รุ่นเก่า (ต้องใช้ polyfills)

CSS-in-JS

CSS-in-JS หมายถึงเทคนิคที่สไตล์ CSS ถูกเขียนโดยตรงในโค้ด JavaScript ไลบรารี CSS-in-JS มักจะมีกลไกการกำหนดขอบเขตในตัว เช่น การสร้างชื่อคลาสที่ไม่ซ้ำกัน หรือการใช้สไตล์แบบอินไลน์ เพื่อให้แน่ใจว่าสไตล์จะถูกห่อหุ้มไว้ภายในคอมโพเนนต์ ไลบรารี CSS-in-JS ที่ได้รับความนิยม ได้แก่ Styled Components, Emotion และ JSS

ตัวอย่าง Styled Components

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  font-size: 16px;

  &:hover {
    background-color: darkblue;
  }
`;

function MyComponent() {
  return Click me;
}

ในตัวอย่างนี้ ฟังก์ชัน styled.button จะสร้างคอมโพเนนต์ปุ่มที่มีสไตล์ตามที่ระบุ Styled Components จะสร้างชื่อคลาสที่ไม่ซ้ำกันสำหรับคอมโพเนนต์โดยอัตโนมัติ เพื่อให้แน่ใจว่าสไตล์ของมันจะถูกจำกัดขอบเขตอยู่เฉพาะในคอมโพเนนต์นั้นเท่านั้น

ข้อดี:

• ให้การห่อหุ้มสไตล์ที่แข็งแกร่ง
• ช่วยให้คุณสามารถใช้ตรรกะของ JavaScript เพื่อสร้างสไตล์แบบไดนามิกได้
• มักจะมีฟีเจอร์ต่างๆ เช่น theming และการประกอบคอมโพเนนต์ (component composition)

ข้อเสีย:

• อาจเพิ่มความซับซ้อนให้กับโค้ดเบสของคุณ
• อาจต้องใช้เวลาเรียนรู้เพื่อทำความเข้าใจ API ของไลบรารี
• อาจมีภาระงานขณะรันไทม์ (runtime overhead) เนื่องจากการสร้างสไตล์แบบไดนามิก
• อาจเป็นที่ถกเถียงกันเนื่องจากเป็นการทำลายหลักการแยกส่วน (separation of concerns) ระหว่าง HTML, CSS และ JavaScript

การเลือกแนวทางที่เหมาะสม

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

• ขนาดและความซับซ้อนของโปรเจกต์: สำหรับโปรเจกต์ขนาดเล็ก ข้อตกลงในการตั้งชื่อ CSS อาจเพียงพอ สำหรับโปรเจกต์ขนาดใหญ่และซับซ้อนมากขึ้น CSS Modules, Shadow DOM หรือ CSS-in-JS อาจเหมาะสมกว่า
• ขนาดและประสบการณ์ของทีม: หากทีมของคุณคุ้นเคยกับเทคโนโลยีบางอย่างอยู่แล้ว (เช่น React) อาจง่ายกว่าที่จะใช้ไลบรารี CSS-in-JS ที่ทำงานร่วมกับเทคโนโลยีนั้นได้ดี
• ข้อควรพิจารณาด้านประสิทธิภาพ: CSS-in-JS อาจมีภาระงานขณะรันไทม์ ดังนั้นจึงเป็นสิ่งสำคัญที่ต้องพิจารณาถึงผลกระทบด้านประสิทธิภาพของการใช้แนวทางนี้
• ความเข้ากันได้ของเบราว์เซอร์: Shadow DOM ไม่รองรับอย่างเต็มที่ในเบราว์เซอร์รุ่นเก่า ดังนั้นคุณอาจต้องใช้ polyfills เพื่อให้แน่ใจว่าเข้ากันได้
• ความชอบส่วนบุคคล: นักพัฒนาบางคนชอบความเรียบง่ายของข้อตกลงในการตั้งชื่อ CSS ในขณะที่คนอื่นๆ ชอบความยืดหยุ่นและพลังของ CSS-in-JS

นี่คือตารางสรุปโดยย่อ:

เทคนิค	ข้อดี	ข้อเสีย
ข้อตกลงในการตั้งชื่อ CSS	เรียบง่าย, ปรับปรุงการจัดระเบียบ	ต้องมีวินัย, อาจไม่สามารถป้องกันการชนกันได้ทั้งหมด
CSS Modules	กำจัดการชนกัน, ห่อหุ้มสไตล์	ต้องใช้เครื่องมือบิลด์, การดีบักอาจยากขึ้น
Shadow DOM	การห่อหุ้มที่แข็งแกร่ง, เป็นส่วนหนึ่งของมาตรฐานเว็บ	ซับซ้อนกว่า, ต้องการการสื่อสารที่รอบคอบ
CSS-in-JS	การห่อหุ้มที่แข็งแกร่ง, สไตล์แบบไดนามิก	เพิ่มความซับซ้อน, มีภาระงานขณะรันไทม์, ประเด็นเรื่องการแยกส่วน

แนวทางปฏิบัติที่ดีที่สุดสำหรับขอบเขต CSS

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

• ใช้ข้อตกลงในการตั้งชื่อที่สอดคล้องกัน: เลือกข้อตกลงในการตั้งชื่อ CSS (เช่น BEM, SMACSS, OOCSS) และปฏิบัติตามอย่างสม่ำเสมอตลอดทั้งโปรเจกต์
• หลีกเลี่ยงการใช้ชื่อคลาสทั่วไป: ใช้ชื่อคลาสที่เฉพาะเจาะจงซึ่งสะท้อนถึงวัตถุประสงค์และบริบทขององค์ประกอบ หลีกเลี่ยงการใช้ชื่อทั่วไปเช่น .button, .title, หรือ .container เว้นแต่คุณจะใช้กลไกการกำหนดขอบเขตที่ป้องกันการชนกัน
• ลดการใช้ !important: การประกาศ !important อาจทำให้การเขียนทับสไตล์เป็นเรื่องยากและอาจนำไปสู่พฤติกรรมที่ไม่คาดคิด หลีกเลี่ยงการใช้ !important เว้นแต่จะจำเป็นจริงๆ
• ใช้ความเฉพาะเจาะจงอย่างชาญฉลาด: คำนึงถึงความเฉพาะเจาะจงของ CSS (CSS specificity) เมื่อเขียนกฎสไตล์ หลีกเลี่ยงการใช้ตัวเลือก (selector) ที่เฉพาะเจาะจงเกินไป เพราะอาจทำให้การเขียนทับสไตล์เป็นเรื่องยาก
• จัดระเบียบไฟล์ CSS ของคุณ: จัดระเบียบไฟล์ CSS ของคุณในลักษณะที่สมเหตุสมผลสำหรับโปรเจกต์ของคุณ พิจารณาใช้แนวทางแบบโมดูล โดยแต่ละคอมโพเนนต์มีไฟล์ CSS ของตัวเอง
• ใช้ CSS preprocessor: CSS preprocessor เช่น Sass หรือ Less สามารถช่วยให้คุณเขียน CSS ที่บำรุงรักษาและขยายขนาดได้ง่ายขึ้น โดยมีฟีเจอร์ต่างๆ เช่น ตัวแปร, mixins และการซ้อน (nesting)
• ทดสอบ CSS ของคุณอย่างละเอียด: ทดสอบ CSS ของคุณบนเบราว์เซอร์และอุปกรณ์ต่างๆ เพื่อให้แน่ใจว่ามันดูสอดคล้องกันในทุกแพลตฟอร์ม
• จัดทำเอกสาร CSS ของคุณ: จัดทำเอกสารโค้ด CSS ของคุณเพื่ออธิบายวัตถุประสงค์ของแต่ละกฎสไตล์และวิธีการใช้งาน

ตัวอย่างจากทั่วโลก

วัฒนธรรมและแนวโน้มการออกแบบที่แตกต่างกันสามารถมีอิทธิพลต่อวิธีการใช้และกำหนดขอบเขต CSS ในการพัฒนาเว็บ นี่คือตัวอย่างบางส่วน:

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

บทสรุป

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

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