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

99 bài viết.
1438 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
144 43
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 hơn 2 năm trước
144 43
White
143 37
(Ả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 hơn 1 năm trước
143 37
White
96 16
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 gần 2 năm trước
96 16
Bài viết liên quan
White
2 0
D3.js Biểu diễn dữ liệu dạng tree bằng việc trải nó ra trên bản đồ Series Today I Learn trong vòng 100 ngày thử thách bản thân ngày 15. Mỗi ngày 1...
ngminhtrung viết 14 ngày trước
2 0
White
0 0
Day016 Mấy nay đang phải làm Rust lại nên lại viết TIL về Rust. Một trường hợp lỗi mà ai cũng có thể mắc phải khi làm việc với vòng lặp for lồng ...
Huy Trần viết 5 giờ trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
99 bài viết.
1438 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á!