Tạm biệt, Zen Coding Xin chào, Emmet!

23:41

Để 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!
Nào, chúng ta bắt đầu tìm hiểu về Emmet nhé!

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!
initializers

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:
<div></div>

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:
<p id="foo"></p>
Hoặc gõ p.foo sẽ được:
<p class="foo"></p>
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:
<p id="foo" class="class1 class2"></p>
classes-ids
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:
<p>This is paragraph</p>
Hoặc gõ a{Click here} sẽ được:
<a href="">Click here</a>
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:
<a href="#" title="hot link"></a>
texts-attrs

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:
<div>
    <ul>
        <li></li>
    </ul>
</div>

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:
<div></div>
<p></p>
<blockquote></blockquote>

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:
<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>
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:
<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>
nesting

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:
<div class="foo">
  <h1></h1>
</div>
<div class="bar">
  <h2></h2>
</div>
grouping

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ả:
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
multiplication
Một ví dụ khác, sau khi gõ ul.menu>li*3>a[href="#"], bạn sẽ được:
<ul class="menu">
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
</ul>

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$*3sẽ được:
<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>
numbering
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:
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>
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:
<ul>
  <li class="item3"></li>
  <li class="item2"></li>
  <li class="item1"></li>
</ul>
Để thay đổi chỉ số đếm bắt đầu thay vì 1 như mặc định, thêm @N vào sau $. Ví dụ, khi gõ ul>li.item$@5*3 sẽ được:
<ul>
  <li class="item5"></li>
  <li class="item6"></li>
  <li class="item7"></li>
</ul>
(Tiếp tục cập nhật)

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,
Tạm biệt, Zen Coding Xin chào, Emmet! Tạm biệt, Zen Coding Xin chào, Emmet!
910 1

Bài viết Tạm biệt, Zen Coding Xin chào, Emmet!

Chia sẻ bài viết

Cùng Chuyên Mục

Previous
Next Post »