Tip #29: Debug your CSS with a ??? utility

from shaunchander.me

Beginner

/

HTML / CSS

當我們在開發網站時，我們經常需要在元素上應用一些 CSS 樣式，以便我們可以更好地理解它們的位置和大小。但是，每次都要為元素添加一個樣式，然後刪除它，這樣做很麻煩。為了解決這個問題，我們可以製作一個名為 ??? 的 CSS 樣式，這個樣式可以為元素以及它的所有子元素添加一個紅色的邊框，讓我們方便看出元素的 box model。

以 Tailwind CSS 為例

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .\?\?\? > * {
    @apply outline outline-2 outline-red-500/75;
  }
}

你可以根據自己的喜好修改屬於自己的 ??? 樣式，例如，我只想顯示使用 ??? 的元素的邊框，而不是它的所有子元素，我就可以拿掉 > * 這個選擇器。

即時編輯器

const App = styled.div` & .\\?\\?\\? { outline: 2px solid red; } `; render( <App> <div className="???"> <div className="p-4">Hello</div> <p>World</p> </div> </App> );

const App = styled.div`
  & .\\?\\?\\? {
    outline: 2px solid red;
  }
`;

render(
  <App>
    <div className="???">
      <div className="p-4">Hello</div>
      <p>World</p>
    </div>
  </App>
);

結果

Loading...

提示

Docusaurus 的 live code editor 與 styled-components 似乎要使用 \\ 來 escape ?，所以在這裡我們使用 \\?\\?\\? 來代替 \?\?\?。