日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

本文探討了為什么人們?cè)贑SS方面表現(xiàn)不佳。文章提到CSS的復(fù)雜性和不斷變化的標(biāo)準(zhǔn)是導(dǎo)致問題的主要原因。作者還討論了開發(fā)者和設(shè)計(jì)師之間的溝通問題，以及缺乏足夠的培訓(xùn)和教育。他提到了一些常見的CSS錯(cuò)誤，例如盒模型和浮動(dòng)，以及如何避免它們。

下面是正文~~

許多開發(fā)人員一想到 CSS，就會(huì)想到彼得-格里芬（Peter Griffin）試圖打開百葉窗。但對(duì)其他人來說，CSS 更像是把手伸進(jìn)《沙丘》中的痛苦之箱，而某個(gè)產(chǎn)品經(jīng)理卻拿著匕首抵著他們的脖子，讓他們不敢把手抽出來。

有幾個(gè)原因可以解釋為什么科技公司在 CSS 方面一直舉步維艱。

• 我們不擅長(zhǎng)教授 CSS。雖然有大量?jī)?yōu)秀的 CSS 實(shí)踐者在分享他們的知識(shí)（如 Stephanie Eckles、Kevin Powell 和 Adam Argyle 等），但很多人在大學(xué)或訓(xùn)練營(yíng)中學(xué)習(xí) HTML 和 CSS，而這些人的知識(shí)可能并不淵博，他們使用過時(shí)的技術(shù)，或者為了偏愛 Bootstrap 或 Tailwind 等框架而忽略了基礎(chǔ)知識(shí)。因此，很多人對(duì) HTML 和 CSS（網(wǎng)絡(luò)的基本構(gòu)件）的了解并不深入。
• 我們不擅長(zhǎng)招聘 CSS。幾乎每個(gè)全?；蚯岸斯こ處煹恼衅感畔⒍紩?huì)將精通 HTML、CSS 和 JavaScript 作為必備條件，但在面試求職者時(shí)，他們很少會(huì)測(cè)試 JavaScript 以外的技能。如果公司最終錄用了掌握 CSS 技能的人，那通常是偶然的。如果你沒有掌握這些技能的人，你就無法審查其他人是否掌握這些技能，問題就會(huì)一直延續(xù)下去。
• 我們不擅長(zhǎng)編寫 CSS。由于缺乏對(duì) CSS 的深入了解，又無法聘請(qǐng)到具備這方面知識(shí)的人才，人們不得不通過依賴 Bootstrap/Tailwind 或嘗試使用 JavaScript 來完成所有工作，來避免編寫 CSS。最終，他們把事情搞得過于復(fù)雜，導(dǎo)致 CSS 極難維護(hù)。

編寫 CSS 就是將同一套視覺樣式反復(fù)應(yīng)用于各種不同的環(huán)境中，直到你死去

盡管 CSS 技術(shù)取得了最新進(jìn)展，但許多人仍停留在這種 BEM 思維模式中，試圖完美地封裝一切，以免在進(jìn)行更改時(shí)出現(xiàn)意想不到的結(jié)果。

以 BEM 文檔中的這個(gè)例子為例：

.page__header {
  padding: 20px;
}

.page__footer {
  padding: 50px;
}

這實(shí)際上與使用 Tailwind 等框架中的實(shí)用工具類并無太大區(qū)別，只不過在任何其他情況下，你都不會(huì)使用 page__header 為元素添加 20 像素的 padding 。

使用 Tailwind 的 "原子優(yōu)先"方法，你需要為每一個(gè)單獨(dú)的設(shè)計(jì)決策應(yīng)用一個(gè)類，這樣就會(huì)產(chǎn)生像他們網(wǎng)站上的這個(gè)例子一樣的標(biāo)記：

  
  

    

      

        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      
    
    
  

我們基本上是將這些相同的上下文設(shè)計(jì)決策（在這個(gè)例子中，就是這張卡片看起來如何）轉(zhuǎn)移到標(biāo)記中的類名上，而不是在我們的CSS中添加新的類名。

那么，答案是什么呢？

我們希望我們的風(fēng)格足夠通用，可以在不同的語(yǔ)境中重復(fù)使用，但又不會(huì)太通用，以至于我們不得不在這些語(yǔ)境中不斷重復(fù)自己的風(fēng)格。

簡(jiǎn)而言之，我們的想法是用單個(gè)類為單個(gè)組件設(shè)計(jì)樣式，用實(shí)用工具類在不同上下文中組成或修改組件，并提供布局以保持頁(yè)面之間和頁(yè)面內(nèi)部的一致性。

酷酷的樣子

讓我們重構(gòu) Tailwind 網(wǎng)站上的卡片示例。

這張卡片包含一個(gè)推薦信，但我們可能想在不同的上下文中使用這種卡片模式。我們的卡片不應(yīng)關(guān)心其內(nèi)部的內(nèi)容。也就是說，在這個(gè)特定的卡片示例中，我們不會(huì)使用 .card- 對(duì)所有內(nèi)容進(jìn)行限定。這些樣式只決定了卡片容器的外觀。

/* /scss/components/_card.scss */
.cool-card {
  border-radius: $radius-medium;
  background-color: $color-surface-brand-light;
  overflow: hidden;
}

@media (prefers-color-scheme: dark) {
  .cool-card {
    background-color: $color-surface-brand;
    color: $color-text-inverse;
  }
}

這里使用的是 SCSS 變量，而不是 CSS 標(biāo)記的自定義屬性。我喜歡自定義屬性，但有爭(zhēng)議的是，我不喜歡使用標(biāo)記。

我們的設(shè)計(jì)系統(tǒng)不僅定義了我們使用的特定值（顏色、類型、間距），還定義了我們使用這些值的上下文。我們不給開發(fā)人員提供允許他們應(yīng)用任何顏色的實(shí)用類（例如 .bg-slate-100 ），我們只希望在特定的上下文中使用特定的顏色。

每當(dāng)我看到一個(gè) mixin 會(huì)對(duì)調(diào)色板中的每種顏色進(jìn)行排查，并為每種顏色創(chuàng)建一個(gè)背景色實(shí)用工具類時(shí)，我都會(huì)感到惡心。你永遠(yuǎn)不會(huì)用到每一種顏色，如果你提供了這樣的選項(xiàng)，你最終會(huì)得到一些缺乏足夠?qū)Ρ榷鹊念伾M合。

這就是為什么我使用單獨(dú)的標(biāo)記層來定義上下文。 $color-surface-brand-light 可能指向 $slate-100 。如果我們想更改我們的品牌顏色用于背景的值，我們可以更改一個(gè)標(biāo)記，將其應(yīng)用于不同的組件，而無需查找 $slate-100 的每個(gè)實(shí)例并將其替換為不同的顏色。

與其讓開發(fā)人員訪問所有令牌，不如將它們抽象到我們的類中，開發(fā)人員可以根據(jù)不同的上下文使用相應(yīng)的類。

此外，由于我們使用的是 SCSS，因此我們可以在標(biāo)記名上使用更多字?jǐn)?shù)，因?yàn)闊o論如何，它們都會(huì)編譯成更小的值。

這個(gè)特定卡片中的內(nèi)容包括一張圖片和一個(gè)塊狀引文，使用 flexbox 水平排列。讓我們添加一個(gè) flex 工具。

/* /scss/utilities/_flex.scss */
.cool-flex {
  --flex-align: center;
  --flex-gap: $spacing-16;
  display: flex;
  align-items: var(--flex-align);
  gap: var(--flex-gap);
}

在這里，我們?cè)谖覀兊膹椥圆季郑╢lex）工具中使用CSS自定義屬性，以便從我們的設(shè)計(jì)系統(tǒng)中提供一些常見的默認(rèn)值。這樣，我們就不需要提供一大堆額外的工具類來支持每個(gè)彈性布局屬性的所有可能值。

如果開發(fā)者遇到需要覆蓋默認(rèn)設(shè)置的情況，他們可以通過在樣式屬性（style attribute）中聲明來實(shí)現(xiàn)這一點(diǎn)。在這種情況下，我們不希望圖片和引用塊（blockquote）之間有間隙，因?yàn)檫@將由內(nèi)邊距（padding）來處理。

  ...

當(dāng)然，我們可能還想使用其他靈活的屬性，但我堅(jiān)信需要時(shí)才添加，而不是試圖考慮所有可能的使用情況。就這張卡而言，這已經(jīng)足夠了。

在本設(shè)計(jì)中，flex 只在視口寬度超過一定值時(shí)才會(huì)應(yīng)用，因此我們可以創(chuàng)建另一個(gè)只在某個(gè)斷點(diǎn)以上應(yīng)用的 flex 工具。

/* /scss/utilities/_flex.scss */
@media (width >= $breakpoint-medium) {
  .cool-flex-responsive {
    --flex-align: center;
    --flex-gap: $spacing-16;
    display: flex;
    align-items: var(--flex-align);
    gap: var(--flex-gap);    
  }
}

我從未真正開發(fā)過需要一個(gè)以上斷點(diǎn)的系統(tǒng)（也許有些布局需要斷點(diǎn)，但單個(gè)組件不需要），因此我傾向于使用 -responsive 來表示只應(yīng)在某個(gè)斷點(diǎn)之上發(fā)生的事情。隨著組件查詢得到更廣泛的支持，基于視口的媒體查詢?cè)陬愃魄闆r下可能很快就不需要了。

現(xiàn)在，我們還可以在常青樹瀏覽器中使用新的范圍語(yǔ)法進(jìn)行媒體查詢！我們可以使用 width >= $breakpoint-medium 代替 max-width: $breakpoint-medium 。

圖像

當(dāng)設(shè)計(jì)師在大屏幕和小屏幕之間采用完全不同的設(shè)計(jì)時(shí)，我有點(diǎn)抓狂。我會(huì)盡我所能讓它發(fā)揮作用。

在這里，我們的圖像會(huì)從一個(gè)小圓圈變成大屏幕上的全尺寸圖像。這可能需要一個(gè)獨(dú)特的組件。

/* /scss/components/_avatar.scss */
.cool-avatar {
  width: $avatar-medium;
  height: $avatar-medium;
  border-radius: $radius-round;
  object-fit: cover;
}

@media (width >= $breakpoint-medium) {
  .cool-avatar {
    --width: 100%;
    max-width: var(--width);
    width: auto;
    height: auto;
    border-radius: 0;
  }

我們?yōu)樾∑聊簧系膱A角頭像大小添加了一個(gè)標(biāo)記，并設(shè)置 object-fit 以考慮到長(zhǎng)寬比不是正方形的圖像。在大屏幕上，我們使用自定義屬性來覆蓋圖像的寬度。

實(shí)際上，我們必須將 .cool-flex 的 --flex-align 屬性重新設(shè)置為默認(rèn)的 stretch，以支持引用塊（blockquote）中的文本高度超過圖片的情況。因此，我們的 --width 屬性實(shí)際上是設(shè)置了最大寬度，而寬度和高度都設(shè)置為自動(dòng)，由圖片的寬高比來決定。為了補(bǔ)償這一點(diǎn)，我在文本容器中內(nèi)聯(lián)添加了一個(gè) align-self: center。（這是針對(duì)一個(gè)非常具體的設(shè)計(jì)選擇需要考慮的很多事情，但這種情況確實(shí)會(huì)發(fā)生。）

我們還需要考慮頭像在小屏幕上的定位問題。這就需要一些只出現(xiàn)在小屏幕上的實(shí)用類。是的，這些類名有點(diǎn)冗長(zhǎng)，但我覺得它們比 md:h-auto 更清晰，而且還利用了邏輯屬性。

/* /scss/utilities/_spacing.scss */
@media (width < $breakpoint-medium) {
  .cool-margin-auto-on-small {
    margin-inline: auto;
  }

  .cool-margin-block-start-on-small {
    --size: $spacing-32;
    margin-block-start: var(--size);
  }
}

文本容器

包含我們的引用塊（blockquote）和圖像標(biāo)題（figcaption）的容器應(yīng)用了一些內(nèi)邊距（padding），同時(shí)元素之間也有一些外邊距（margin），并且在小屏幕上文本是居中的?，F(xiàn)在是時(shí)候添加更多工具類了！

/* /scss/utilities/_spacing.scss */
:where(.cool-flow) {
  --flow-size: $spacing-16;
  & > :not(:last-child) {
    margin-block-end: var(--flow-size);
  }
}

.cool-inset-square-32 {
  padding: $spacing-32;
}

/* /scss/utilities/_text.scss */
@media (width < $breakpoint-medium) {
  .cool-text-center-on-small {
    text-align: center;
  }
}

我已經(jīng)將它包含在一個(gè) :where() 偽類函數(shù)中，以將其特異性降低到零，這樣你就可以在需要時(shí)使用另一個(gè)工具類來覆蓋任何子元素的底部外邊距。

文本

在 Tailwind 的版本中，他們應(yīng)用了 .text-medium 來設(shè)置 blockquote 文本和其下方 figcaption 的字體權(quán)重。我們可以使用類似的類，將其應(yīng)用于整個(gè)容器，但在這種情況下，我們可以讓字體權(quán)重繼承自 body 。

然后我們需要一種用于大文本的文字樣式，以及我所說的“柔和文本”樣式——這種文本使用較低對(duì)比度的顏色來表示其重要性降低，而不是通過調(diào)整字體大小或字體粗細(xì)來實(shí)現(xiàn)。

還有一些藍(lán)色文字看起來像鏈接，但其實(shí)不是。我假設(shè)這實(shí)際上是一個(gè)鏈接，在這種情況下，我們可以在全局樣式中為鏈接應(yīng)用 .cool-text-interactive 樣式，這樣我們就可以直接使用不帶類的  。

/* /scss/components/_text.scss */
.cool-text-large {
  font-size: $text-large-font-size;
  line-height: $text-large-line-height;
}

/* /scss/utilities/_text.scss */
.cool-text-interactive {
  color: $color-text-interactive;
}
.cool-text-subdued {
  color: $color-text-subdued;
}
@media (prefers-color-scheme: dark) {
  .cool-text-interactive {
    color: $color-text-interactive-inverse;
  }
  .cool-text-subdued {
    color: $color-text-subdued-inverse;
  }
}

  
  

    

      

        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      
    
    
  

標(biāo)題名稱：為什么我們不擅長(zhǎng)CSS，看完這篇你就知道啦！
本文網(wǎng)址：http://m.5511xx.com/article/djhedod.html