View Full Version : Khi nào dùng id, khi nào dùng class trong CSS?
Hôm nay chat với 1 học sinh, thấy em ấy có vẻ hiểu cách diễn đạt của tôi nên tôi post lên đây, dù đôi khi trên forum gặp lại topic kiểu này nhưng tôi không tìm thấy bài đó nên mở thớt mới vậy:
Nguồn: http://ohisee.com/dd/showthread.php?tid=384
HS: thày ơi cho em hỏi, có cách nào dùng CSS thay đổi được màu 1 số link chứ không phải tất cả link không?
Tôi: Em đọc lại kiến thức về selector đi. CSS phải phối hợp với HTML. Nếu dùng <ul id="tenid" .... <a ..... thì ta dùng CSS là #tenid a {color:....
HS: Thế mình không dùng id mà dùng class được không ạ?
Tôi: Chỉ có dân không chuyên nghiệp mới dùng cách đó thôi, làm thế mỗi cái <a lại thêm 1 cái class, quá dài dòng.
HS: Nhưng em đọc là id chỉ dùng được 1 lần, class thì dùng được nhiều, mà em muốn tác động đến nhiều link cơ mà.
Tôi: uh, đúng thế. Vấn đề là ta dùng id 1 lần cho 1 VÙNG RỘNG LỚN.
HS: em hiểu rồi .. (1 lúc sau) em làm được rồi.
Bó tay, chẳng hiểu sao bạn ấy hiểu nhanh thiệt, không biết các bạn có hiểu không
E không hiểu kỹ nhưng hiện thời thì em xài như sau:
Id:
cho layout: header,footer,main
cho uniqueness: comment1, comment2 (xài để áp dụng điểm neo trong url, ví dụ: index.php#comment488)
Class:
cho thành phần layout: box-title, box-content, button-buy, button-submit...(vì thường website có các module đều giống nhau cả, lặp lại kiểu nên em xài class)
cho dữ liệu đổ ra lặp lại: pd-name, pd-price, pd-image...(rất semantic nhé)
superthin
19-04-2009, 07:18
Tất cả nên dùng class mà không cần đến id đều có thể được, nhưng tất cả dùng ID mà không dùng class là cũng được nhưng mệt mỏi hổng chừng.
Dùng ID nếu cái đó là duy nhất và / hoặc trong trường hoặc táy máy JavaScript cho chỉnh thuộc tính đối tượng.
Dùng class nếu đối tượng có tính lặp đi lặp lại hoặc trong mọi trường hợp nếu thích.
Shellingfox
20-04-2009, 17:25
Hôm nay chat với 1 học sinh, thấy em ấy có vẻ hiểu cách diễn đạt của tôi nên tôi post lên đây, dù đôi khi trên forum gặp lại topic kiểu này nhưng tôi không tìm thấy bài đó nên mở thớt mới vậy:
Nguồn: http://ohisee.com/dd/showthread.php?tid=384
HS: thày ơi cho em hỏi, có cách nào dùng CSS thay đổi được màu 1 số link chứ không phải tất cả link không?
Tôi: Em đọc lại kiến thức về selector đi. CSS phải phối hợp với HTML. Nếu dùng <ul id="tenid" .... <a ..... thì ta dùng CSS là #tenid a {color:....
HS: Thế mình không dùng id mà dùng class được không ạ?
Tôi: Chỉ có dân không chuyên nghiệp mới dùng cách đó thôi, làm thế mỗi cái <a lại thêm 1 cái class, quá dài dòng.
HS: Nhưng em đọc là id chỉ dùng được 1 lần, class thì dùng được nhiều, mà em muốn tác động đến nhiều link cơ mà.
Tôi: uh, đúng thế. Vấn đề là ta dùng id 1 lần cho 1 VÙNG RỘNG LỚN.
HS: em hiểu rồi .. (1 lúc sau) em làm được rồi.
Bó tay, chẳng hiểu sao bạn ấy hiểu nhanh thiệt, không biết các bạn có hiểu không
Thế theo bác là xài kiểu <ul class="tenclass"...<a.... rồi
.tenclass a {}
không được hay sao mà mỗi cái a lại thêm class :|
Đối với mình:
id chỉ dùng khi xuất hiện duy nhất một lần và có thể sẽ được javascript xử lý làm gì đó, thêm nữa là đặt tên những id đó có nghĩa và những vùng lớn như #header, #footer...; còn những cái lặp đi lặp lại thì dùng class.
Tôi: uh, đúng thế. Vấn đề là ta dùng id 1 lần cho 1 VÙNG RỘNG LỚN.
Tôi ko nghĩ cái này lại đúng theo W3C ;)
Hôm nay chat với 1 học sinh, thấy em ấy có vẻ hiểu cách diễn đạt của tôi nên tôi post lên đây, dù đôi khi trên forum gặp lại topic kiểu này nhưng tôi không tìm thấy bài đó nên mở thớt mới vậy:
Nguồn: http://ohisee.com/dd/showthread.php?tid=384
HS: thày ơi cho em hỏi, có cách nào dùng CSS thay đổi được màu 1 số link chứ không phải tất cả link không?
Tôi: Em đọc lại kiến thức về selector đi. CSS phải phối hợp với HTML. Nếu dùng <ul id="tenid" .... <a ..... thì ta dùng CSS là #tenid a {color:....
Thầy cũng đọc lại kiến thức về selector đi.
ul.tenid a{color:....
HS: Thế mình không dùng id mà dùng class được không ạ?
Tôi: Chỉ có dân không chuyên nghiệp mới dùng cách đó thôi, làm thế mỗi cái <a lại thêm 1 cái class, quá dài dòng.
Hehe, thầy giáo 90% không phải là dân chuyên nghiệp (dân chuyên nghiệp không có nói như thầy).
HS: Nhưng em đọc là id chỉ dùng được 1 lần, class thì dùng được nhiều, mà em muốn tác động đến nhiều link cơ mà.
Tôi: uh, đúng thế. Vấn đề là ta dùng id 1 lần cho 1 VÙNG RỘNG LỚN.
HS: em hiểu rồi .. (1 lúc sau) em làm được rồi.
Bó tay, chẳng hiểu sao bạn ấy hiểu nhanh thiệt, không biết các bạn có hiểu không
Thầy trò này chắc không ai dám thuê! :P
http://www.datmaychu.net
hutek.info
27-04-2009, 22:12
Tớ toàn dùng class, bí lắm mới dùng id
phongjalvn
27-04-2009, 22:19
Dùng cả 2 cho hợp lý, đó mới là khó.
Như mình: ID cho các đối tượng độc lập và không lặp lại trên trang.
Class cho các đối tượng cần lặp lại nhiều lần.
Ngoài ra còn ứng dụng cho các đoạn code javascript nữa.
Nói chung, mới vào nghề thì cần tìm hiểu 1 thời gian mới có thể nắm bắt được
Tôi: Chỉ có dân không chuyên nghiệp mới dùng cách đó thôi, làm thế mỗi cái <a lại thêm 1 cái class, quá dài dòng.
Hic .........
Thực ra theo mình thì dùng ID hay class gi cũng được ráo.
Nếu dùng ID thì nên xem xét đến tính duy nhất của nó (vì ID mà :))
Dùng ID thì có thể hỗ trợ tốt cho lập trình bằng ajax (dùng thuộc tính getElementByID gì đó của javascript)
Nói tóm lại là ID hay class gì cũng được tuốt, nhưg có lẽ nên dùng ID ít hơn class :)
1 vài ý kiến.
Thực ra theo mình thì dùng ID hay class gi cũng được ráo.
Nếu dùng ID thì nên xem xét đến tính duy nhất của nó (vì ID mà :))
Dùng ID thì có thể hỗ trợ tốt cho lập trình bằng ajax (dùng thuộc tính getElementByID gì đó của javascript)
Nói tóm lại là ID hay class gì cũng được tuốt, nhưg có lẽ nên dùng ID ít hơn class :)
1 vài ý kiến.
mình cũng thấy như bạn nhưng cái ý cuối thì ngược lại ... mình dung id nhiều hơn :D
nói chung cũng tùy ý thích mỗi người thôi
xin lỗi vì đã đào topic lên :D
Thầy cũng đọc lại kiến thức về selector đi.
ul.tenid a{color:....
Hehe, thầy giáo 90% không phải là dân chuyên nghiệp (dân chuyên nghiệp không có nói như thầy).
Thầy trò này chắc không ai dám thuê! :P
http://www.datmaychu.net
Vì có cái topic này nên vào đây điều chỉnh tí nhé
Nói ngắn gọn là vẫn có người thuê tớ, cụ thể là học trò tớ đang làm ở
1) Web Team của Naiscorp ( http://socbay.com )
2) Web Team của VCCorp ( http://linkhay.com )
3) Web Team của VSI ( http://www.vsi-international.com/web/guest/home )
4) Web Team của anh tiendx trên forum này :D
.....
Những điều trên là 100% chính xác, còn tất nhiên những bài viết khác về kiến thức của tớ thì cũng có lúc đúng lúc sai thôi, khi nào tớ có hứng thì tớ sẽ tranh luận đúng sai, còn không thì tớ thấy người ta nói sai tớ bỏ qua, thấy người ta nói đúng tớ tiếp thu.
[=========> Bổ sung bài viết <=========]
xin lỗi vì đã đào topic lên :D
Mình cũng xin lỗi cùng bạn :D
@zmt264: em thấy nếu chia pj ra cho 2 thằng nắm 2 công đoạn là design rồi lên layout và thằng code, thì thằng code sẽ thấy thoải mái hơn khi thằng layout toàn dùng class. Khỏi đụng chạm lúc nó thêm id, nhưng nếu thằng layout biết code thì có thể thêm id để xử lý js, và chỉ cho thằng code xài lại id đó cũng tốt.
Còn ý kiến riêng của em là khi dựng css mà chưa đụng tới code csdl thì chỉ xài id cho : logo, banner, wrapper( tùy trường hợp ), footer, header, search, nav-menu, những cái đại loại vậy. Ko xài id khi đi sâu vào trong div kẻo lúc code lại quên quên nhớ nhớ đụng này nọ. Với sự trợ giúp của jquery thì lấy class hay lấy id gì cũng chả thành vấn đề.
Có ai có ý kiến nào khác ko nhỉ ?
honnhienh
31-08-2010, 01:29
ý kiến cá nhân thôi cắt layout cho thằng nào thì phải am hiểu thằng đó ( chẳng hạn cắt cho joomla thì phải am hiểu chút). Mình cũng nhận 2-3 cái html chuyển sang thành joomla mấy pro đó hog biết có cố tình hog mà lúc mình chuyển sang joomla bug gần chết phải thay đổi class tùm lum mới ok được. :).
Với lại class với id một design có chút kinh nghiệm thì họ biết đâu là id và class liên àh. Riêng mình thì hai cái được dùng song song với nhau chẳng hạn bạn có thể định nghĩa cho cái cột #left và cột #right có chung một cái .class như zậy giảm chi phí viết code css với một số thuộc tính giống nhau khi thay đổi cũng dễ nữa khi nhúng javascript cũng dễ dàng. Nói chung là mỗi người mỗi cách đúc kết từ sách vở và trong quá trình làm việc thôi.
alone_hero
31-08-2010, 13:23
Chà cái topic này được đào lên, mình cũng có hứng tham gia chút về vấn đề này. Theo ý kiến cá nhân, và cũng đã ứng dụng cho các project cũng như truyền đạt cho học viên.
Về nguyên tắc:
1. id thường được sử dụng với những element có tính chất xuất hiện 1 lần duy nhất trong trang html đó.
2. class thường được sử dụng với những element có thể xuất hiện nhiều lần.
Vậy thì theo nguyên tắc đó và 1 số cách sử dụng css sẽ thực tế như sau:
1. Càng sử dụng ít việc đặt tên (id, class) là tốt nhất, chỉ đặt tên khi thực sự cần thiết -> để định dạng css được chỉ định rõ ràng.
2. Tận dụng phương pháp CSS theo Tag và Compound (kết hợp theo selector) để giảm thiểu việc phải đặt tên.
3. Những element nào có tham gia vào việc tương tác với java script/ dynamic script thì nên đặt tên cụ thể (không nhất thiết phải là id hay class, vì nhiều framework vd: jquery có thể làm việc được với selector).
4. Khi làm template cho những bộ CMS chuẩn (thường các bộ cms đó có thể sẽ render ra html theo những tên (id, class, tag, selector) riêng nên có thể làm như sau để giảm thiểu việc bug sau này.
- Nghiên cứu những cách đặt tên khi học render code ra template, để mình đặt tên "giống" luôn khi làm template từ layout.
- Nếu bộ CMS nào ví dụ (wordpress, joomla) render những html từ trong các plugin/ module của chúng thì có thể để kệ những code html chuẩn họ render ra. Mình dựa vào đó, tạo thêm một file vd: style_custom.css rồi định nghĩa overwritten những cái giống với tên bộ CMS tạo ra (nhưng các thuộc tính css bên trong thì lại định nghĩa theo template của mình - kiểu này sẽ không phải đụng chạm đến code gốc của họ).
Ngoài ra còn nhiều cách nhưng đó là một số ý kiến của mình về việc sử dụng ID hay CLASS, còn lại dựa phần nhiều vào trong quá trình làm việc.
Powered by vBulletin® Version 4.2.0 Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.