EMMET – Hỗ trợ viết tắt nhanh & gọn cho Developer

Điểm bài viết
[Tổng cộng: 0 Trung bình: 0]

Share vì hữu ích

Nếu bạn muốn viết ít hơn mà vẫn được việc, EMMET là một lựa chọn không tồi để học và làm theo nhằm giúp bạn viết nhanh siêu tốc code.

EMMET là gì?

EMMET là bộ phím tắt, quy tắc và các phím tắt nhằm giảm tối thiểu thời gian của các lập trình viên trong quá trình viết code. EMMET có thể có sẵn trên các code editor như PhpStorm hoặc bạn cần cài plugin.

Để hình dung rõ hơn, ví dụ ta có đoạn code sau:

<div id="page">
 <div class="logo"></div>
 <ul id="navigation">
   <li><a href="">Item 1</a></li>
   <li><a href="">Item 2</a></li>
   <li><a href="">Item 3</a></li>
   <li><a href="">Item 4</a></li>
   <li><a href="">Item 5</a></li>
 </ul>
</div>

Khi sử dụng EMMET, ta chỉ cần nhập dòng sau trong code và gõ “Tab” là markup hiện ra:

#page>div.logo+ul#navigation>li*5>a{Item $}

Sử dụng EMMET trong markup HTML

Mối quan hệ cha-con giữa các Element

Các thẻ thông thường được viết trong ngoặc <tag>..</tag> như thế này, ví dụ <p></p>

Trong EMMET sẽ tối giản chỉ còn tên của thẻ. VD: a hoặc div, và các ký tự phải viết liền nhau.

Mối quan hệ giữa các element

Sử dụng dấu > để tạo element theo mối quan hệ cha-con

VD: body>div>ul>li>p

được hiểu là:

  • body chứa div
  • div chứa ul
  • ul chứa li
  • li chứa p

Sử dụng dấu ^ để tìm lại cha của element

VD: body>div>ul>li>p^^^p khi thêm vào sẽ được hiểu là từ p tìm ngược lại 3 cấp chính là thẻ : div, sau đó thêm thẻ p cùng cấp với thẻ div

<body>
  <div>
    <ul>
      <li>
        <p></p>
      </li>
  </div>
  <p></p>
</body>

Sử dụng dấu + để tìm element cùng cấp

Ví dụ: div>p+span được hiểu là thẻ p và span cùng cấp với nhau, đi liền với nhau theo thứ tự.

Sử dụng dấu () để nhóm các element

Thẻ được nhóm bên trong () logic sẽ được ưu tiên, do vậy khi sử dụng các dấu logic bên ngoài sẽ tương tác với nhóm thẻ đó chứ không phải chỉ một thẻ trong nhóm.

Ví dụ 1: (div>ul>li*2+p) sẽ cho kết quả output là

<div>
 <ul>
   <li></li>
   <p></p>
   <li></li>
   <p></p>
 </ul>
</div>

Ví dụ 2: (div>ul>li*2)+p sẽ cho kết quả output là

<div>
 <ul>
   <li></li>
   <li></li>
 </ul>
</div>
<p></p>

Tỷ lệ lặp lại của element

Sử dụng dấu * để hiển thị số item được copy ra, ví dụ li*3 sẽ output ra là:

<li></li>
<li></li>
<li></li>

Kết hợp với dấu () ở trên thì ta sẽ tạo ra 3 nhóm, ví dụ: (p>span)*3 sẽ output ra là:

<p><span></span></p>
<p><span></span></p>
<p><span></span></p>

Thêm các thuộc tính classid cho element

Để thêm class, bạn thêm .tên_class vào ngay sau element.

Ví dụ: div.hero

Để thêm id, bạn thêm #tên_id vào ngay sau element.

Ví dụ: ul#menu

Lưu ý: Nếu chỉ viết .class-name hay #id-name thì EMMET tự mặc định thẻ chứa class/id phụ thuộc vào thẻ cha bên ngoài. Thẻ cha là <ul> thì thẻ chứa class/id là <li>, thẻ cha là <div> thì thẻ con là </div>

Thêm các thuộc tính, ví dụ data-attribute cho element

Các thuộc tính khác viết trong ký tự ngoặc vuông [], nội dung text của thẻ được viết trong {}

Ví dụ 1:

td[title="Hello world!" colspan=3]

sẽ hiển thị ra là:

<td title="Hello world!" colspan="3"></td>

Ví dụ 2:

a>{click}+b{here}

sẽ hiển thị ra là:

<a href="">click<b>here</b></a>

Tạo data mẫu sử dụng Lorem ipsum

Bạn có thể nhập p*2>lorem hoặc p*2>lipsum sẽ có đoạn code như sau:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Qui dicta minus molestiae vel beatae natus eveniet ratione 
temporibus aperiam harum alias officiis assumenda officia 
quibusdam deleniti eos cupiditate dolore doloribus!</p>
<p>Ad dolore dignissimos asperiores dicta facere optio quod 
commodi nam tempore recusandae. Rerum sed nulla eum vero 
expedita ex delectus voluptates rem at neque quos facere sequi 
unde optio aliquam!</p>

Sử dụng EMMET trong code CSS

Khác với markup HTML, trong CSS EMMET cho phép ta viết tắt ít hơn. Dưới đây là những thứ bạn nên sử dụng để viết code CSS nhanh hơn:

Ví dụ:

Bạn gõ mt50 để output ra margin-top: 50px

Với giá nhiều trị âm thì nhập m-10ex--5ex sẽ output ra là margin: -10ex -5ex

Với các giá trị bình thường thì có thể nhập p10-20 sẽ output ra là padding: 10px 20px

Các ví dụ khác:

w100p sẽ output ra: width: 100%

fw500 sẽ output ra: font-weight: 500

bd5#0s sẽ output ra border: 5px #000 solid

c#f sẽ output ra color: #fff

lh2 sẽ output ra line-height: 2

fs#i! sẽ output ra font-style: italic !important

bg#f sẽ output ra background: #fff

Kết luận

Nếu bạn vẫn đang nhập tay nhiều, hãy tới lúc thay đổi! EMMET giúp bạn lười nhưng hợp lý, tiết kiệm và quen tay thì lại càng thấy ích lợi đấy nhé!

 

Tài liệu tham khảo

Share vì hữu ích

Previous Article
Next Article
avatar
  Subscribe  
Notify of