2 篇文章 含有標籤「CSS Design」

v5 版本使用 GridThemeProvider 覆寫樣式問題​

下面為示意程式範例

const Dialog = ({type, title, message, buttons}) => {
    return (
        <DialogRoot>
            <Title type={type}>{title}</Title>
            <MessageContent dangerouslySetInnerHTML={{__html: message}} />
            <GridThemeProvider gridTheme={{
                gutter: '5px',
            }}>
                <Container fluid>
                    <Row>
                        {buttons.map(row => (
                            <Col key={row.id} col>
                                <ModalButton>{row.text}</ModalButton>
                            </Col>
                        ))}
                    </Row>
                </Container>
            </GridThemeProvider>

        </DialogRoot>
    );
};

const App = () => {
    return (
        <GridThemeProvider>
            <Dialog/>
        </GridThemeProvider>
    );
};

可以發現在為了讓 gutter 的間距設定變更，在 Modal 進行的覆寫， 但因為v5版本改為使用 styled-component 的 createGlobalStyle 設定 :root CSS變數，所以導致當光箱插入Dom時， createGlobalStyle又再次將新的設定插入到dom之中，讓原本的CSS設定覆蓋了，導致跑版。

前端設計開發，包含了設計與開發

過度依賴內容，靜態寫死佈局​

• 高度寫死
• Padding

因為設計稿是死的，在沒規範過的設計稿的情況下，我們應該以前端規範的的情況，或是第一版的設計規範繼續往下進行， 不應該在沒規範的情況下跟著做，「響應式設計」考慮的不只是在不同尺寸中的不同顯示，而是「適應空間」， 我們不管今天設計師是以平面設計角度出發，我們都應該要以「響應式設計」為思考出發點。

一個最大的問題，「過度依賴內容」

文字修改、異動、不同語系文字長度，算得剛剛好，各尺寸一種高度設定(xs, sm, md, lg, xl, xxl)​

高度內容應該要被撐開，還是 過溢字元

寫死寬高，各Padding, Margin 按照設計稿，並依照每個尺寸細緻的設定 (xs, sm, md, lg, xl, xxl 各一種設定)​

識別出通用設定，設計稿不會動，不該 微距調整例 如 變成只有 xs -> md -> xxl

不考慮滿版，還是由內容撐開寬度，直接寫死寬度，按照設計稿，並依照每個尺寸細緻的設定​

識別出來是滿版還是內容撐開高度+Padding

項目卡片列表，項目增加的情況，計算幾px​

100px切為4等分應該為 25%，而不是25px

Margin 與 Padding​

項目與項目間的間隔，是 Margin

統一使用 margin-bottom 原則頂開下面，要隔開多少

項目內的補間，為 Padding

由於在設計中偶爾會遇到 通用為 padding, 但特定元素為滿版，所以建議在每個區塊間設定 padding, 而不是一個大區塊設定 padding，而這個 Padding 為固定的CSS參數設定

可以的話，多一層也無所謂，不要只想著複寫​

有時候把前端設計切為 layout 層跟 樣式層，是對後續維護閱讀調整有相當大的幫助 可以讓你的視覺中直接隔開類別

至於命名問題，命名空間​

使用 Styled-component 沒有 BEM命名問題，因為他會幫你做 BEM 這個命名問題也包含明確定義 dom 結構的內容，

Container 就是 Container，Grid 就是 Grid， 元件切分可以讓我們更容易的對命名也獨立的空間

例如：

Title、Desc，在每個地方幾乎都會有，如果沒切分命名空間，就會是 ProductTitle, GoodsTitle

不管如何，一定要有網格系統、ZIndex 原則​

你需要有一個負責排版的系統 boostrap grid system 或是 tailwind grid system 也好，都行。 只要不是瞎所有自定義，「一句我想跟設計稿一樣」