HTML smelly code: div soup

#Day006

Code thối, hay gọi một cách lịch sự, là smell code, là từ dùng để chỉ những đoạn code viết ẩu với phong cách tả pí lù, lôm côm và dễ dẫn tới những vấn đề nghiêm trọng trong quá trình maintain về sau.

Có 10001 cách để viết code thối, với 10001 ngôn ngữ lập trình.

Và cũng không bất ngờ lắm khi mà bạn cũng có thể viết code thối với HTML :)) mà dân gian người ta gọi là Div Soup. Đây là một vấn đề không hề mới.

Vậy code thối trong HTML là gì?

Đằng sau GMail là một đống div soup

(Nguồn: HTML5 Rocks)

Hay nói cách khác, khi bạn viết một layout HTML, mà viết một hồi nhìn lại thấy toàn là div, thì khi đó bạn có một tô div soup.

Thế nào là code HTML không thối?

HTML là công cụ để diễn giải cấu trúc của một trang web, và từng dòng code bạn viết ra đều phải rõ ý rõ nghĩa. Bản thân thẻ div mang tính đại diện cho một ý nghĩa nào cả, nó có mục đích sử dụng chung chung.

Việc lạm dụng quá nhiều div khi viết code HTML dẫn đến layout của bạn thành một đống bùi nhùi, nhìn vào khó theo dõi, khó navigate và khó hình dung ra được chỗ nào làm việc gì.

Và đây là khi mà khái niệm semantics HTML bước lên sân khẩu!

Thay vì viết:

<div class="main-content">
    <div class="header">
        ...
    </div>
    <div class="body">
        <p>...</p>
        <p>...</p>
    </div>
    <div class="footer">
        ...
    </div>
</div>

Chúng ta nên viết lại thành:

<article class="main-content">
    <header>...</header>
    <section class="body">
        <article>
            ...
        </artice>
    </section>
    <footer>...</footer>
</article>

Semantics HTML chỉ có vài tag, không đủ để tui dùng?

Trong trường hợp nhu cầu của bạn cần dùng nhiều hơn là một vài semantics tags có sẵn mà HTML5 cung cấp, thì cách giải quyết sẽ là Custom Element, hoặc nếu bạn dùng React, Vue, thì giải pháp là chia nhỏ template thành nhiều component con, mỗi compment con đều mang một cái tên có một ý nghĩa nhất định.

Thay vì viết như thế này trong React:

// Mình biết có rất nhiều người làm React và
// viết template theo cái lối này
render() {
    return (
    <div className="main-content">
        <div className="header">
            ...
        </div>
        <div className="body">
            <p>...</p>
            <p>...</p>
        </div>
        <div className="footer">
            ...
        </div>
    </div>
    );
}
// Vì sao à? Vì mình cũng thế :v

Thì nên viết:

import Article from './components/Articles.jsx';
import Header from './components/Header.jsx';
import Footer from './components/Footer.jsx';
import PostContent from './components/PostContent.jsx';
...
render() {
    return (
        <Article>
            <Header />
            <PostContent>
                ...
            </PostContent>
            <Footer />
        </Article>
    );
}
...

Đọc thêm:

huytd 09-02-2018

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Huy Trần

109 bài viết.
1595 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
155 46
Tại sao phải viết blog kĩ thuật? Có rất nhiều bài viết trên mạng nói về vấn đề tại sao một lập trình viên nên thường xuyên viết các bài blog kĩ thu...
Huy Trần viết 3 năm trước
155 46
White
149 39
(Ảnh) Tiếp tục sêri (Link) lần này, chúng ta sẽ cùng tìm hiểu và mô phỏng lại một chức năng mà mọi người đang bắt đầu sử dụng hằng ngày, đó là chứ...
Huy Trần viết 2 năm trước
149 39
White
104 17
Phần 1: Tự truyện Tui và Toán đã từng là hai kẻ thù không đội trời chung trong suốt hơn mười lăm năm ròng rã. Ngay từ ánh nhìn đầu tiên đã ghét nh...
Huy Trần viết 2 năm trước
104 17
Bài viết liên quan
White
0 2
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 1 tháng trước
0 2
White
12 1
Lấy fake path của file trong html input Ngữ cảnh: em cần làm một cái nút tải ảnh lên có preview. GIải pháp đầu: Dùng (Link) đọc file ảnh thành ba...
Hoàng Duy viết 2 năm trước
12 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
109 bài viết.
1595 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!