Đường phân cách

Đầu vào là một yêu cầu viết bằng lời thường — “một hộp thoại có phần đầu, một danh sách lời mời và phần cuối” — và đầu ra là, với mỗi chỗ tiếp giáp mà yêu cầu đó ngụ ý, một mã tình huống và một className. Yêu cầu không bao giờ đòi một đường kẻ, và không được thêm đường kẻ cho một vùng “trông rõ ràng hơn”: việc có hay không có đường kẻ suy ra từ chỗ hai bên có dính sát nhau không và từ chỗ khoảng trống đã nói ranh giới đó chưa.

Luật

Đường phân cách là ranh giới được vẽ thành đường kẻ. Khoảng trống là cùng ranh giới đó được vẽ bằng sự vắng mặt. Hai cách vẽ, một sự thật — và một sự thật thì chỉ nói một lần.

Vì vậy đường kẻ không bao giờ được chọn vì một vùng “cần cho rõ”. Nó được chọn khi ranh giới vẫn phải đứng vững trong lúc hai bên buộc phải dính sát nhau — vì mật độ, vì phải căn thẳng hàng, hoặc vì chúng nằm trên một mặt liền đã tiêu hết cái khoảng trống mà ranh giới lẽ ra dùng. Ở nơi khoảng trống còn đó và đang làm đúng việc của nó, một đường kẻ là lời tuyên bố thứ hai về một đường nối đã ngã ngũ.

Mỗi đường kẻ có đúng một chủ sở hữu. Một tập sở hữu các đường giữa những thành viên của nó; một dải sở hữu cạnh nơi nó kết thúc; đường nối giữa hai vùng được khai báo một lần, bởi vế đứng sau. Hai phần tử cạnh nhau mà mỗi bên tự vẽ cạnh của mình thì ra hai đường và một đường kẻ không ai chịu trách nhiệm.

Mô-đun này phát ra ba sự thật và không phát ra gì khác: có hay không có đường kẻ, phần tử nào sở hữu nó, và nó chạy theo trục nào. Biến thiết kế màu nào tô đường kẻ là việc của luật màu. Nội dung đứng cách nó bao xa là việc của luật khoảng đệm. Một đường nối đáng bao nhiêu khoảng trống là việc của luật khoảng cách. Còn ranh giới bao quanh thay vì ngăn cách là một tuyên bố về tư cách thành viên và thuộc về luật quan hệ nhóm.

Đây là luật bắt buộc. Mọi chỗ tiếp giáp hiển thị ra đều có một tình huống đường phân cách, và tình huống đó có một mã ở dưới — kể cả đại đa số trường hợp không kẻ gì cả. Không có kích thước nào nhỏ đến mức được miễn: hai thẻ xếp chồng cách nhau bằng khoảng trống là DIVIDER-0, đúng cùng một lý do mà danh sách cài đặt là DIVIDER-1. Câu “có mỗi cái gạch mảnh thôi mà” không phải một chỗ được miễn — đó là chỗ luật này bị bỏ qua nhiều nhất, vì thêm một ranh giới thừa thì không tốn gì và không ai thấy khi duyệt, cho tới lúc một trang có mười một cái.

Mã tình huống

Mỗi tình huống mô-đun này chi phối đều mang một mã, DIVIDER-<số thứ tự>. Mã gọi tên TÌNH HUỐNG; cột className gọi tên thứ mà tình huống đó phát ra. Hai thứ này không giống nhau, và có hai mã không phát ra gì cả.

Số thứ tự là THỨ TỰ GẶP PHẢI, không phải một thang bậc. DIVIDER-5 không “lớn hơn” DIVIDER-2, và giữa DIVIDER-2 với DIVIDER-3 không có gì để chia đôi khoảng cách. 0 là sự vắng mặt; 1–3 xếp theo mức độ lặp lại của đường kẻ — nhiều đường bên trong một tập, một cạnh dưới một dải, một đường nối giữa hai vùng; 4 là ranh giới hoàn toàn không phải một cái ngăn cách; 5 là DIVIDER-1 đưa sang trục thứ hai; và 6 là đường kẻ không phải cạnh của ai.

DIVIDER-0 LÀ MỘT TÌNH HUỐNG, KHÔNG PHẢI MỘT CLASS. Không có “divider: none” nào để viết ra, và với lấy một cái viền trong suốt hay rộng bằng không để ghi lại quyết định cũng là đúng cái sai đó, chỉ đổi màu. Mã này tồn tại vì “chỗ này không kẻ” là câu trả lời người đọc phải nhận ra, trích dẫn được và bị bắt lỗi được — và vì nó là câu trả lời của đa số các bố cục kết hợp. Một tình huống không có tên là một tình huống không ai chứng minh được là đã làm sai.

DIVIDER-4 KHÔNG PHÁT RA GÌ TỪ MÔ-ĐUN NÀY, ĐIỀU ĐÓ KHÁC VỚI VIỆC KHÔNG PHÁT RA GÌ CẢ. Một đường bao khép kín là một đường kẻ có thật, nhìn thấy được, và rất thường là đúng — nhưng câu hỏi nó trả lời là những thứ này có phải một nhóm gọi được tên, khác với nhóm bao quanh nó không? Đó là một tuyên bố về tư cách thành viên, do luật quan hệ nhóm quyết, và luật đó cân đường bao với việc nâng lên thành một mặt riêng cũng như với việc để phẳng. Trả lời ở đây là chính bộ quy tắc nói một ranh giới hai lần — đúng cái lỗi mà mô-đun này tồn tại để chặn. Mã này có mặt để đường bao được phân loại và chuyển đi, chứ không phải để nó bị lẳng lặng xử lý như một đường phân cách.

Đọc một yêu cầu

1. Liệt kê những chỗ tiếp giáp mà yêu cầu nói ra. “Một hộp thoại có phần đầu, một danh sách lời mời và phần cuối” nói ra ba chỗ: phần đầu giáp danh sách, thành viên giáp thành viên bên trong danh sách, và danh sách giáp phần cuối.
2. Không bịa ra chỗ tiếp giáp mà yêu cầu không hề nhắc. Thanh bên, thanh công cụ tìm kiếm hay bảng so sánh không nằm trong yêu cầu đó. Giải cái được nói ra; phần còn lại giải khi nó xuất hiện.
3. Giải từ ngoài vào trong, rồi tới từng đường nối lồng bên trong. Mỗi chỗ tiếp giáp có đáp án riêng; phần tử cha không bao giờ thừa hưởng mã của con nó, và một tập có phần đầu thì mang hai mã chứ không phải một.
4. Với mỗi đường nối, gọi tên thứ nằm hai bên rồi hỏi câu hỏi nằm trong phần của từng mã. Mã đầu tiên có tình huống khớp chính là đáp án. Hỏi trước hết xem phần tử cha có đang giữ một khoảng trống chạy qua đúng đường nối này không — nếu có, đáp án là DIVIDER-0 và không cần hỏi thêm câu nào.
5. Nếu một phần tử cha trộn nhiều tình huống, phải tách phân cấp trước rồi mới chọn. Phần đầu và các thành viên không phải một tập. Nếu hai mã cùng khớp, chọn DIVIDER-0.

DIVIDER-0 — khoảng trống đã nói rồi

Tình huống. Hai thứ đứng cạnh nhau và giữa chúng đã có khoảng trống do phần tử cha đặt. Ranh giới đã được phát biểu. Thêm một đường kẻ là nói lại lần thứ hai cùng một câu.

Dấu hiệu nhận biết

• Phần tử cha đang giữ một gap chạy ngang qua đúng đường nối này.
• Hai bên đã tự có mặt nền, có bóng, hoặc có viền bao riêng — chúng đã tách nhau rồi.
• Nếu bỏ đường kẻ đi, không ai đọc nhầm hai bên thành một khối.
• Lý do duy nhất còn lại để giữ đường kẻ là “trông cho rõ ràng hơn”.

Tự hỏi. Bỏ đường kẻ này đi thì có ai đọc nhầm hai bên thành một thứ không? Nếu không — DIVIDER-0.

Ranh giới

• DIVIDER-1: DIVIDER-1 chỉ đúng khi các thành viên dính sát nhau trên một mặt liền. Ba thẻ rời nhau, mỗi thẻ có nền riêng, không phải một danh sách liền mạch.
• DIVIDER-2: nếu tiêu đề đứng cách nội dung một khoảng thì tiêu đề không cần cạnh dưới. Dải chỉ đóng cạnh khi nội dung chạy sát vào nó.
• DIVIDER-3: hai vùng có khoảng cách ở giữa thì không có đường nối nào để mà kẻ. Đường kẻ không bắc qua khoảng trống được.

Không có class nào cho tình huống này. Đừng vẽ một viền trong suốt, đừng đặt border-0 để “ghi lại là đã cân nhắc”. Vắng mặt là câu trả lời, và nó là câu trả lời của đa số các bố cục kết hợp.

Tình huống nghiệp vụ hay gặp. Lưới thẻ khoá học · hai phần nội dung của một trang có gap · biểu mẫu có các trường nhập liệu cách nhau · nhóm nút · bảng điều khiển nhiều ô số liệu · danh sách bài viết dạng thẻ · hai vùng bố cục đã cách nhau bằng khoảng trống · nội dung hộp thoại cách phần cuối một khoảng.

DIVIDER-1 — một tập thành viên cùng loại, kẻ lặp lại

Tình huống. Nhiều mục cùng loại nằm liền nhau trên một mặt duy nhất: mỗi mục có khoảng đệm bên trong riêng, không có khoảng trống giữa chúng. Ranh giới giữa mục này và mục kế chỉ còn đường kẻ để nói.

Dấu hiệu nhận biết

• Các mục là những phiên bản của cùng một thứ — cùng vai trò, cùng cách đọc, cùng loại hành động.
• Chúng dính sát nhau; toàn bộ khoảng đệm nằm bên trong mỗi mục.
• Số lượng mục là dữ liệu, không phải một quyết định thiết kế.
• Chèn khoảng trống vào sẽ làm chúng đọc thành nhiều khối rời thay vì một danh sách.

Tự hỏi. Các mục này có phải là những phiên bản của cùng một loại, đang nằm sát nhau trên một mặt liền không?

Ranh giới

• DIVIDER-0: nếu các mục cách nhau bằng khoảng trống thì tập không có đường nối. Đây là chỗ hay sai nhất của cả mô-đun — vừa gap vừa divide-y.
• DIVIDER-2: một phần đầu của danh sách không phải một thành viên của danh sách. Cạnh dưới của nó là DIVIDER-2, các đường bên dưới nó là DIVIDER-1. Hai mã, hai chủ sở hữu, một cây.
• DIVIDER-3: DIVIDER-3 là hai vùng khác loại; DIVIDER-1 là N thành viên cùng loại.
• DIVIDER-5: nếu các ô so sánh được cả theo hàng và theo cột thì đó là ma trận.

Chủ sở hữu là phần tử cha. Không bao giờ đặt border-b lên từng mục: mục cuối sẽ mọc thêm một đường kẻ dưới đáy, và đường đó là một ranh giới ngoài mà không ai yêu cầu.

Tình huống nghiệp vụ hay gặp. Danh sách cài đặt · lịch sử giao dịch · thông báo · kết quả tìm kiếm · danh sách thành viên · bảng xếp hạng · lệnh trình đơn · các mục bài học trong một khoá học · dòng thời gian hoạt động · danh sách tệp đính kèm · các dòng trong tóm tắt đơn hàng.

DIVIDER-2 — một dải tự đóng cạnh của nó

Tình huống. Một dải gọi tên hoặc điều khiển phần phía sau nó — phần đầu, thanh công cụ, thanh thẻ tab, phần cuối hành động — và nội dung chạy sát vào dải đó. Đường kẻ nói: dải này ở trên nội dung, không nằm trong nội dung.

Dấu hiệu nhận biết

• Dải ngắn, phần sau là nội dung thật.
• Nội dung có thể trượt, đổi, rỗng hoặc dài vô hạn, còn dải thì đứng yên.
• Nếu bỏ đường kẻ, dải bị đọc như dòng đầu tiên của nội dung.
• Cạnh này thuộc về dải, không thuộc về nội dung: nội dung không biết mình đứng sau ai.

Tự hỏi. Dải này có đang điều khiển hoặc gọi tên phần đứng sau nó, và phần đó có chạy sát vào nó không?

Ranh giới

• DIVIDER-0: nếu giữa dải và nội dung có một khoảng trống thật thì quyền sở hữu đã được nói bằng khoảng trống rồi. Đừng nói thêm lần nữa.
• DIVIDER-1: dải không phải một thành viên của tập. Đây là lý do một danh sách có phần đầu lại mang hai mã, chứ không phải một divide-y phủ hết.
• DIVIDER-3: DIVIDER-2 là quan hệ sở hữu (dải chi phối nội dung); DIVIDER-3 là quan hệ ngang hàng.
• DIVIDER-6: DIVIDER-2 là cạnh của một phần tử có nội dung; DIVIDER-6 là một phần tử chỉ có mỗi đường kẻ.

Trạng thái bám dính. Dải ghim giữ nguyên DIVIDER-2 ở mọi trạng thái, kể cả khi chưa ai cuộn. Cho đường kẻ hiện ra lúc cuộn là biến ranh giới thành hệ quả của vị trí cuộn.

Tình huống nghiệp vụ hay gặp. Phần đầu của hộp thoại · thanh công cụ phía trên bảng dữ liệu · thanh thẻ tab · phần cuối chứa nút của một biểu mẫu dài · phần đầu cột của một danh sách · thanh đường dẫn phân cấp sát nội dung · thanh bộ lọc ghim trên vùng kết quả · thanh tiêu đề của khung bên.

DIVIDER-3 — hai vùng ngang hàng chung một đường nối

Tình huống. Hai vùng khác loại, không bên nào sở hữu bên kia, nằm dính nhau vì chúng chia nhau một mặt liền hoặc vì bố cục không cho phép khoảng trống. Chỉ có một đường nối, và nó được khai báo một lần.

Dấu hiệu nhận biết

• Mỗi bên tự gọi tên được, mỗi bên có nội dung riêng.
• Không bên nào là “phiên bản” của bên kia — chúng không cùng một loại.
• Hai bên chạm nhau; không có khoảng trống nào giữa chúng.
• Đúng một ranh giới, không lặp lại.

Tự hỏi. Hai bên có ngang hàng nhau và có thật sự chạm nhau không, hay giữa chúng đã có khoảng trống?

Ranh giới

• DIVIDER-0: đây là ranh giới quan trọng nhất của mã này. Hai vùng cách nhau bằng gap thì không kẻ. Đường kẻ không bắc qua khoảng trống được.
• DIVIDER-1: hai vùng khác loại là DIVIDER-3; N mục cùng loại là DIVIDER-1. Dùng divide-x cho hai vùng khác loại là mượn cơ chế của một tập để nói một chuyện không phải tập.
• DIVIDER-2: bên nào chi phối bên nào thì lên DIVIDER-2.

Khai báo một lần, bởi vế sau. Vế trước không mọc border-r, vế sau mang border-l. Cả hai cùng khai thì ra hai đường sát nhau, và trên màn hình mật độ cao chúng dày gấp đôi các đường còn lại.

Tình huống nghiệp vụ hay gặp. Cây thư mục cạnh vùng soạn thảo · danh sách hội thoại cạnh khung trò chuyện · nội dung bài học cạnh khung ghi chú · vùng chính cạnh thanh bên ghim · vùng nhập cạnh vùng xem trước · khung bộ lọc dính vào vùng kết quả · cụm số liệu tổng cạnh cụm số liệu chi tiết trong cùng một thẻ.

DIVIDER-4 — đường kẻ bao quanh chứ không ngăn cách

Tình huống. Đường kẻ chạy hết một vòng quanh một đối tượng. Nó không nói “bên này khác bên kia”; nó nói “những thứ bên trong tôi là một nhóm gọi được tên, và nhóm đó khác với nhóm bao quanh”.

Dấu hiệu nhận biết

• Đường kẻ khép kín, thường kèm bo góc.
• Bỏ nó đi thì không có đường nối nào bị mất — chỉ có một nhóm bị mất tên.
• Nó không nằm giữa hai thứ nào cả.

Tự hỏi. Đường này đang ngăn cách hai thứ, hay đang gom một nhóm lại?

Ranh giới

• DIVIDER-1, DIVIDER-2, DIVIDER-3: cả ba mã kia đều là một cạnh nằm giữa hai bên. Mã này là bốn cạnh nằm quanh một bên.
• DIVIDER-5: khung ngoài của một ma trận là DIVIDER-4; các đường bên trong ma trận là DIVIDER-5. Một ma trận thường mang cả hai, và chúng có hai chủ sở hữu khác nhau.

Mô-đun này không trả lời. Câu hỏi “nhóm này có đáng được gọi tên bằng một đường bao không” là câu hỏi về tư cách thành viên, và nó phải được cân với hai lựa chọn khác mà mô-đun này không nhìn thấy: nâng lên thành một mặt riêng, hoặc để phẳng hoàn toàn. Trả lời ở đây là chính bộ quy tắc nói một ranh giới hai lần — đúng cái lỗi mà mô-đun này tồn tại để chặn. Mã này có mặt để đường bao được phân loại và chuyển đi, chứ không phải để nó bị lẳng lặng xử lý như một đường phân cách.

Tình huống nghiệp vụ hay gặp. Thẻ khoá học · hộp cảnh báo · ô nhập liệu · một mặt phẳng chứa danh sách · khung ảnh · thẻ tóm tắt thanh toán · khung mã nguồn · viền của một nút phụ.

DIVIDER-5 — ma trận ô, so sánh trên hai trục

Tình huống. Các ô so sánh được theo hàng và cũng so sánh được theo cột. Một ô có nghĩa nhờ vị trí của nó trên cả hai trục, nên cả hai trục đều cần được nói.

Dấu hiệu nhận biết

• Đọc dọc một cột là so sánh được; đọc ngang một hàng cũng so sánh được.
• Các ô dính nhau, khoảng đệm nằm bên trong ô.
• Cột có tiêu đề riêng, hoặc mỗi cột là một đối tượng đem ra so sánh.

Tự hỏi. Một ô ở đây có nghĩa nhờ cả hàng lẫn cột của nó, hay chỉ nhờ thứ tự trong một danh sách?

Ranh giới

• DIVIDER-1: danh sách chỉ có một trục. Một hàng nhiều cột nhưng các cột không so sánh được với nhau thì vẫn là DIVIDER-1 — cột lúc đó chỉ là bố cục bên trong hàng.
• DIVIDER-4: khung ngoài không thuộc mã này.
• DIVIDER-0: một lưới thẻ có gap không phải ma trận theo nghĩa này. Nó đã nói ranh giới bằng khoảng trống.

Chỉ kẻ bên trong. Ô đầu và ô cuối không mọc thêm cạnh ngoài. Nếu khung ngoài là cần thiết, nó thuộc về mặt chứa ma trận, không thuộc về các ô.

Tình huống nghiệp vụ hay gặp. Bảng so sánh gói dịch vụ · bảng điểm theo tuần · lịch dạng lưới · ma trận quyền theo vai trò · bảng đối chiếu tính năng · bảng tồn kho theo kho và theo mặt hàng · bảng giờ học theo ngày.

DIVIDER-6 — đường kẻ tự nó là một phần tử

Tình huống. Đường kẻ không phải cạnh của ai cả. Nó tự đứng trong dòng chảy như một phần tử, vì hai bên nó là những khối tuỳ ý mà không bên nào có tư cách sở hữu đường nối — hoặc vì đường kẻ còn phải mang một nhãn.

Dấu hiệu nhận biết

• Hai bên là nội dung dạng dòng chảy tự do: đoạn văn, khối nội dung sinh ra từ dữ liệu, các phần không đoán trước được.
• Không có vùng chứa nào ôm riêng từng bên để mà gắn cạnh vào.
• Hoặc: giữa đường kẻ có chữ — “hoặc”, “hôm nay”, “tin chưa đọc”.

Tự hỏi. Có phần tử nào ở đây sở hữu được cái cạnh này không? Nếu không có ai — DIVIDER-6.

Ranh giới

• DIVIDER-2: DIVIDER-2 là cạnh của một dải có nội dung. DIVIDER-6 là một phần tử chỉ có đường kẻ.
• DIVIDER-3: nếu hai bên là hai vùng có vùng chứa riêng thì đường nối có chủ, và chủ là vế sau.
• DIVIDER-1: một mốc chia trong danh sách (“Hôm nay”) không phải một thành viên của danh sách; nó là DIVIDER-6 nằm giữa các thành viên.

Ngữ nghĩa là một phần của mã. Một ngắt chủ đề trong văn bản dài là một sự kiện có nghĩa, không phải một cái gạch trang trí; nó phải được viết bằng phần tử mang đúng nghĩa đó.

Tình huống nghiệp vụ hay gặp. Ngắt chủ đề trong bài viết dài · “hoặc” giữa đăng nhập bằng mật khẩu và đăng nhập bằng nhà cung cấp · mốc ngày trong luồng tin nhắn · vạch “tin chưa đọc” · ngắt giữa hai phần của một trang điều khoản · vạch chia trong một trình đơn thả xuống giữa nhóm hành động thường và hành động phá huỷ.

Đầu vào

Quy tắc

1. Một ranh giới chỉ được nói một lần. Đường nối đã mang khoảng trống thì không mang thêm đường kẻ.
2. Một đường kẻ có một chủ sở hữu. Hai phần tử cạnh nhau không bao giờ cùng vẽ cạnh đối diện của nhau.
3. Tập kẻ bằng divide-* trên phần tử cha, không bao giờ bằng viền dưới trên từng thành viên — cách sau vẽ thừa một đường dưới thành viên cuối, và đó là một ranh giới ngoài không ai yêu cầu.
4. Đường kẻ cần một cạnh để chạy dọc theo. Không đường kẻ nào bắc qua khoảng trống, và một đường kẻ khai trên phía không tiếp giáp với gì cả là trang trí.
5. Trục đi theo trục của chính cái tập. Dọc hay ngang là hệ quả, không bao giờ là tiêu chí.
6. Đường kẻ dừng ở chỗ vật chủ của nó dừng. Vật chủ bo góc phải cắt nội dung để đường kẻ dừng ở góc thay vì chạy quá ra ngoài.
7. divide-* mô tả cái tập, không mô tả số lượng. Tập đang hiển thị một thành viên vẫn giữ class; class phát biểu một quy tắc về các thành viên, và một thành viên thì không có đường nối nào để vẽ.
8. Mô-đun này không bao giờ phát ra lựa chọn biến thiết kế màu, khoảng đệm, bo góc hay khoảng cách.
9. Mọi chỗ tiếp giáp hiển thị ra đều rơi vào đúng một mã. Không bố cục nào nằm ngoài phạm vi.

Ngoại lệ

Ngoại lệ là một phần của luật, không phải chỗ để lách. Mỗi ngoại lệ dưới đây đều đóng và nêu rõ mã nó áp dụng vào.

• Dải ghim. Một dải đứng yên trong khi nội dung trượt bên dưới giữ nguyên DIVIDER-2 ở mọi trạng thái, kể cả trạng thái chưa ai cuộn. Chính đường kẻ là thứ nói cho người đọc biết dải nằm trên nội dung chứ không nằm trong nội dung; cho nó hiện ra lúc cuộn là biến ranh giới thành hệ quả của vị trí.
• Điểm ngắt đổi chủ sở hữu. Đường nối giữa hai vùng khi xếp chồng thì chuyển đường kẻ từ cạnh dọc sang cạnh ngang và giữ nguyên DIVIDER-3. Nó chỉ được rơi về DIVIDER-0 tại đúng điểm ngắt đó khi bố cục xếp chồng đưa vào khoảng trống, và khoảng trống ấy nay nói ranh giới. Ranh giới vẫn được nói đúng một lần ở cả hai phía điểm ngắt.
• Tính đồng nhất trạng thái. Trạng thái khung chờ mang đúng những đường kẻ mà trạng thái đã tải sẽ mang. Danh sách chỉ mọc đường kẻ khi dữ liệu về là danh sách sẽ nhảy bố cục, và cú nhảy đó do bộ quy tắc gây ra chứ không phải do dữ liệu.
• Cạnh ngoài của ma trận. DIVIDER-5 chỉ kẻ các đường giữa các ô. Khung ngoài của ma trận là ranh giới của vật chủ và thuộc về luật quan hệ nhóm, không phải chuyện ô đầu và ô cuối mỗi cái mọc thêm một cạnh.
• Hai mã cùng khớp. Chọn DIVIDER-0. Chỉ thêm đường kẻ khi bên yêu cầu nêu rõ tình trạng dính sát khiến khoảng trống không còn dùng được; “nhìn hơi trống” không phải một dữ kiện.
• Đường kẻ mang nghĩa khác ngoài ranh giới — thanh tiến độ, gạch chân đánh dấu thẻ tab đang chọn, gạch ngang giá cũ, trục biểu đồ — không phải đường phân cách và không thuộc mô-đun này. Chúng được đặt tên bởi thứ mang cái nghĩa đó.

Đầu ra

Mỗi phần tử một khối, từ ngoài vào trong:

seam: <thứ nằm ở mỗi bên>
adjacency: <touching | separated by a parent gap>
owner: <set parent | band | later region | matrix + rows | standalone break | none>
situation: <DIVIDER-0 | DIVIDER-1 | DIVIDER-2 | DIVIDER-3 | DIVIDER-4 | DIVIDER-5 | DIVIDER-6>
className: <no class | divide-y divide-border | border-b border-border | border-l border-border | divide-y+divide-x | border-t border-border>
reason: <sự thật nghiệp vụ loại trừ mã liền kề, kèm bằng chứng ranh giới chưa được nói bằng khoảng trống>

Ví dụ đã giải

Yêu cầu. “Hộp thoại mời thành viên: phần đầu có tiêu đề, danh sách lời mời đang chờ nằm dưới, và phần cuối có nút Huỷ và nút Lưu.”

Yêu cầu này nói ra một mặt hộp thoại liền, nên phần đầu, danh sách và phần cuối chạy sát vào nhau. Nó nói ra ba đường nối bên trong mặt đó và một đường nối bên trong phần cuối. Nó không nói tới thanh bên, không nói tới thanh công cụ trên danh sách, không nói tới điểm ngắt, không nói tới bảng so sánh, nên không giải những thứ đó. Còn bản thân hộp thoại có đường bao hay không là chuyện của mặt chứa chứ không phải chuyện ngăn cách, và mô-đun này chỉ chuyển nó đi.

seam: mặt hộp thoại với trang phía sau
adjacency: touching
owner: none
situation: DIVIDER-4
className: no class from this module
reason: đường kẻ chạy hết một vòng quanh hộp thoại và không ngăn cách nó với phần tử cùng cấp nào, điều này loại trừ DIVIDER-2 và chuyển quyết định sang luật quan hệ nhóm

seam: phần đầu với danh sách lời mời
adjacency: touching
owner: band
situation: DIVIDER-2
className: border-b border-border
reason: phần đầu gọi tên phần đứng sau chứ không phải một trong các lời mời, điều này loại trừ DIVIDER-1, và mặt hộp thoại là liền nên không có khoảng trống nào chạy qua đường nối này

seam: lời mời với lời mời
adjacency: touching
owner: set parent
situation: DIVIDER-1
className: divide-y divide-border
reason: mỗi hàng là một phiên bản của cùng một loại và số lượng là dữ liệu, điều này loại trừ DIVIDER-3, và toàn bộ khoảng đệm nằm bên trong hàng nên không có khoảng trống nào nói ranh giới này

seam: danh sách lời mời với phần cuối
adjacency: touching
owner: band
situation: DIVIDER-2
className: border-t border-border
reason: phần cuối chi phối hộp thoại chứ không phải một lời mời nữa, điều này loại trừ DIVIDER-1; nó nằm sau nội dung nên đóng cạnh trên của chính nó

seam: nút Huỷ với nút Lưu
adjacency: separated by a parent gap
owner: none
situation: DIVIDER-0
className: no class
reason: phần cuối đã đặt khoảng trống giữa hai nút nên ranh giới đã được nói, điều này loại trừ DIVIDER-3

Yêu cầu không nói hộp thoại có cuộn hay không, nên không giải dải ghim nào; không nói tới hàng nhãn cột, nên không giải ma trận nào; và không nói tới mốc ngày giữa các lời mời, nên ở đây không có gì là DIVIDER-6.

Phạm vi

Mô-đun này phát biểu một luật đúng với mọi front end. Nó không gọi tên sản phẩm nào, thư viện thành phần nào, khoá registry nào hay repository nào. Mọi ví dụ đều là className thường trên markup thường.