Viết HTML và CSS nhanh hơn với Emmet

Là một web developer thì việc tìm kiếm một công cụ hỗ trợ cho công việc thiết kế website một canh nhanh chóng và thuận tiện là một điều không thể thiếu.

Hôm nay, Vietbest sẽ  giới thiệu với các bạn một công cụ hỗ trợ viết HTML và CSS rất tốt và tiện lợi để các bạn tiết kiệm được nhiều thời gian hơn trong công việc của mình – đó là công cụ Emmet. Emmet là một một phiên bản phát triển lên cao hơn của ZenCoding và được viết hoàn toàn bằng JavaScript. Trong Emmet cũng đã tích hợp thêm các trình biên tập giống như Textmate, Coda, Notepad++, Eclipse và Adobe Dreamweaver.

Cài đặt Emmet

Bạn có thể vào đây để download Emmet về máy tính của bạn. Có rất nhiều lựa chọn cho bạn ở trong mục download đó. Sau khi download xong thì tiến hành cài đặt bình thường.

Soạn thảo HTML với Emmet.

Trình biên dịch của Emmet cũng khá giống với một số công cụ khác hiện nay. Ví dụ, trong khi lập trình thì bạn chỉ cần gõ <ul> sau đó ấn tab một lần thì sẽ tự động sinh ra code <li> một cách nhanh chóng cho bạn.

Hoặc khi bạn viết một thẻ div với class thì đơn giản bạn chỉ cần div.class là Ok.

Tất nhiên, với chức năng này thì bạn cần nắm rõ css để có thể thuận tiện hơn khi thực hiện thao tác viết code.

Child Element

Trong Emment thì bạn có thể sử dụng cú pháp thông thường của css như mình đã đề cập phía trên. Ngoài ra, một cách nhanh chóng để thêm các thành phần con vào cú pháp thì bạn chỉ cần sử dụng toán tử “>”. Như ví dụ dưới đây:

Sibling Element

Bạn cũng có thể dễ dàng viết thành phần ngang hàng nhau trong Emmet bằng dấu “+”. Ví dụ đơn giản:

ID và Class

Chúng ta có thể nhanh chóng chọn id cho một phần tử bằng dấu “#”, và class sẽ là dấu “.”  Cấu trúc này cũng có thể áp dụng khi bạn viết thẻ div sẽ rất nhanh chóng.

Với Emmet thì mặc định khi bạn viết như ví dụ trên thì sẽ cho ra thẻ div còn nếu bạn muốn cụ thể hơn thì bạn chỉ cần bổ sung thêm các tiền tố vào cú pháp mà thôi.

Đặc biệt, bạn có thể gán nhiều class vào một element một cách đơn giản với Emmet.

Gán thuộc tính

Khi soạn thảo css bằng Emmet thì bạn có thể dễ dàng thêm thuộc tính vào một element chỉ bằng thao tác đóng mở ngoặc vuông rất nhanh chóng.

Multiplication

Emmet cho phép bạn thêm các thành phần HTML một cách nhanh chóng tùy theo số lượng chỉ cần sử dụng dấu “*” và số lượng cụ thể bạn muốn thêm vào. Ví dụ:

Tài liệu HTML cơ bản

Chúng ta có thể đưa cấu trúc cơ bản của một văn bản HTML ra trong Emmet một cách nhanh chóng. Trong ví dụ đó là khi chúng ta muốn sinh cấu trúc văn bản HTML 5.

Tất nhiên công cụ Emmet vẫn còn rất nhiều tính năng nổi trội và hỗ trợ rất tốt cho những nhà thiết kế website. Bạn sẽ cần thêm chút thời gian để làm quen và khai thác một cách tốt nhất hiệu năng của công cụ này.

Chúc các bạn thành công trong công việc của mình!

http://www.ddth.com/showthread.php/1204003-Thi%E1%BA%BFt-k%E1%BA%BF-website-%E2%80%93-thi%E1%BA%BFt-k%E1%BA%BF-trang-Contact-Us?p=4095480#post4095480