เครื่องจัดรูปแบบ CSS

ก่อนและหลัง

อินพุต (ย่อขนาด):

.btn{background:#2563eb;color:#fff;padding:.5rem 1rem;border-radius:6px}.btn:hover{background:#1d4ed8}

ผลลัพธ์ (จัดรูปแบบแล้ว):

.btn {
  background: #2563eb;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 6px;
}

.btn:hover {
  background: #1d4ed8;
}

เครื่องมือทำอะไร

เครื่องมือลบอะไร

/* คอมเมนต์นี้จะหายไปเมื่อคุณจัดรูปแบบ */
.button { background: #2563eb; }

คอมเมนต์แบบบล็อก (/* ... */) ถูกลบออกจากผลลัพธ์ หากต้องการเก็บไว้ ให้สำเนาไฟล์ต้นฉบับไว้ก่อนจัดรูปแบบ

การจัดการกฎซ้อน (Sass / การซ้อน CSS สมัยใหม่)

เครื่องจัดรูปแบบเยื้องกฎที่ซ้อนกันตามความลึกของมัน:

.card {
  padding: 1rem;

  & .title {
    font-weight: 600;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}

รองรับไวยากรณ์ Sass/Less (ไม่มี &) ด้วย at-rule เฉพาะของ Sass อย่าง @mixin, @include และ @extend ผ่านไปคงเดิมแต่ไม่จัดรูปแบบลึก สำหรับการจัดรูปแบบ Sass เต็มรูปแบบ ใช้เครื่องมือที่เข้าใจ Sass อย่าง Prettier

เมื่อใดไม่ควรจัดรูปแบบ

• ใน production: ย่อขนาด อย่าจัดรูปแบบ CSS ที่จัดรูปแบบใหญ่กว่าที่ย่อขนาด 2-3 เท่า
• ก่อน diff: จัดรูปแบบทั้งสองฝั่ง การ diff ไฟล์ที่ย่อขนาดกับไฟล์ที่จัดรูปแบบสวยงามให้ diff ที่อ่านไม่ได้
• ภายในไปป์ไลน์ build: ให้ Prettier หรือเครื่องจัดรูปแบบของเฟรมเวิร์กดูแลความสม่ำเสมอ ใช้เครื่องมือนี้สำหรับการล้างครั้งเดียว