คู่มือการแก้ไข CSS สำหรับ Prose

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

ปัญหาที่พบ

• ก่อนหน้านี้มีการตั้งค่าสไตล์โดยตรงใน attribute class เช่น class="prose prose-lg"
• เมื่อกำหนดสไตล์ให้กับ p (เช่น สีตัวอักษร) พบว่าสไตล์นั้นไปเปลี่ยนแปลงข้อความที่อยู่ใน blockquote ด้วย ซึ่งไม่ใช่ผลลัพธ์ที่ต้องการ

ตัวอย่างปัญหา:

<div class="prose">
  <p>ข้อความปกติ</p>
  <blockquote>
    <p>ข้อความที่ควรต่างจากข้อความปกติ</p>
  </blockquote>
</div>

เมื่อเขียน CSS ทั่วไปดังนี้:

.prose p {
  color: black;
}

จะทำให้ข้อความภายใน blockquote เปลี่ยนไปด้วย

แนวทางการแก้ปัญหา

วิธีที่ถูกต้องคือการสร้างคลาสที่เฉพาะเจาะจง (my-prose) เพื่อจำกัดขอบเขตสไตล์ที่เรากำหนด โดยจะไม่ส่งผลกระทบต่อทุกที่ที่ใช้ .prose

ขั้นตอนการแก้ไขที่ถูกต้อง

1. สร้างไฟล์ CSS ใหม่เฉพาะสำหรับ prose

• สร้างไฟล์ใหม่ my-prose.css แล้วกำหนดคลาส .my-prose ให้กับส่วนประกอบของคุณ

/* my-prose.css */
.my-prose {
  @apply prose prose-sm lg:prose-lg max-w-none dark:prose-invert px-4 sm:px-6 md:px-8 lg:px-12;
}

.my-prose p {
  @apply text-black dark:text-white;
}

.my-prose blockquote p {
  @apply text-red-600 dark:text-red-400;
}

การกำหนดคลาสเฉพาะเช่นนี้จะช่วยให้สไตล์ของคุณไม่กระทบกับองค์ประกอบอื่น ๆ ที่ไม่ได้อยู่ใน .my-prose

2. Import CSS ใหม่ใน globals.css เปิดไฟล์ globals.css และเพิ่มบรรทัด import ไฟล์ที่สร้างขึ้นใหม่:

@import "./my-prose.css";

ไฟล์ globals.css ควรมีลักษณะประมาณนี้:

@import "@gohig/tailwind-config/styles.css";
@plugin "@tailwindcss/typography";
@source "../node_modules/@gohig/blog-renderer";
@import "./my-prose.css";

3. ใช้ class ใหม่ใน component React จากเดิมที่ใช้:

<div className="prose prose-lg">
  {...}
</div>

เปลี่ยนเป็น:

<div className="my-prose prose-lg">
  {...}
</div>

ตัวอย่างที่ชัดเจน

<!-- ตัวอย่างที่ดี (my-prose) -->
<div class="my-prose">
  <p>ข้อความปกติสีดำ</p>
  <blockquote>
    <p>ข้อความใน Blockquote สีแดงที่ต่างจากข้อความทั่วไป</p>
  </blockquote>
</div>

ผลลัพธ์ที่ได้

• สไตล์ p ใน .my-prose จะไม่ส่งผลต่อ blockquote โดยไม่ได้ตั้งใจ
• สไตล์ถูกจัดระเบียบและจัดการง่าย
• ไม่เกิด side effects กับองค์ประกอบอื่น ๆ ที่ไม่ได้ตั้งใจให้เปลี่ยน

สรุปข้อควรปฏิบัติในการเขียน CSS

• ไม่ควร กำหนดสไตล์ระดับ global ที่กว้างเกินไป (.prose p)
• ควร จำกัดขอบเขต CSS ด้วย class ที่เจาะจง (.my-prose p)
• ควร แยกไฟล์ CSS อย่างชัดเจนเพื่อให้ง่ายต่อการบำรุงรักษา

---

การปฏิบัติตามขั้นตอนเหล่านี้จะช่วยให้การเขียน CSS มีประสิทธิภาพมากขึ้นและช่วยป้องกันปัญหาในอนาคต