Tại sao số lượng lớn số lượng ma thuật được chấp nhận trong CSS và SVG?

63

Thường thì tôi thấy các câu hỏi trong danh sách Câu hỏi về Mạng nóng như thế này về cơ bản là hỏi "làm thế nào để tôi vẽ hình dạng tùy ý này trong CSS". Luôn luôn có câu trả lời là một vài khối dữ liệu CSS hoặc SVG với một loạt các giá trị được mã hóa cứng dường như ngẫu nhiên tạo thành hình dạng được yêu cầu.

Khi tôi nhìn vào điều này, tôi nghĩ 'Yuck! Thật là một khối mã xấu xí. Tôi hy vọng tôi không bao giờ thấy loại công cụ này trong dự án của mình '. Tuy nhiên, tôi thấy các loại Hỏi & Đáp này khá thường xuyên và với số lượng người ủng hộ cao, vì vậy rõ ràng cộng đồng không nghĩ rằng chúng xấu.

Nhưng tại sao điều này được chấp nhận? Đến từ trải nghiệm back-end của tôi điều này không có ý nghĩa với tôi. Vậy tại sao nó lại ổn cho CSS / SVG?

— Phục hồi
nguồn

38

Bản vẽ là gì, nếu không phải là một loạt các số ma thuật ngẫu nhiên (nghĩ về các nét giữa 2 (x, y) hoặc mảng pixel, v.v.) có vẻ đẹp?

68

CSS có biến không? Có phải SVG không?

— Oded

36

Đây là lý do tại sao nhiều dự án lớn hơn có bộ tiền xử lý CSS như SASS hoặc LESS hỗ trợ các biến.

— Ixrec

2

@Oded Đối với CSS, có khoảng 40% hỗ trợ toàn cầu cho các biến (vì vậy, không được đề xuất trừ khi bạn muốn nói với tất cả khách truy cập Microsoft của mình rằng họ không được chào đón). Microsoft có thể sẽ đi theo xu hướng trong Edge và các thiết bị di động cuối cùng sẽ bắt kịp. Mặt khác, SVG có khái niệm về các biến trong một số tài liệu trạng thái dự thảo bị cấm, nhưng có lẽ chúng sẽ không bao giờ được thực hiện.

— phyrfox

12

Tại sao? Bởi vì chúng không phải là số ma thuật. CSS giữ dữ liệu, không giống như một chương trình chứa các hướng dẫn. Mặc dù CSS được cho là hoàn chỉnh, nhưng nó không phải là ngôn ngữ lập trình.

— Derek 朕會

118

Thứ nhất, các giá trị ma thuật được tránh trong lập trình bằng cách sử dụng các biến hoặc hằng. CSS không hỗ trợ các biến, vì vậy ngay cả khi các giá trị ma thuật được tán thành, bạn không có nhiều sự lựa chọn (ngoại trừ sử dụng bộ tiền xử lý là SASS, nhưng bạn sẽ không làm điều đó cho một đoạn mã).

Thứ hai, các giá trị có thể không phải là phép thuật trong một ngôn ngữ cụ thể của miền như CSS. Trong lập trình, số ma thuật là một số mà ý nghĩa hoặc ý định không rõ ràng. Nếu một dòng nói:

x += 23;

Bạn sẽ hỏi "tại sao 23"? Lý do là gì? Một biến có thể làm rõ ý định:

x += defaultHttpTimeoutSeconds;

Điều này là do một số đơn độc có thể có nghĩa là hoàn toàn bất cứ điều gì trong mã mục đích chung. Nhưng hãy xem xét CSS:

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

Chiều cao và màu sắc không phải là ma thuật, bởi vì ý nghĩa hoàn toàn rõ ràng từ bối cảnh. Và lý do để chọn giá trị spefic là đơn giản bởi vì các nhà thiết kế nghĩ rằng nó sẽ trông tốt. Giới thiệu một biến sẽ không giúp được gì, vì dù sao bạn cũng chỉ đặt tên cho nó là " defaultBackgroundColor" và " defaultFontSize".

— JacquesB
nguồn

16

Một số giá trị thực sự chỉ được chọn vì "chúng trông đẹp". Nhưng ví dụ OP được liên kết chứa cùng một giá trị nhiều lần, nhưng không rõ liệu chúng có đại diện cho cùng một thứ hay chỉ có cùng một giá trị bởi sự trùng hợp. Ngoài ra, nó sử dụng một giá trị trong 198pxđó là sự khác biệt về kích thước của một thứ khác ( 200px) và 2pxđường viền.

— CodeInChaos

1

@CodesInChaos: Có, có một số trường hợp các biến hoặc một số biểu thức phụ thuộc sẽ rất tuyệt.

— JacquesB

21

Lưu ý rằng CSS không hỗ trợ các biến

— phihag

28

@phihag Trong thông số kỹ thuật, có, nhưng trong tự nhiên , không nhiều lắm (tôi không coi hỗ trợ toàn cầu 40% tại thời điểm nhận xét này là "được hỗ trợ rộng rãi". Tuy nhiên, bạn đã đúng khi nói rằng, trong trong tương lai , chúng ta sẽ có các biến CSS. Và tôi đã học được một điều mới ngày hôm nay, vì vậy cảm ơn vì điều đó.

— phyrfox

2

@JaredSmith Thật tốt cho một ứng dụng web quy mô tương đối lớn, tuy nhiên đối với các trang phổ biến (có lẽ là tĩnh) bao gồm một polyfill khổng lồ thì quá mức cần thiết.

— Derek 朕會

81

Có thể chấp nhận vì các định dạng này không phải là mã , mà là dữ liệu . Nếu bạn xóa tất cả "số ma thuật", về cơ bản bạn sẽ sao chép mọi nhãn và kết thúc với các tệp trông kỳ cục như:

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

Mỗi khi bạn cần thay đổi một số dữ liệu, bạn sẽ cần tìm ở hai nơi. Cấp, có những tình huống tốt để tránh trùng lặp, như nếu bạn có một màu được lặp lại thường xuyên và bạn có thể muốn thay đổi để thay đổi chủ đề. Có các bộ tiền xử lý và các phần mở rộng được đề xuất để giải quyết các tình huống đó, nhưng nói chung, mong muốn có các số cùng với cấu trúc trong định dạng dữ liệu.

— Karl Bielefeldt
nguồn

22

+1 vì: "Có thể chấp nhận được vì các định dạng này không phải là mã, mà là dữ liệu."

— Pieter B

1

"Cấp, có những tình huống tốt để tránh trùng lặp, như nếu bạn có một màu được lặp lại thường xuyên và bạn có thể muốn thay đổi để thay đổi chủ đề." - Có lẽ được thực hiện tốt hơn với các lớp: .main_color { color: .. }và sử dụng lớp đó là phương pháp chống trùng lặp

— Izkata

Mã xác định giao diện của ứng dụng vẫn là mã và không phải dữ liệu.

— ESR

26

Việc cấm số ma thuật là phiên bản nguyên thủy của nguyên tắc thiết kế này:

Đưa ra quyết định ở một nơi .

Nhưng đây không phải là những con số ma thuật . Ít nhất, không xa như bất kỳ hướng dẫn phong cách mã hóa nào tôi biết có liên quan.

chiều rộng: 200px;
chiều cao: 200px;

Chúng được dán nhãn rõ ràng. Chắc chắn, những con số xảy ra là như nhau. Nhưng chiều rộng là chiều rộng và chiều cao là chiều cao. Chúng được thiết kế để thay đổi độc lập.

Bây giờ nếu bạn có 5 đối tượng mà tất cả đã có cùng chiều rộng và mỗi một cách độc lập hardcoded chiều rộng của họ tôi sẽ đánh bại bạn với gián tiếp dính.

Tôi sẽ không gọi họ là con số kỳ diệu nếu chúng được dán nhãn, nhưng tôi vẫn muốn đánh bại bạn với gián tiếp dính.

— candied_orange
nguồn

4

Nếu bạn có đủ các đối tượng cần một biến, bạn có đủ các đối tượng để tạo một lớp mới.

— Jaketr00

1

Đây là câu trả lời tốt nhất, vì nó cho thấy vấn đề: Đó không phải là những con số ma thuật.

— TheBlastOne

2

"5 đối tượng mà tất cả phải có cùng chiều rộng và mỗi đối tượng được mã hóa độc lập chiều rộng của chúng, tôi sẽ đánh bạn bằng một cây gậy." Chào mừng đến với thế giới thú vị của thiết kế web.

— whatsisname

2

Số ma thuật không chỉ có vấn đề vì "Đưa ra quyết định ở một nơi" (còn gọi là DRY), mà còn bởi vì chúng khó hiểu.

— sleske

Có một sự thay thế cho việc bị đánh bằng gậy?

— djechlin

11

Bởi vì CSS không phải là ngôn ngữ lập trình, thay vào đó, nó là tệp cấu hình chứa dữ liệu biến cho chương trình của bạn.

Hiện tại CSS mạnh đến mức bạn thực sự có thể lập trình trong đó, nhưng đó là điểm chính. Về bản chất nó vẫn là một ngôn ngữ bản định kiểu .

Hãy lùi lại một bước. Hãy tưởng tượng chúng ta có một ngôn ngữ lập trình có thể vẽ trên màn hình. Hãy tưởng tượng chúng ta muốn lập trình nó để vẽ một trang web.

Đầu tiên, chúng tôi sẽ nhập hàng tấn số ma thuật vào mã của chúng tôi. Chiều rộng lề, chiều cao văn bản, thụt lề, v.v.

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

Vì vậy, chúng tôi trích xuất các số ma thuật, và đặt chúng lên đầu tệp của chúng tôi.

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

Bây giờ điều này là một chút xấu xí. Chúng tôi thay vì đọc số biến của chúng tôi từ một tập tin cấu hình.

margin 100
table 500
text size 12

Mm, điều đó hơi không rõ ràng ... Những con số đó có ý nghĩa gì? Những cái tên đó có ý nghĩa gì? Hãy chính thức hóa nó một chút.

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

Nhưng bạn biết đấy, chúng tôi muốn mở rộng chương trình của chúng tôi một chút. Chúng tôi cũng muốn nó vẽ các trang có nhiều bảng, trang không có bảng, trang có đoạn hoặc nút và hơn thế nữa. Hãy thêm các bộ chọn vào tệp cấu hình của chúng tôi để chúng tôi có thể chỉ định đoạn nào sẽ có phông chữ lớn hơn hoặc màu văn bản khác, có lẽ chúng tôi có thể hỗ trợ các phần tử lồng nhau, có lẽ chúng tôi có thể sử dụng một thuộc tính chung trong tệp cấu hình của mình và sau đó ghi đè lên một tệp cụ thể một trong một vài yếu tố lồng nhau.

Bạn cảm thấy nơi này đang diễn ra, cuối cùng bạn đến dưới dạng CSS. (Và một trình duyệt để kết xuất nó.)

Sau đó chúng ta có nên thêm các khả năng vào tệp cấu hình của mình để có thể tránh các số ma thuật một lần nữa không? Thêm biến? Thêm một tệp cấu hình cho tệp CSS của chúng tôi? Sẽ cảm thấy hơi vô nghĩa nếu bạn nhớ tệp CSS của chúng tôi là tệp cấu hình rất giống nhau.

Nhưng điều đó không đúng trong khóa học; Tệp CSS của bạn ngày càng lớn hơn và cuối cùng bạn gặp phải các vấn đề tương tự như với các số ma thuật ban đầu, cùng một số được lặp lại ở mọi nơi, đôi khi có một biến đổi nhỏ, v.v.

CSS hiện đại, tuy nhiên, cho phép nhiều cách để tránh sự lặp lại này. Bạn có thể sử dụng các lớp áp dụng cho nhiều thành phần, bạn có thể đặt kiểu cho tất cả các divs, nhưng sau đó ghi đè một lớp cụ thể và CSS 3 thậm chí cho phép một số loại sử dụng biến.

Điều đó không có nghĩa là bạn cần bắt đầu sử dụng biến CSS ở mọi vị trí có thể. Sử dụng nó ở nơi có ý nghĩa và sử dụng nó ở nơi bạn tránh trùng lặp hoặc nơi các kỹ thuật khác cũng có sẵn bị thiếu.

Cuối cùng, bạn cũng không muốn có quá nhiều số ma thuật trong tệp cấu hình của mình :-)

— Dorus
nguồn

Tại sao nó không quan trọng ở nơi dư thừa? Không phải bảo trì sẽ là một vấn đề cho dù nó ở đâu?

— Peter Mortensen

@PeterMortensen Đây luôn là sự cân nhắc giữa thời gian phát triển thấp hoặc khả năng bảo trì cao. Dự phòng cao rất dễ phát triển vì bạn có thể nhanh chóng thay đổi mọi thứ ở đây và ở đó, dự phòng thấp dễ bảo trì vì bạn có thể nhanh chóng thay đổi phong cách toàn cầu. Trong thực tế, bạn muốn ở một nơi nào đó ở giữa hai người, bởi vì đối mặt với nó, việc có một phong cách toàn cầu giúp việc thêm các trang mới trở nên dễ dàng hơn rất nhiều, nhưng việc mọi tính năng tối nghĩa cuối cùng đều tuân thủ mọi thay đổi phong cách toàn cầu có thể sẽ phát triển mãi mãi.

— Dorus

CSS tốt có các tính năng theo cả hai hướng. Và tùy thuộc vào nhà phát triển web quyết định sẽ dành bao nhiêu thời gian để giảm sự dư thừa và tăng khả năng bảo trì, hoặc dành thời gian để phá vỡ các trang / tính năng mới. Thật thú vị, điều tương tự cũng đúng với bất kỳ ngôn ngữ lập trình nào khác, nơi bạn có thể dành hàng tháng để đưa ra thiết kế hoàn hảo, hoặc nhiều ngày để phá hỏng chương trình của bạn và hàng tháng để săn lùng các lỗi không thể.

— Dorus

Thật thú vị, tôi vừa gặp phải câu hỏi này nói về việc trừu tượng hóa quá xa, và mất đi cả khả năng duy trì và thời gian phát triển.

— Dorus

5

Tại sao nó [một loạt các giá trị mã hóa dường như ngẫu nhiên] OK cho CSS / SVG?

Nó không ổn. Bạn có thể viết và duy trì các tệp ".css" đơn giản, nhưng cuối cùng các giá trị được mã hóa cứng ngẫu nhiên sẽ trở thành gánh nặng phổ biến.

Đối với bất kỳ điều gì khác ngoài các trang web cực kỳ đơn giản, bạn sẽ phải phát triển chiến lược "tìm và thay thế" có kỷ luật hoặc sử dụng bộ tiền xử lý CSS với các biến hoặc xác định kiểu thông qua JavaScript.

— Jackson
nguồn