Emmet là gì? Tại sao nên sử dụng nó trong HTML và CSS?

anon10709737 · October 2, 2018, 1:14pm

Mình dám cá rằng bạn nào làm front-end chắc hẳn sẽ rất đau đầu, mệt mỏi thậm chí chán nản khi phải viết các dòng code HTML dài ngoằng. HTML là một trong những thứ cản trở công việc nhất và luôn luôn phải viết thêm cả CSS còn cực nữa. Vậy thì ngày hôm nay mình sẽ giới thiệu chiếc đũa thần kì của HTML mang tên: emmet.

Emmet là cái chi chi?

Emmet là một công cụ rất cần thiết cho front-end dev nói riêng và web-dev nói chung. Emmet là một plugin hay được sử dụng đến trong các text-editor nổi tiếng như VS Code, Atom, Bracket, Sublime,…

Emmet nhằm giúp tối giản thời gian viết HTML và CSS bằng cách viết các kí tự đặc biệt rồi sau đó nhấn hoặc tùy config sẽ tự ra HTML hoặc CSS code như ý bạn. Cuộc đời bạn không còn vất vả nhiều như trước đây khi sử dụng emmet.

Nghe bắt đầu thấy háo hức phải không? Chúng ta bắt đầu xem emmet có những cái gì nhé?

Các kí hiệu cơ bản

Trước khi xem những phần dưới thì hãy nhớ kiểm tra xem Text editor của mình đã cài emmet chưa?(Ai xài VS Code thì khỏi cần phải kiểm tra vì nó thực sự cài sẵn rồi). Nếu emmet của bạn chưa được cài vào thì có thể vô link Download emmet.

Elements

Bình thường khi viết một element trong HTML thì chúng ta thường viết:

<div></div>
<a></a>

Nhưng emmet có thể rút gọn việc khai báo chúng bằng cách gõ tên của các thẻ cần lấy sau đó nhấn <Tab> thì nó cũng ra tương tự như trên

Nesting operators

Nesting operators được dùng để sắp xếp các elements theo một cấu trúc: Nó nên nằm ở trong element này hay là đứng cạnh element kia.

Child: >

Bạn có thể sử dụng kí hiệu > để đặt một element nằm trong một element khác:

div>ul>li

khi nhấn <Tab> sẽ ra:

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

Sibling: +

Kí hiệu + dùng để đặt một element ở phía cạnh của một elements khác.

div+p+a

sẽ ra:

<div></div>
<p></p>
<a></a>

Climb-up: ^

Kết hợp cả hai > và + như nói trên sẽ bố trí được vị trí các element sao cho hợp lí:

div+div>p>span+a

sẽ ra:

<div></div>
<div>
    <p><span></span><a></a></p>
</div>

Khác với 2 cái trên, kí hiệu ^ dùng để đặt các element “trèo lên” một bậc cao hơn(từ con leo lên mẹ):

div+div>p>span+em^bq

sẽ ra:

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

Bạn có thể sử dụng chúng bao nhiêu tùy ý, có bao nhiêu ^ thì sẽ nhảy lên bấy nhiều bậc:

div+div>p>span+em^^^bq

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

Multiplication: *

Kí hiệu * để có thể nhân lên bao element với lượng nhất định:

ul>li*5

kết quả:

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

Grouping: ()

Sử dụng dấu ngoặc đơn để gộp element theo một nhóm:

div>(header>ul>li*2>a)+footer>p

kết quả:

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

bạn có thể nhân lên (*) với một group như:

(div>dl>(dt+dd)*3)+footer>p

sẽ cho:

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

Attributes trong emmet

Attributes(tạm hiểu là 2 thuộc tính id và class). Trong emmet bạn đỡ phải tốn công viết và đặt tên cho các thuộc tính id và class.

Như CSS, # để chỉ là id và . để chỉ là class. Trong emmet gần tương tự như thế:

div#header+div.page+div#footer.class1.class2.class3

cho ra:

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

Custom attributes

Như css, hai dấu ngoặc vuông [] để add các attributes vào element:

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

kết quả:

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

Item numbering: $

Đây có lẽ là phần hay nhất và tiện nhất trong emmet. Nhờ $ khi đặt tên id hay tên class mà mỗi cái lần lượt chứa các số theo thứ tự tăng dần như 1, 2, 3, 4, .etc:

ul>li.item$*5

output:

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

Hay có thể theo thứ tự giảm dần(sử dụng @-):

ul>li.item$@-*5

sẽ ra:

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

hay có thể set số đếm với số nào đó khác 1 thì sử dụng @N tới $:

ul>li.item$@3*5

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

Hay có thể giảm dần cũng được:

ul>li.item$@-3*5

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

Text: {}

Sử dụng {} để chèn nội dung vào một elements

Các ví dụ:

a{Click me}

<!-- a{Click me}-->
<a href="">Click me</a>

<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>

<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

<!-- p>{Click }+a{here}+{ to continue} -->
<p>Click <a href="">here</a> to continue</p>

<!-- p{Click }+a{here}+{ to continue} -->
<p>Click </p>
<a href="">here</a> to continue

Conclusion

Bài viết cũng đã dài, chắc các bạn cũng ngộp rồi nhỉ? @_@! Nếu thấy emmet hay sao không thử áp dụng nó ngay trong công việc? Biết đâu nó giúp project nhanh chóng sớm hơn deadline để sếp không bị chửi hay để làm cho bạn bè, đồng nghiệp thấy ngầu hơn khi code . Nếu thấy bài này hay có thể chia sẻ cho các cộng đồng dev cùng biết để chúng ta có thể học tập thêm một thứ rất hay ho