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à:
bodychứadivdivchứaululchứalilichứap
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 class và id 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
Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.
