Cần lắm 1 bài tổng hợp các phương pháp dàn layout web?

hell6w9rld · January 1, 2018, 3:25am

Chào các bạn. Mình đang có ý định tự xây dựng 1 blog cá nhân. Vì cấu trúc trang cũng khá đơn giản nên mình muốn tự xây dựng, code thủ công thay vì dùng các công cụ kéo thả, sinh mã tự động hay các framework build sẵn. Mình đang cần dựng layout. Tìm hiểu qua thì mình biết các phương pháp dàn layout như sau:

sử dụng table
sử dụng thẻ div trong html + class trong css (both, clear)
sử dụng grid system của thư viện nào đấy
sử dụng flex box trong css3
Bạn nào có thể nếu ra các pp khác (nếu có) và ưu nhược điểm của từng pp, nên sử dụng cái nào và cho kèm ví dụ layout đơn giản sử dụng pp đó giúp mừn vứi

Tiện đây mình muốn hỏi luôn về reset css. Mình thấy có khá nhiều bộ reset css và khá là nặng. Không biết có dùng hết không. Vậy có nên sử dụng các bộ reset css có sẵn, hay là tự viết, và nếu tự viết thì cái gì cần normalize
Xin cam ơn

tntxtnt · January 1, 2018, 3:57am

cứ boootstrap 3 mà fang, reinvent the wheel làm gì cho khổ. Tự chế phải canh responsive cho tablet, cho phone nữa, thành ra viết 3 cái thay vì 1 cái

…
base template cần có 1 cái navbar, 1 cái side bar, 1 cái banner, 1 cái footer, 1 cái chứa content

template cho

trang index
trang chứa bài viết
trang chứa thể loại bài viết (category)
trang chứa tag
trang chứa các bài viết theo tháng/năm
v.v…

ngoài ra còn có thể cần có các plugins như viết công thức toán học, viết code có highlight, v.v…

… tùm lum tá lả ko có đơn giản đâu @_@

https://www.staticgen.com/ chọn 1 cái static site generator rồi phang từ từ, còn hem thích thì wordpress thẳng tiến

hell6w9rld · January 1, 2018, 4:06am

mình không định làm cầu kì thế, ý định của mình chỉ làm

1 trang index (hiển thị 1 số thông tin và 1 số bài viết nổi bật hoặc gần đây)
1 trạng hiển thị bài viêt (hiển thị nội dung các bài viết khi bấm vào xem)
1 trang tổng hợp các bài viết (theo chuyên mục)
về sau có thể có thêm trang quản lý, vì tạm thời mình đang làm web tĩnh, chỉ viết bài rồi generate mã thôi, chưa làm web động

thành phần layout cũng đơn giãn, mấy thứ banner các thứ mình không làm, blog cá nhân mà, mình không định làm bự như các blog bách khoa toàn thư bây giờ, cái gì cũng có

dùng boootstrap thì có vẻ hơi nặng so với layout mình sẽ làm, mà sợ mã thừa nhiều, mình có tìm hiểu thấy mấy hướng dẫn tự tạo 1 hệ thống grid system và reponsive luôn. Nhưng tham khảo ý kiến đã

tntxtnt · January 1, 2018, 4:18am

tạo ra được 1 trang hoàn chỉnh đã rồi tính tới nặng nhẹ sau

1 cái hình vài chục tới vài trăm kb rồi, 1 cái css/js vài trăm kb chả xi nhê gì đâu. Với lại browser còn cache tụi nó nữa nên có nặng 1mb cũng chỉ download có 1 lần xài cho 1 tuần tới 1 tháng ko có nặng đâu

xong xuôi test speed ở đây: https://developers.google.com/speed/pagespeed/insights/ rồi xem cái gì chậm thì optmize sau. Đương nhiên chưa làm xong mà bàn tới tốc độ load nhanh/chậm hay file nặng/nhẹ là bất khả thi.

hungaya · January 1, 2018, 4:35am

Dân CSS thuần nè.

Bootstrap hay các CSS Framework có 2 điểm yếu: 1 element đơn giản có quá nhiều DOM, có nhiều UI mà không bao giờ sử dụng.

Mình thấy CSS thuần dễ scale hơn, vì nếu làm Bootstrap phải mất công modify lại default UI của Bootstrap, tốn thêm 1 mớ DOM, CSS, code phình to thêm.

Dạo này cũng đang chơi làm SPA trên VanillaJS (+RxJS)

8eebu · January 1, 2018, 6:30am

Bạn nên học thêm SASS để sử dụng các fw build dạng modules nhé, add component vào thôi đỡ vả.
Nếu thực sự muốn CSS thuần toàn bộ để scale cho dễ (nhưng lâu) thì mình khuyên bạn dùng Flexbox để dàn layout. 10 năm trước thì nó không dc hỗ trợ nhiều chứ bây giờ cả Bootstrap cũng chuyển sang dùng Flexbox rồi.
Tham khảo thêm tại đây:

Framework build trên flexbox và dạng modules cho bạn import sử dụng:

Hoặc không thích 2 cái trên thì xài cái này copy tay các snippets sử dụng Flexbox cho nhanh:
http://www.flexboxpatterns.com/home