'property: 0' hay 'property: 0px' trong CSS?


86

Tôi đã thấy ký hiệu này được sử dụng rất nhiều và tôi đã tự hỏi, có sự khác biệt đáng chú ý nào giữa hai ký hiệu này không?

element#id
{
  property: 0;
}

element#id
{
  property: 0px;
}

Tôi sử dụng property: 0px;mọi lúc, vì tôi thấy nó trông gọn gàng hơn, nhưng tôi không thực sự chắc chắn liệu trình duyệt có diễn giải 0pxkhác với hay không 0.

Có ai biết cái nào là tốt hơn hoặc chính xác?


1
Câu hỏi hay và sớm hơn bản trùng lặp có thể xảy ra này: stackoverflow.com/q/5359222/292060 , nhưng câu đó có câu trả lời tốt hơn, trích dẫn thông số kỹ thuật.
goodeye,

1
Cho dù bạn sử dụng cách nào, hãy đảm bảo duy trì sự nhất quán trong toàn bộ dự án.
PBwebD

Câu trả lời:


56

Số nhận dạng đơn vị là tùy chọn , nhưng không có sự gia tăng hiệu suất được ghi nhận (mặc dù bạn đang lưu hai ký tự).

CSS2 - Từ W3C Đặc tả CSS 2.1 cho Cú pháp và các kiểu dữ liệu cơ bản :

Định dạng của giá trị độ dài (được biểu thị bằng <length> trong đặc điểm kỹ thuật này) là <number> (có hoặc không có dấu thập phân) ngay sau đó là một mã định danh đơn vị (ví dụ: px, em, v.v.). Sau độ dài bằng 0, mã định danh đơn vị là tùy chọn.

(Tôi nhấn mạnh)

CSS3 - Từ Mô-đun Đơn vị và Giá trị CSS W3C Cấp 3 (Hiện đang nằm trong Đề xuất Ứng viên tại thời điểm viết bài này)

Đối với độ dài bằng 0, mã định danh đơn vị là tùy chọn (nghĩa là có thể được biểu diễn theo cú pháp là 0).


1
Nghi ngờ rằng bạn thực sự tiết kiệm được 2 byte khi nén GZIP đang hoạt động. Đối với tôi, đó là vấn đề bạn cảm thấy thoải mái với điều gì. Tuy nhiên, một số CSS Linters có thể không thích 0px.
Manuel Arwed Schmidt

34

Mặc dù đơn vị là tùy chọn khi giá trị là 0, tôi có xu hướng để nó ở trong, vì sau đó tôi có thể điều chỉnh các giá trị bằng Công cụ dành cho nhà phát triển của Chrome bằng cách nhấp vào giá trị và nhấn các phím mũi tên lên / xuống. Nếu không có một đơn vị, điều đó thực sự không thể.

Ngoài ra, trình thu nhỏ CSS loại bỏ các đơn vị khỏi 0giá trị, vì vậy cuối cùng nó sẽ không thực sự quan trọng.


+1 cho việc quan sát rằng những người thu nhỏ biết về điều này và có chức năng cần có bằng cách bao gồm chúng.
Graham P Heath

9
Công cụ dành cho nhà phát triển của Chrome mặc định là px nếu bạn nhấn các phím mũi tên lên / xuống trên số 0 mà không có số nhận dạng. Ngoài ra, trong Công cụ dành cho nhà phát triển của Chrome, nếu bạn mũi tên xuống 0, nó sẽ giữ nguyên px.
PBwebD

1
@ testing123: Tôi không nghĩ nó đã xảy ra tại thời điểm tôi viết câu trả lời này, nhưng điều đó là tốt để biết.
Máy xay sinh tố

sẽ có vấn đề gì về thời gian thực thi với 0 và 0px nếu chúng được sử dụng ở nhiều nơi trong ứng dụng không?
Kurkula

15

Họ giống nhau. Trình duyệt hiểu cả hai là 0, vì vậy hãy sử dụng bất cứ thứ gì dễ đọc hơn đối với bạn.


Có sự lựa chọn 'đúng' hoặc phù hợp với tiêu chuẩn không? Tôi biết bạn không thể viết border: 3 solid, vì không có đơn vị nào, nhưng có tiêu chuẩn web nào trên không?
Máy xay sinh tố

1
Như tôi đã đề cập trong câu trả lời của mình, đó là bởi vì tất cả chúng đều giống hệt nhau: 0 lần mọi thứ vẫn bằng không, cho dù bạn đang nhân với kích thước của pixel, em, ex hay theo tỷ lệ phần trăm.
AgentConundrum,

Không chắc ý của bạn theo tiêu chuẩn web nhưng "margin: 10px 0 0 10px" hoạt động tốt, cũng như "border: 0" nghĩa là bạn có thể sử dụng số 0 tương đương với "không".
Tom

1
@blender Kiểm tra câu trả lời của tôi bên dưới để biết các tiêu chuẩn web với liên kết đến tài liệu.
Chris Bier

3
-1 cho một câu trả lời có nội dung gây tranh cãi mà không có bất kỳ tham chiếu, liên kết hoặc cơ sở nào. vui lòng sao lưu ý kiến ​​của bạn bằng dữ liệu hoặc nói rõ đó chỉ là ý kiến ​​của bạn, không phải thông tin thực tế.

11

Không của bất cứ điều gì là không. 0px= 0%= 0em= 0pt=0

Hầu hết mọi người rời bỏ thiết bị vì nó đơn giản là sự lộn xộn không cần thiết.


1
Một ngoại lệ là đơn vị thời gian: 0không được một sự thay thế hợp lệ để 0s/0ms
Henrik Christensen

5

Theo như tôi biết thì không có sự khác biệt giữa chúng 0px = 0em = 0ex = 0% = 0. Với tư cách là nhà phát triển, hoàn toàn tùy thuộc vào bạn để quyết định điều gì bạn thích nhất (tất nhiên là trừ khi bạn có các tiêu chuẩn mã hóa của công ty mà bạn cần tuân theo).

Từ hầu hết các mẫu mã mà tôi đã thấy, hầu hết mọi người sử dụng phiên bản không có đơn vị. Đối với tôi, nó trông sạch sẽ hơn. Nếu bạn đang đẩy một lượng dữ liệu đáng kể (giả sử, nếu bạn là Google), hai byte đó có thể tăng thêm rất nhiều băng thông, đặc biệt vì bạn có khả năng lặp lại chúng nhiều lần trong biểu định kiểu của mình.


6
I'f bạn đang đẩy một số lượng đáng kể dữ liệu (như nếu bạn đang Google), bạn có tốt hơn là sử dụng công cụ rút gọn mà làm điều này cho bạn: p
John Kurlak

4

Điểm ảnh 0 bằng không inch và không mét, v.v. 0là tất cả những gì bạn cần.


Trong giây lát, tôi sẽ bỏ phiếu cho bài đăng của bạn vì tôi nghĩ rằng tuyên bố của bạn về việc 0 pixel bằng 0 inch, và như vậy là sai. :) Bởi vì trong tâm trí của tôi, tôi đã nghĩ rằng làm thế nào có thể được? chúng là các đơn vị khác nhau.
Web_Designer

2

Cá nhân tôi thấy 0sạch hơn 0px. Đó là hai ký tự phụ có thể cộng lại. Tại sao phải thêm byte thừa khi bạn không cần. Tôi đã thấy padding: 0px 0px 0px 0pxđiều này có thể dễ dàng được thể hiện một padding: 0cách quá thường xuyên.


1

Bạn có thể sử dụng một trong hai - lời khuyên tốt nhất của tôi là đừng quá lo lắng mà hãy kiên định thực hiện theo cách này hay cách khác. Cá nhân tôi muốn chỉ định '0px' vì những lý do sau:

  • Sử dụng 0px giúp mọi thứ nhất quán hơn với tất cả các kích thước 'px' khác mà bạn đã chỉ định
  • Nó cũng dài dòng hơn và nói rõ rằng bạn đang đặt độ dài bằng 0 chứ không phải là cờ 'tắt điều này'
  • Việc chỉnh sửa giá trị '0px' để biến nó thành một giá trị khác nếu cần thiết sẽ dễ dàng hơn một chút

0

Như những người khác nói, nó không thực sự quan trọng nếu 0 của nó, mặc dù tôi chọn thêm các phép đo vào tất cả các giá trị của mình để bất kỳ ai khác nhìn vào tệp CSS của tôi có thể đánh giá những phép đo mà họ có khả năng xử lý ở nơi khác.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.