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

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?

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”.

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.

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 .

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 :-)

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.