Để viết code HTML, CSS nhanh, hãy sử dụng Zen Coding. Tuy nhiên, đó đã là câu chuyện của quá khứ, còn bây giờ thì phải là Emmet! Emmet là gì mà “ghê gớm” như vậy?! Hãy cùng MyLớp.edu.vn tìm hiểu về Emmet nha các bạn!
Giới thiệu Emmet
Thực ra Emmet chính là Zen Coding trước đây, một plugin giúp các lập trình viên viết code HTML, CSS cực kỳ nhanh chóng, dễ dàng. Dự án này được khởi tạo bởi Vadim Makeev vào năm 2008 và tiếp tục được phát triển thành Emmet sau đó bởi Sergey Chikuyonok.
Emmet là một plugin được dùng cho nhiều trình biên tập code phổ biến để tăng tốc gõ code HTML và CSS. Các phần mềm biên tập code như Dreamweaver, Sublime Text, Notepad++,… đã có tính năng tự hoàn thành code rất tốt, tuy nhiên việc dùng Emmet lại ở một đẳng cấp khác!
Tạo tài liệu HTML5 nhanh chóng
Để tạo ra một tài liệu HTML5 mẫu, bạn chỉ cần gõ
!
hoặc html:5
rồi nhấn phím Tab, vậy là xong!Cú pháp rút gọn
Để tạo cặp đóng mở cho các thẻ HTML, đơn giản bạn chỉ việc gõ tên thẻ. Ví dụ, gõ
div
sẽ được:Dễ dàng tạo ID, Class, nội dung và thuộc tính cho các phần tử
Để tạo ID và Class cho các phần tử, bạn chỉ việc gõ
elem#id
hoặc elem.class
Ví dụ, gõ
p#foo
sẽ được:
Hoặc gõ
p.foo
sẽ được:
Bạn cũng có thể trộn lẫn nhiều thuộc tính một lúc. Ví dụ, gõ
p#foo.class1.class2
sẽ được:
Nếu muốn chèn nội dung vào giữa các thẻ, bạn dùng các dấu { và } theo cú pháp
elem{nội dung}
Ví dụ, gõ
p{This is paragraph}
sẽ được:
Hoặc gõ
a{Click here}
sẽ được:
Nếu muốn chèn thuộc tính cho các thẻ, bạn dùng các dấu [ và ] theo cú pháp
elem[thuộc tính = giá trị]
giống như cách mà chúng ta vẫn làm với CSS.
Ví dụ, gõ
a[href="#" title="hot link"]
sẽ được:Nesting – Tạo thứ bậc cho các thẻ HTML
Bằng việc tạo thứ bậc cho các thẻ HTML, bạn có thể tạo một đoạn code phức tạp chỉ với một dòng lệnh. Dưới đây là một số cách tạo thứ bậc hữu ích bạn nên khai thác triệt để.
Child: >
Toán tử
>
giúp ta tạo quan hệ cha con cho các thẻ. Ví dụ, gõ div>ul>li
sẽ được:Sibling: +
Toán tử
+
giúp ta tạo các thẻ có quan hệ ngang hàng với nhau. Ví dụ, gõ div+p+bq
sẽ được:Climb-up: ^
Toán tử
^
giúp ta tạo các thẻ vượt lên vị trí hiện tại 1 cấp. Ví dụ, gõ div+div>p>span+em^bq
sẽ được:
Bạn có thể dùng nhiều toán tử
^
liền nhau để quay lên nhiều cấp.
Ví dụ, gõ
div+div>p>span+em^^bq
sẽ được:Tạo nhóm
Emmet cho phép bạn sử dụng các dấu ( và ) để tạo nhóm cho các cấu trúc HTML phức tạp.
Ví dụ, gõ
(.foo>h1)+(.bar>h2)
sẽ được:Multiplication: *
Toán tử
*
được dùng để tạo ra một loạt các thẻ giống nhau một cách nhanh chóng. Ví dụ nếu bạn muốn tạo ra 3 thẻ <li>
thì chỉ việc gõ ul>li*3
và sẽ được kết quả:
Một ví dụ khác, sau khi gõ
ul.menu>li*3>a[href="#"]
, bạn sẽ được:Item numbering: $
Nếu toán tử
*
giúp ta tạo ra các vòng lặp tự động thì toán tử $
sẽ giúp ta tạo ra chỉ số tăng dần hoặc giảm dần tự động cho các nội dung trong các vòng lặp ấy. Ví dụ khi bạn gõ ul>li.item$*3
sẽ được:
Ví dụ sau sẽ tạo ra 3 thẻ
<p>
có nội dung có chỉ số tăng dần p{This is paragraph $}*3
:
Nếu muốn tạo chỉ số giảm dần, bạn hãy thêm
@-
vào sau $
. Ví dụ, khi gõ ul>li.item$@-*3 sẽ được:
Để thay đổi chỉ số đếm bắt đầu thay vì 1 như mặc định, thêm
(Tiếp tục cập nhật)@N
vào sau $
. Ví dụ, khi gõ ul>li.item$@5*3 sẽ được:Cài đặt Emmet cho các phần mềm
Emmet hỗ trợ rất nhiều các phần mềm biên tập code nổi tiếng và phổ biến ngày nay như Sublime Text, Notepad++, Dreamweaver,… Bạn hãy vào đây để tải về và cài đặt plugin này cho các phần mềm của mình nhé.
Tham khảo:
– Bài viết “Goodbye, Zen Coding. Hello, Emmet!” từ trang smashingmagazine.com
– Emmet trên wikipedia
– Trang chủ của Emmet
Chúc các bạn viết code vui vẻ và hiệu quả với Emmet!
Cheers,
EmoticonEmoticon