本文已經過原作者 Ishadeed 授權翻譯。
把設計細節放在一邊我通常做的第一件事就是把設計細節放在一邊。我想先知道這次設計主要包括哪些部分，然後在關注每個部分的細節。考慮以下UI：
在上面UI中，有以下特點：
Header/Navigation中間內容 部分底部的 How it works 部分接著，我們先把這三個主要部分抽象出來：
抽象後，我們可以看到主要的部分，主宋就可以幫助我們考慮如何佈局元件，而不用考慮每個元件的細節。
我是這樣想的：
Full-width header：頭部的導航欄Centered Content：中間內容水平居中，注意，這個一般需要設定最大寬度 max-width。How it works：這是一個4列的佈局，整個部分都被限制在一個包裝器中。接著，把上面三個部分用程式碼表示出來：
.wrapper { margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; max-width: 1140px;}.hero__content { max-width: 700px; margin-left: auto; margin-right: auto;}.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr);}拿到 UI 時，我們不是馬上就開始行動，而是要觀察整體的構成，先實現每塊的構成，然後再去深入構成的實現。
文章頁面在本例中，我們有一個文章頁面佈局。這是UI，它包含:
頭部圖片文章標題文章內容側邊欄（旁邊）我們再一次把它抽象成主要的幾個部分：
抽象主要包括幾個部分：
網站的頭部寬度是 100%標題：包含文章標題和說明，其內容左對齊，要設定最大寬度兩列布局，包含main和sidebar元素。文章內容，水平居中並有最大寬度。文章-頁面標題這裡不需要什麼佈局方法。一個簡單的max-width就可以了，當然還需要加些 padding，增加一些舒適距離。
.page-header { max-width: 50rem; padding: 2rem 1rem;}main 元素是視口的整個寬度減去側邊欄的寬度。通常，側邊欄應具有固定的寬度。為此，使用CSS網格是完美的。
.page-wrapper { display: grid; grid-template-columns: 1fr;}@media (min-width: 800px) { grid-template-columns: 1fr 250px;}對於文章的內部內容，應該將其限制在一個包裝器中。
.inner-content { max-width: 50rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem;}有些整體的佈局後，我們來看具體的細節。
深入細節How It Works 部分在本文的第一個示例中，我們來看一下 How It Works 部分 的細節實現。
列這裡的步驟一，二，三，有沒有可能會增加或者減少的情況，如果有，我們應該如何處理？我們是否需要列的高度相等，特別是當一個卡片有一個很長的文字？標題我們是否需要該部分標題留在一邊？還是在某些情況下應採用全寬？
響應式設計當網頁寬度縮小時，我們需要做響應式嗎？如果有, 那觸發的條件是什麼？
這些是我們開發可能會遇到的問題，你覺得怎麼樣?作為一名前端開發人員，我們應該考慮這樣的邊緣情況，而不僅僅按 UI 照貓畫虎這樣簡單。
由於本文著重於思考過程，所以無法詳細介紹一個個有可能出現的情況。
在上面的模型的第一個和第三個版本中，步驟數分別是3和2。我們可以使CSS動態化來處理嗎？可以。
HTML
<div class="wrapper"> <section class="steps"> <div> <h2>How it works</h2> <p>Easy and simple steps</p> </div> <div class="layout"> <div class="layout__item"> <article class="card"></article> </div> <div class="layout__item"> <article class="card"></article> </div> <div class="layout__item"> <article class="card"></article> </div> </div> </section></div>CSS
.steps { display: grid; grid-template-columns: 1fr; grid-gap: 1rem;}@media (min-width: 700px) { .steps { grid-template-columns: 250px 1fr; }}.layout { display: grid; grid-template-columns: 1fr; grid-gap: 1rem;}@media (min-width: 200px) { .layout { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }}我使用了CSS grid minmax()和auto-fit關鍵字。這在卡片數量可以增加或減少的情況下很有用。
內容部分圖片圖片應如何呈現？它是每天變化的還是應該從CMS更新？是使用HTML <img>還是CSS background？圖片的預期長寬比是多少？我們是否需要根據視口大小使用多個影象大小？圖片的部分是否可能會換成影片？高度內容最小高度是多少？
內容長度我們需要設定標題和描述的最大長度嗎?如果是，設計期望處理的最小值和最大值是多少？
元素之間的間距如何處理垂直間距？
內容中心如何水平和垂直居中內容?已知我們只知道寬度，而高度是未知的。
限制內容為了提高可讀性，最好限制內容。理想的寬度是多少？
響應式設計我們需要根據視窗寬度改變字型大小嗎?如果是，我們應該使用基於px的單位，視口單位，或CSS clamp()函式?
根據我們所做的專案的性質，我們應該找到這些問題的答案，這將幫助我們確定元件的構建方式。
有時，很難回答每個問題，但是問得越多，獲得良好的無錯誤結果的可能性就越大。
在本部分中，我將解決子元素之間的間距。我喜歡使用flow-space實用程式。我是從Andy Bell的Piccalil部落格中學到的。目的是在直接同級元素之間提供間距。
html
.flow > * + * { margin-top: var(--flow-space, 1em);}如前面所見，實現元件的過程不僅要使其與 UI 完全匹配，還要考慮邊緣情況。希望智米從本文中學到至少一件事。
我是小智，我們下期再見！
原文:https://ishadeed.com/article/thinking-like-a-front-end-developer/