„property: 0” czy „property: 0px” w CSS?

86

Widziałem często używany ten zapis i zastanawiałem się, czy jest jakaś zauważalna różnica między tymi dwoma zapisami?

element#id
{
  property: 0;
}

i

element#id
{
  property: 0px;
}

Używam go property: 0px;cały czas, ponieważ wydaje mi się, że wygląda lepiej, ale nie jestem pewien, czy przeglądarka interpretuje 0pxinaczej niż 0.

Czy ktoś wie, który z nich jest lepszy lub poprawny?

css properties zero

— Mikser
źródło

1

Dobre pytanie, ale wcześniej niż ten prawdopodobny duplikat: stackoverflow.com/q/5359222/292060 , ale ta ma lepszą odpowiedź, cytując specyfikację.

— goodeye

1

Niezależnie od tego, z którego korzystasz, zachowaj spójność przez cały projekt.

— PBwebD,

56

Identyfikatory jednostkowe są opcjonalne , ale nie ma znakomity wzrost wydajności (chociaż są oszczędności dwa znaki).

CSS2 - ze specyfikacji W3C CSS 2.1 dla składni i podstawowych typów danych :

Format wartości długości (oznaczonej w tej specyfikacji przez <długość>) to <liczba> (z kropką dziesiętną lub bez), po której bezpośrednio następuje identyfikator jednostki (np. Px, em itp.). Po zerowej długości identyfikator jednostki jest opcjonalny.

(Podkreślenie moje)

CSS3 - z modułu wartości i jednostek CSS W3C, poziom 3 (obecnie w rekomendacji kandydata w momencie pisania tego tekstu)

W przypadku długości zerowych identyfikator jednostki jest opcjonalny (tj. Może być składniowo reprezentowany jako 0).

— Chris Bier
źródło

1

Wątpię, czy naprawdę oszczędzasz 2 bajty, gdy kompresja GZIP jest aktywna. Dla mnie to kwestia tego, z czym czujesz się komfortowo. Jednak niektóre Linters CSS mogą nie lubić 0px.

— Manuel Arwed Schmidt

34

Chociaż jednostka jest opcjonalna, gdy wartość jest 0, zwykle ją zostawiam, ponieważ mogę następnie dostosować wartości za pomocą narzędzi programistycznych Chrome, klikając wartość i naciskając klawisze strzałek w górę / w dół. Bez jednostki to nie jest możliwe.

Ponadto minifier CSS i tak odbierają jednostki 0wartości, więc ostatecznie nie będzie to miało znaczenia.

— Mikser
źródło

+1 za obserwację, że minifier wiedzą o tym i że istnieje funkcjonalność, którą można uzyskać, włączając je.

— Graham P Heath

9

Narzędzia programistyczne Chrome domyślnie ustawiają piksel, jeśli naciśniesz klawisze strzałek w górę / w dół na 0 bez identyfikatora. Ponadto w Narzędziach dla programistów Chrome, jeśli strzałka w dół do 0, zachowuje piksel.

— PBwebD,

1

@ testing123: Nie sądzę, żeby tak było w momencie, gdy pisałem tę odpowiedź, ale dobrze to wiedzieć.

— Blender,

czy wystąpią problemy z czasem wykonania z 0 i 0 pikseli, jeśli są one używane w wielu miejscach w aplikacji?

— Kurkula

15

Oni są tacy sami. Przeglądarka interpretuje oba jako 0, więc wybierz to, co jest dla Ciebie bardziej czytelne.

— Sebastian Patane Masuelli
źródło

Czy istnieje „właściwy” lub zgodny z normami wybór? Wiem, że nie możesz pisać border: 3 solid, ponieważ nie ma jednostek, ale czy są jakieś standardy sieciowe na zero?

— Blender

1

Jak wspomniałem w mojej odpowiedzi, dzieje się tak, ponieważ wszystkie są identyczne: zero razy cokolwiek jest nadal równe zero, niezależnie od tego, czy mnożysz przez rozmiar piksela, em, ex, czy procent.

— AgentConundrum

Nie jestem pewien, co rozumiesz przez standardy sieciowe, ale „margin: 10px 0 0 10px” działa dobrze, podobnie jak „border: 0”, co oznacza, że możesz użyć zera jako odpowiednika „none”.

— Tom

1

@blender Sprawdź moją odpowiedź poniżej na standardy sieciowe z linkiem do dokumentacji.

— Chris Bier

3

-1 w przypadku odpowiedzi z treścią dyskusyjną bez odniesienia, linków ani uzasadnienia. popieraj swoją opinię danymi lub jasno określ, że to tylko Twoja opinia, a nie informacje faktyczne.

11

Zero czegokolwiek to zero. 0px= 0%= 0em= 0pt=0

Większość ludzi zostawia urządzenie wyłączone, ponieważ jest to po prostu niepotrzebny bałagan.

— Gdakanie
źródło

1

Wyjątkiem są jednostki czasu: 0nie jest prawidłową alternatywą dla 0s/0ms

— Henrik Christensen

5

O ile mi wiadomo, nie ma między nimi różnicy, ponieważ 0px = 0em = 0ex = 0% = 0. Tylko od Ciebie, jako programisty, zależy, co lubisz najbardziej (chyba, że masz korporacyjne standardy kodowania, których musisz przestrzegać).

Z większości przykładów kodu, które widziałem, większość ludzi używa wersji bez jednostek. Dla mnie wygląda po prostu czyściej. Jeśli przesyłasz znaczną ilość danych (powiedzmy, jeśli jesteś Google), te dwa bajty mogą w sumie dać dużą przepustowość, zwłaszcza, że prawdopodobnie powtórzysz je wiele razy w arkuszu stylów.

— AgentConundrum
źródło

6

Jeśli przesyłasz znaczną ilość danych (na przykład jeśli jesteś Google), lepiej użyj narzędzi do minifikacji, które robią to za Ciebie: p

— John Kurlak

4

Zero pikseli to zero cali, zero metrów i tak dalej. 0to wszystko czego potrzebujesz.

— meder omuraliev
źródło

Przez chwilę zamierzałem obniżyć głosowanie nad twoim postem, ponieważ myślałem o twoim stwierdzeniu, że 0 pikseli równa się 0 cali, i tak dalej było fałszywe. :) Ponieważ myślałem, jak to możliwe? są to różne jednostki.

— Web_Designer,

2

Osobiście uważam, że jest 0czystszy niż 0px. To dwa dodatkowe znaki, które mogą się sumować. Po co dodawać dodatkowe bajty, kiedy nie jest to konieczne. Widziałem, padding: 0px 0px 0px 0pxco można łatwo wyrazić padding: 0zbyt często.

— Amir Raminfar
źródło

1

Możesz użyć jednego z nich - moja najlepsza rada to nie martwić się zbytnio, ale konsekwentnie robić to w jedną lub drugą stronę. Osobiście wolę określić „0px” z następujących powodów:

Użycie 0px sprawia, że rzeczy są bardziej spójne ze wszystkimi innymi określonymi rozmiarami „pikseli”
Jest również bardziej rozwlekły i bardzo wyraźnie pokazuje, że ustawiasz zerową długość zamiast flagi „wyłącz to”
Nieco łatwiej jest zmienić wartość „0px”, aby w razie potrzeby zmienić ją na inną wartość

— Chris Halcrow
źródło

0

Jak mówią inni, tak naprawdę nie ma znaczenia, czy jest to 0, chociaż decyduję się dodać pomiary do wszystkich moich wartości, aby każdy, kto przegląda moje pliki CSS, mógł ocenić, z jakimi pomiarami będzie miał do czynienia gdzie indziej.

— danjah
źródło