Dlaczego duże ilości magicznych liczb są akceptowane w CSS i SVG?

63

Często widzę pytania na liście pytania Hot sieciowych, takich jak to , że w zasadzie zapytać „jak mogę zwrócić ten dowolnego kształtu w CSS”. Niezmiennie odpowiedzią jest kilka bloków danych CSS lub SVG z kilkoma pozornie losowymi zakodowanymi na stałe wartościami, które tworzą żądany kształt.

Kiedy na to patrzę, myślę: „Fuj! Co za brzydki blok kodu. Mam nadzieję, że nigdy nie widzę tego typu rzeczy w moim projekcie ”. Widzę jednak tego rodzaju pytania i odpowiedzi Często i przy dużej liczbie pozytywnych opinii, więc społeczność nie uważa, że ​​są złe.

Ale dlaczego to jest dopuszczalne? Biorąc pod uwagę moje zaplecze, nie ma to dla mnie sensu. Dlaczego więc jest OK dla CSS / SVG?

Przywróć Monikę
źródło
38
Czym jest rysunek, jeśli nie losowa wiązka magicznych liczb (pomyśl o pociągnięciach między 2 (x, y) punktami lub układami pikseli itp.), Które wyglądają ładnie?
68
Czy CSS ma zmienne? Czy SVG?
Oded
36
Dlatego wiele dużych projektów ma preprocesor CSS, taki jak SASS lub LESS, który obsługuje zmienne.
Ixrec,
2
@Oded Dla CSS, istnieje około 40% globalne wsparcie dla zmiennych (więc nie jest to zalecane, chyba że chcesz powiedzieć wszystkim użytkownikom Microsoft, że nie są mile widziane). Microsoft prawdopodobnie podąży za trendem w Edge, a urządzenia mobilne w końcu nadrobią zaległości. Z drugiej strony SVG ma pojęcie zmiennych w jakimś nieudanym dokumencie statusu wersji roboczej, ale prawdopodobnie nigdy nie zostaną zaimplementowane.
phyrfox,
12
Dlaczego? Ponieważ to nie są magiczne liczby. CSS przechowuje dane, w przeciwieństwie do programu przechowującego instrukcje. Chociaż CSS prawdopodobnie jest już gotowy, nie jest to język programowania.
Derek 朕 會 功夫

Odpowiedzi:

118

Po pierwsze, magicznych wartości unika się w programowaniu, używając zmiennych lub stałych. CSS nie obsługuje zmiennych, więc nawet jeśli magiczne wartości byłyby źle widoczne, nie masz większego wyboru (oprócz użycia preprocesora jako SASS, ale nie zrobiłbyś tego dla pojedynczego fragmentu).

Po drugie, wartości mogą nie być tak magiczne w języku specyficznym dla domeny, jak CSS. W programowaniu magiczna liczba to liczba, w której znaczenie lub zamiar nie są oczywiste. Jeśli linia mówi:

x += 23;

Zapytasz „dlaczego 23”? Jakie jest uzasadnienie? Zmienna może wyjaśnić zamiar:

x += defaultHttpTimeoutSeconds;

Jest tak, ponieważ jedna liczba może oznaczać absolutnie wszystko w kodzie ogólnego przeznaczenia. Ale rozważ CSS:

background-color: #ffffff;
font-size: 16px;

Wysokość i kolor nie są magiczne, ponieważ znaczenie jest całkowicie jasne z kontekstu. Powód wyboru wartości spefic jest prosty, ponieważ projektanci pomyśleli, że będzie dobrze wyglądać. Wprowadzenie zmiennej nic by nie pomogło, ponieważ i tak nazwałbyś ją tak jak „ defaultBackgroundColor” i „ defaultFontSize”.

JacquesB
źródło
16
Niektóre wartości są właśnie wybrane, ponieważ „wyglądają dobrze”. Ale przykład połączony OP zawiera tę samą wartość kilka razy, ale nie jest jasne, czy reprezentują tę samą rzecz, czy też mają przypadkowo tę samą wartość. Wykorzystuje również wartość, 198pxktóra jest różnicą wielkości czegoś innego ( 200px) i 2pxramki.
CodesInChaos
1
@CodesInChaos: Tak, są przypadki, w których zmienne lub wyrażenia zależności byłyby fajne.
JacquesB,
21
Zauważ, że CSS ma zmienne wsparcia
phihag
28
@phihag W specyfikacji, tak, ale na wolności , nie tak bardzo (40% globalnego wsparcia w tym momencie nie uważam za „szeroko wspierane”. Masz jednak rację mówiąc, że w przyszłości będziemy mieli zmienne CSS. I dzisiaj nauczyłem się czegoś nowego, więc dzięki za to
phyrfox
2
@JaredSmith W porządku jest na stosunkowo dużą aplikację internetową, jednak w przypadku zwykłych (być może statycznych) stron, w tym ogromnego wypełniania, jest to przesada.
Derek 朕 會 功夫
81

Jest to dopuszczalne, ponieważ formaty te nie są kodem , ale danymi . Jeśli miałbyś usunąć wszystkie „magiczne liczby”, w zasadzie powieliłbyś każdą etykietę, a skończyłbyś się śmiesznie wyglądającymi plikami, takimi jak:

mainkite_width = 200px
...
.mainkite {
  width: mainkite_width;
  ...

Za każdym razem, gdy trzeba zmienić niektóre dane, trzeba szukać w dwóch miejscach. To prawda, że ​​są sytuacje, w których miło jest unikać powielania, na przykład jeśli masz często powtarzający się kolor i możesz chcieć zmienić, aby zmienić motywy. Istnieją preprocesory i proponowane rozszerzenia, aby rozwiązać te sytuacje, ale ogólnie pożądane jest, aby liczby wraz ze strukturą były w formacie danych.

Karl Bielefeldt
źródło
22
+1, ponieważ: „Dopuszczalne, ponieważ te formaty nie są kodem, ale danymi”.
Pieter B
1
„To prawda, że ​​są sytuacje, w których miło jest unikać powielania, np. Jeśli masz często powtarzający się kolor i możesz chcieć zmienić, aby zmienić motywy”. - Prawdopodobnie i tak lepiej zrobić z klasami: .main_color { color: .. }a używanie tej klasy jest metodą deduplikacji
Izkata
Kod, który określa wygląd aplikacji, jest nadal kodem, a nie danymi.
ESR
26

Zakaz magicznych liczb jest pierwotną wersją tej zasady projektowania:

Podejmuj decyzje w jednym miejscu .

Ale to nie są magiczne liczby . Przynajmniej nie w odniesieniu do jakiegokolwiek przewodnika po stylu, który znam.

szerokość: 200px;
wysokość: 200 pikseli;

Są wyraźnie oznaczone. Jasne, liczby są takie same. Ale szerokość to szerokość, a wysokość to wysokość. Są zaprojektowane tak, aby zmieniać się niezależnie.

Teraz, jeśli masz 5 obiektów, z których wszystkie musiały mieć tę samą szerokość i każdy niezależnie zakodował swoją szerokość, pobiłbym cię kijem pośrednim .

Nie nazwałbym ich magicznymi liczbami, gdyby były oznaczone, ale nadal biłbym cię kijem pośrednim .

candied_orange
źródło
4
Jeśli masz wystarczająco dużo obiektów, aby potrzebować zmiennej, masz wystarczająco dużo obiektów, aby utworzyć nową klasę.
Jaketr00,
1
To najlepsza odpowiedź, ponieważ pokazuje, że: To nie są magiczne liczby.
TheBlastOne 8.04.16
2
„5 obiektów, które wszystkie musiały mieć tę samą szerokość i każdy niezależnie zakodował szerokość, biłbym cię kijem.” Witamy w zabawnym świecie projektowania stron internetowych.
whatsisname
2
Liczby magiczne są problematyczne nie tylko ze względu na „Podejmowanie decyzji w jednym miejscu” (inaczej DRY), ale także dlatego, że są trudne do zrozumienia.
śleske
Czy istnieje alternatywa dla bicia kijem?
djechlin
11

Ponieważ CSS nie jest językiem programowania, jest to plik konfiguracyjny zawierający zmienne dane dla twojego programu.

Obecnie CSS jest tak potężny, że można w nim programować, ale to nie wszystko. Zasadniczo jest to nadal język arkusza stylów .

Cofnijmy się o krok. Wyobraź sobie, że mamy język programowania, który może rysować na ekranie. Wyobraź sobie, że chcemy zaprogramować go do malowania strony internetowej.

Na początku w naszym kodzie wprowadzaliśmy mnóstwo magicznych liczb. Szerokość marginesu, wysokość tekstu, wcięcia itp. Itp.

jump(100) // The margin
drawTable(500, 500)
writeText("Hello World", 12)

Wyciągamy więc magiczne liczby i umieszczamy je na górze naszego pliku.

int margin = 100
int table = 500
int text_size = 12
jump(margin) // The margin
drawTable(table, table)
writeText("Hello World", text_size)

To jest trochę brzydkie. Raczej czytamy nasze zmienne liczby z pliku konfiguracyjnego.

margin 100
table 500
text size 12

To trochę niejasne ... Co oznaczają te liczby? Co oznaczają te nazwy? Sformalizujmy to trochę.

margin_left 10em
table_width 500px
table_height 500px
font_size 12px

Ale wiesz, chcemy trochę rozszerzyć nasz program. Chcemy również, aby rysował strony z wieloma tabelami, strony bez tabel, strony z akapitami lub przyciskami i jeszcze więcej. Dodajmy selektory do naszego pliku konfiguracyjnego, abyśmy mogli określić, który akapit powinien mieć większą czcionkę lub inny kolor tekstu, być może możemy obsługiwać elementy zagnieżdżone, być może możemy użyć ogólnej właściwości w naszym pliku konfiguracyjnym, a następnie zastąpić ją określonym jeden na kilka zagnieżdżonych elementów.


Czujesz, dokąd to zmierza, w końcu przybywasz jako CSS. (I przeglądarka do renderowania).

Czy powinniśmy zatem dodać możliwości do naszego pliku konfiguracyjnego, abyśmy mogli ponownie uniknąć magicznych liczb? Dodać zmienne? Dodać plik konfiguracyjny dla naszego pliku CSS? To trochę bezcelowe, jeśli pamiętasz, że nasz plik CSS jest już tym samym plikiem konfiguracyjnym.

Ale to oczywiście nie jest prawda; Twój plik CSS powiększa się i ostatecznie napotykasz te same problemy, co w przypadku oryginalnych liczb magicznych, ta sama liczba powtarzana w każdym miejscu, czasem z niewielkimi przekształceniami itp.

Współczesny CSS pozwala jednak na wiele sposobów na uniknięcie tego powtarzania. Możesz użyć klas, które odnoszą się do wielu elementów, możesz ustawić styl dla wszystkich divs, ale następnie zastąpić jeden konkretnie, a CSS 3 pozwala nawet na pewien rodzaj zmiennego użycia.

Nie oznacza to, że musisz zacząć używać zmiennej CSS w każdej możliwej lokalizacji. Używaj go tam, gdzie ma to sens, i używaj go tam, gdzie unikasz powielania lub gdy inne dostępne techniki również się nie udają.

W końcu nie chcesz też zbyt wielu magicznych liczb w pliku konfiguracyjnym :-)

Dorus
źródło
Dlaczego ma to znaczenie, gdzie jest nadmiarowość? Czy utrzymanie nie będzie problemem bez względu na to, gdzie się znajduje?
Peter Mortensen,
@PeterMortensen Zawsze bierze się pod uwagę krótki czas programowania lub wysoką łatwość konserwacji. Łatwo jest rozwinąć wysoką redundancję, ponieważ można szybko zmieniać rzeczy tu i tam, niską redundancję można łatwo utrzymać, ponieważ można szybko zmienić globalny styl. W praktyce chcesz być gdzieś pomiędzy tymi dwoma, ponieważ zmierzenie się z tym, posiadanie globalnego stylu znacznie ułatwia nawet dodawanie nowych stron, ale posiadanie każdej ostatniej niejasnej funkcji przylegającej do każdej możliwej globalnej zmiany stylu wymaga ciągłego rozwoju.
Dorus,
Dobrze CSS ma funkcje w obu kierunkach. I to do twórcy stron internetowych należy decyzja, ile czasu poświęcić na zmniejszenie nadmiarowości i zwiększenie łatwości konserwacji, lub czas na opracowanie nowych stron / funkcji. Co ciekawe, to samo dotyczy każdego innego języka programowania, w którym możesz spędzić miesiące na opracowaniu idealnego projektu lub dni na zepsucie programu, a także miesiące na wyłapanie niemożliwych błędów.
Dorus,
Co ciekawe, właśnie natknąłem się na to pytanie, które mówi o posunięciu się za daleko od abstrakcji i stracie czasu na utrzymanie i rozwój.
Dorus,
5

Dlaczego [kilka pozornie przypadkowych, zakodowanych na stałe wartości] jest OK dla CSS / SVG?

To nie jest OK. Jest to możliwe , aby napisać i zachować zwykłe pliki „.css”, ale ostatecznie losowe wartości zakodowane staną się powszechne ciężarem.

W przypadku innych niż wyjątkowo proste stron internetowych musisz albo opracować zdyscyplinowaną strategię „znajdź i zamień”, albo użyć preprocesora CSS ze zmiennymi lub zdefiniować style za pomocą JavaScript.

Jackson
źródło