前端苦HTML+CSS久已

景

當下，構建交互式應用程序的主流技術是 Web 技術，其中包括 HTML、CSS 與 JavaScript。

在過去的 10 年，Web 技術生態發生了翻天覆地的變化，包括層出不窮的開發框架，諸如 React、Vue、Svelte，也包括日新月異的前端工程化工具，比如 Webpack、esbuild、Vite 等等。

但歸根結底，他們都逃不開 HTML、CSS、JavaScript 三劍客的范疇。

Web 技術生態成熟、穩定，然而卻存在一個致命的問題：使用 Web 技術去構建跨平臺應用程序并不是一件簡單的事情。

這也是為什么許多平臺特定的框架（platform-specific frameworks）與跨平臺框架（cross-platform frameworks）依然受到歡迎的原因。

比如其中最著名的跨平臺框架 Flutter，它部分基于瀏覽器引擎的技術，實現了「編寫一次，全平臺運行」的目標。而且這些框架，也基本不使用 HTML、CSS 這些 Web 技術。這是為什么呢？

苦 HTML+CSS 久已

因為 HTML 誕生的目的問題，以及 HTML 與 CSS 的開發體驗問題。

HTML 即超文本標記語言，最初是三十年前為了制作可鏈接的文檔而發明的，而不是為了做應用程序。它更多是一種標記而不是一種語言。大多數人甚至都不將編寫 HTML 視為編程，因為它根本不是一種編程語言。

直到出現 HTML5 （通常被稱為 H5）、CSS3 和 ES5 版本之后的 JavaScript，人們才逐漸開始用這些技術制作 Web 應用程序。在那之前，HTML 只是用于完成他最開始的目的。

但做成 Web 應用的可行性，最大還是來自于 JavaScript 性能的提升。

上面是 Lin Clark 介紹 JavaScript 性能歷史的一張圖。從2008年開始，JavaScript 性能就開始飛速提升。這對于應用程序的最終用戶來說有巨大的好處，因為做出來的應用程序終于不卡了，甚至可以對性能有所期待了。

但是，對于開發者來說，仍然逃不開編寫 HTML+CSS。

就算使用一些前沿的前端框架，如 React、Vue、Angular 等，我們仍然需要編寫類似 HTML 的代碼，并仔細調整 CSS 或者 CSS 預處理器（如 SCSS、Saas）的樣式表。

這緩慢、枯燥、而且乏味。

太多的人力、時間被浪費在實現圖形用戶界面的細節上，使用一些并不是一開始就為了 UI 而設計的技術。這導致開發者經常要來回調整樣式、處理瀏覽器兼容性問題、應用奇怪的 CSS 技巧、避開性能陷阱等等。

另外，還需要在過度發展的 NPM 生態系統中，使用那些復雜的前端工程工具來進行應用程序的構建。這個過程效率也非常低下，開發體驗非常痛苦。更不要說 Web 應用在跨平臺需求中會遇到更多的陷阱，比如平臺兼容性、體積大小、性能問題，等等。

此刻，我們質疑，堅持使用 HTML 和 CSS 的理由到底是什么？

其他非 Web 框架

然后我們再回過頭來看看其他的非 Web 框架。

Electron 首先被我們排除。雖然微軟用它做出了 VSCode 這樣成熟的跨平臺應用程序，但也投入了巨大的成本，并且一般開發者可沒有這么雄厚的財力。

但最關鍵的是，VSCode 其實是用 Web 技術做出來的，Electron 只是幫助它做成了跨平臺應用而已。

看看我們還有什么其他選擇：

有一些是自計算機黃金時代開始就存在的特定平臺的框架，例如 Windows 的 MFC，macOS 的 Cocoa，以及 UNIX/Linux 的 GTK。其他一些則是更現代的移動端框架，如專門為 iOS、Android 或其他移動操作系統專門服務的開發框架。
而在跨平臺框架中，值得注意的是廣泛采用的 Qt 框架。但它主要用于桌面軟件開發。這里的跨平臺主要是指跨越不同的桌面操作系統，如 Windows/Linux/macOS，但這幾年 Qt 也逐漸在往移動端與 Web 端在努力，雖然沒有取得什么成就。
第三種就是這幾年開始流行的全新跨端方案，如 Flutter，它是一個以移動端為主的跨平臺框架，但在 Web 端和桌面端也有所作為。

隨著近年來 Web 應用的比例不斷增加，桌面端應用逐漸式微。但正是因為 Web 應用在跨端上的致命問題，這些非 Web 框架仍有一席之地，并且看上去也具有不可替代性。

當然，其中的某些年代過于久遠的開發框架，開發人員的體驗甚至比編寫 HTML 更糟糕，因為他們可能被迫編寫類似于這樣的命令式和面向對象的代碼。

var count = 0
let stack = new VStack
let text = new Text("Count: \(count)")
stack.add_child(text)
let button = new Button("Increment")
button.set_onclick(||
    count += 1
    text.set_text("Count: \(count)")
)
stack.add_child(button)

不是編寫聲明式且響應式的代碼，就像程序員一直夢寐以求的這樣：

struct AppState {
    count: i32
}


VStack {
    Text("count: \(state.count)")
    Button("Increment") {
        state.count += 1
    }
}

這就是為什么 Flutter 看起來像是開發應用程序的靈丹妙藥：

Flutter 是聲明式且響應式的。
Flutter 真正實現了跨平臺，可以制作所有桌面、移動和 Web 應用程序。

不過也還是有開發者不喜歡 Flutter，因為它引入了另一種新的、陌生的語言 Dart，以及額外的虛擬機負擔。

Flutter 真正的問題在于與現有生態系統的兼容性，因為人們傾向于更喜歡重用已建立的資源和維護成熟的應用程序。編程語言也是出于同樣的原因。

為了解決 Flutter 的一些問題，有些優秀開發者們嘗試開發了 Flutter 的 JavaScript 版本，雖然后來失敗了。因為 Flutter 本身正在迅速迭代，以至于兩者無法融洽。不過這部分的工作導致誕生了 Kraken 框架，它允許編碼人員編寫 HTML，并使用 Flutter 引擎進行跨平臺渲染。

等等...發生了什么？在非 Web 框架中再次編寫 HTML？

Design to Code

不！再也不想寫 HTML 了！

盡管如此，我們不得不承認，HTML+CSS 是表示 UI 的一個很好的組合，因為：

HTML 負責內容的結構，CSS 負責內容的樣式。
結構和樣式是解耦的，這對工程來說是有好處的。

但是在實踐中，UI 的工程有時是沒有意義且不必要的。假設我們已經有了設計師提供的高保真設計原型，編碼人員需要做的是：

使用代碼重新實現設計原型，這在 99% 的情況下是 HTML+CSS 的事情。
為剛剛重新實現的 UI 添加業務邏輯。

第一部分總是讓人頭疼的源頭：涉及大量的細節、耗時、需要與設計師進行討論反復溝通，溝通成本很高，如果設計更新，代碼也需要更新，也許還需要另一場“昂貴”的討論。

更不用說，這種工作通常被視為費時費力沒技術含量工作，也因此就有了大家聽到的前端程序員通常被其他非前端程序員所鄙視。

一些聰明的開發者想出了使用編譯器技術或更具體地說是轉換器技術來實現設計到代碼的解決方案，將整個高保真設計轉換為機器生成的 HTML+CSS 代碼。這個就是所謂的 Design to Code。

但它是為產品經理和設計師量身定制的，而不是為開發人員。這種內在問題包括但不限于：

生成的代碼可讀性差，不符合項目中現有的編碼風格。
生成代碼的不易集成。如果它依賴于另一個第三方庫怎么辦？如果生成的代碼更新了，整個大片的變化在版本控制系統中體現是否合理？
像 Sketch 或 Figma 這樣的設計工具，總是可以設計出比 HTML+CSS 可以實現的更高級的視覺效果。他們甚至可以精確控制每一個像素。而很多時候，生成的代碼可能無法產生與設計原型完全相同的 UI，絕對需要一些補丁。但如果生成的代碼更新了，補丁就無法再應用了怎么辦？

總之，從開發者的角度來看，Design to Code 不是一個好的技術解決方案。

現在讓我們看看什么是 Design as Code。

Design as Code

在 VGG 所倡導的 Design as Code 開發流程中，用戶可以在某種程度上拋棄 HTML+CSS。

因為設計稿完全替代了 HTML+CSS 的角色，設計就是代碼。請記住 VGG 的第一性原則：通過消除冗余的開發工作來彌合設計與開發兩方之間的巨大鴻溝。

很明顯的優勢：圖形用戶界面的設計和開發只需要進行一次，因為兩者實際上是一體的。因此兩者的摩擦、討論會減少，這讓雙方都更高效。

對于開發人員來說，他們能夠直接在設計文件上編寫業務邏輯，然后由 VGG 將其運行為一個交互式圖形應用程序。這可以節省大量重復的工作，不僅提高了開發人員的工作效率，也為整個團隊增加了工作效率。

Design as Code 的想法很簡單，但它實現起來非常困難，比如會遇到來自編譯器技術、編程接口抽象和圖形渲染方面的工程挑戰。

因此，為了實現 VGG 的 Design as Code 開發流程

VGG 定義了下一代矢量圖形規范 VGG Specs (https://docs.verygoodgraphics.com/specs/overview)
實現了 VGG runtime 開源引擎 (https://github.com/verygoodgraphics/vgg_runtime)
提供各種 VGG 容器，實現了對各種平臺和框架的嵌入式支持。

VGG 天生就有著對開發生態很好的兼容性。相比于低代碼，VGG 是一套真正為開發者設計的工具。小結：

VGG 主打 Design as Code，直接使用設計稿代替 HTML+CSS 去實現用戶界面。
VGG 將設計稿變成了跨平臺的應用，為開發者節約了更多的時間與成本。

基于以上兩點，VGG 以及它主打的 Design as Code 可以為現代交互式應用開發帶來巨大的好處。在最終用戶對用戶界面的實際使用效果沒有明顯感知差異的前提下，大大提升了應用開發者的開發體驗，甚至可以讓設計師、產品經理來承擔一部分的界面開發工作：無非是把現有的設計工具當作一個 UI Builder 來使用罷了。

下面引用來自 VGG Github 首頁的一張圖，來更好地說明 Design as Code 的概念與 VGG 的有機組成：

展望

在這篇文章中，我們討論了 Web 技術、特定平臺的框架、跨平臺框架、Design to Code 解決方案以及基于 VGG 開源引擎的 Design as Code 開發流程。

我們提出了 Design as Code 的概念，介紹了 VGG 作為一個全新的開發交互式圖形應用程序的框架。但 VGG 仍然年輕，因為還有許多技術挑戰需要克服，VGG 運行時引擎現已開源，歡迎大家一起參與 VGG 開源社區共建。

關于 VGG 的更多細節將在后續的文章中討論。如果您感興趣，可以繼續閱讀官方博客和文檔
https://blog.verygoodgraphics.com/

2024年選擇適合項目的CSS框架至關重要。這將為構建新的用戶界面（UI）組件所需的總體努力定下基調。目前，最重要的是更快地發布新功能，以保持客戶的滿意度。因此，你需要一個易于使用的CSS框架，它能夠提供現成的UI元素。

下面，我們來看看2024年值得嘗試的最佳CSS框架。

1、Bootstrap

在今天的數字時代，網頁設計和開發已經成為創造令人印象深刻在線體驗的關鍵。為了滿足這一需求，Bootstrap 應運而生，它是一款以移動為先的 CSS 框架，不僅能幫助你構建外觀優雅的響應式網頁界面，還大大簡化了開發過程。

Bootstrap 的核心在于其強大的柵格系統，這一系統使得開發者可以為各種屏幕尺寸創建靈活的布局。更重要的是，Bootstrap 提供了大量現成的組件，比如導航欄、卡片和模態框，這些都讓開發變得更加迅速和高效。

Bootstrap 的獨特之處

響應式柵格系統：這是 Bootstrap 的核心特性之一，允許網頁內容根據不同的屏幕尺寸自動調整布局，從而在手機、平板和桌面上都能提供良好的用戶體驗。
豐富的預制組件：Bootstrap 提供了大量的預制組件，如導航欄、卡片、模態框等，使得開發者可以輕松實現復雜的UI設計。
快速樣式調整的實用類：通過實用類，Bootstrap 使得頁面的樣式調整變得快速簡單，無需編寫大量的自定義CSS。
增強功能的JavaScript插件：Bootstrap 還提供了一系列JavaScript插件，進一步擴展了網頁的交互性和動態效果。
活躍的社區和豐富的文檔：Bootstrap 擁有一個活躍的開發者社區和詳盡的文檔，為使用者提供了強大的支持。

如何將 Bootstrap 與現代框架結合使用

如果你在使用 React 開發項目，可以輕松地將 React Bootstrap 庫安裝到你的項目中，通過這種方式，你可以在保持 React 的組件化開發模式的同時，享受 Bootstrap 提供的樣式和組件優勢。

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
import './bootstrap.css';

export function Bootstrap() {
  return (
    <div className="button">
      {['Primary', 'success', 'danger'].map((variant) => (
        <DropdownButton
          as={ButtonGroup}
          key={variant}
          id={dropdown-variants-${variant}}
          variant={variant.toLowerCase()}
          title={variant}
          <Dropdown.Item eventKey="1">Action</Dropdown.Item>
          <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
          <Dropdown.Item eventKey="3" active>
            Active Item
          </Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
        </DropdownButton>
      ))}
      <br />
      <Dropdown>
        <Dropdown.Toggle variant="success" id="dropdown-basic">
          Dropdown Button
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
          <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
          <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </div>
  );
}

2、Tailwind CSS

Tailwind CSS 以其獨樹一幟的“工具優先”設計理念，在前端開發社區中引起了廣泛關注。它與傳統的 CSS 框架不同，不提供預設樣式的組件，而是通過提供大量的低級實用類（utility classes），讓開發者能夠構建出完全定制的設計。這種方法提供了前所未有的靈活性和可擴展性，使得開發者可以精準控制網頁的每一個細節。

Tailwind CSS 的獨特特點

工具優先的設計方式：Tailwind 的核心思想是通過實用類直接在 HTML 中應用樣式，極大地提高了開發效率和靈活性。
高度可定制：通過配置文件，開發者可以自定義 Tailwind 的主題、顏色、間距等，以適應項目的具體需求。
沒有預構建的組件：與其它框架不同，Tailwind 不提供預構建的組件。這意味著所有的樣式都是由開發者從頭開始構建的，確保了設計的獨特性。
響應式設計：Tailwind 提供了響應式設計的支持，通過斷點（breakpoints）可以輕松實現不同屏幕尺寸下的樣式適配。
與 PurgeCSS 的集成：通過集成 PurgeCSS，Tailwind 能夠在生產環境下自動移除未使用的 CSS，優化項目的加載速度。
JIT（即時編譯）模式：Tailwind 的 JIT 模式使得開發過程中的樣式更改能夠即時反映，進一步提升開發效率。

如何集成 Tailwind CSS

集成 Tailwind CSS 到項目中并非一蹴而就，首先需要設置 Tailwind 編譯器。通過在項目的配置文件中指定要處理的內容和自定義主題，然后通過插件來擴展功能，你可以開始使用 Tailwind 提供的實用類來編寫 CSS。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

以下是相關的使用示例

export function Tailwind() {
  const ContactTextArea = ({
    row,
    placeholder,
    name,
    defaultValue,
  }: {
    row: number;
    placeholder: string;
    name: string;
    defaultValue: string;
  }) => {
    return (
      <>
        <div className="mb-6">
          <textarea
            rows={row}
            placeholder={placeholder}
            name={name}
            className="w-full resize-none rounded border border-stroke px-[14px] py-3 text-base text-body-color outline-none focus:border-primary dark:border-dark-3 dark:bg-dark dark:text-dark-6"
            defaultValue={defaultValue}
          />
        </div>
      </>
    );
  };

const ContactInputBox = ({
    type,
    placeholder,
    name,
  }: {
    type: string;
    placeholder: string;
    name: string;
  }) => {
    return (
      <>
        <div className="mb-6">
          <input
            type={type}
            placeholder={placeholder}
            name={name}
            className="w-full rounded border border-stroke px-[14px] py-3 text-base text-body-color outline-none focus:border-primary dark:border-dark-3 dark:bg-dark dark:text-dark-6"
          />
        </div>
      </>
    );
  };
  return (
    <section className="relative z-10 overflow-hidden bg-white py-20 dark:bg-dark lg:py-[120px]">
      <div className="w-full px-4 lg:w-1/2 xl:w-5/12">
        <div className="relative rounded-lg bg-white p-8 shadow-lg dark:bg-dark-2 sm:p-12">
          <form>
            <ContactInputBox type="text" name="name" placeholder="Your Name" />
            <ContactInputBox
              type="text"
              name="email"
              placeholder="Your Email"
            />
            <ContactInputBox
              type="text"
              name="phone"
              placeholder="Your Phone"
            />
            <ContactTextArea
              row={6}
              placeholder="Your Message"
              name="details"
              defaultValue=""
            />
            <div>
              <button
                type="submit"
                className="w-full rounded border border-primary bg-primary p-3 text-white transition hover:bg-opacity-90"
                Send Message
              </button>
            </div>
          </form>
          <div />
        </div>
      </div>
    </section>
  );
}

3、Foundation

Foundation 是一款開源的、響應式的前端框架，它極大地簡化了創建在任何設備上都能完美運行的響應式網站、應用程序和電子郵件的過程。由于其出色的靈活性和易用性，Foundation 已被包括 Facebook、eBay、Mozilla、Adobe 乃至 Disney 在內的許多公司采用于他們的項目中。

Foundation 提供了一個強大而靈活的響應式柵格系統，并且包括了許多方便的選項、模態框（modals）、排版（typography）、導航組件以及表單元素，設計師可以快速將這些元素集成到他們的產品中。此外，Foundation 的模塊化架構意味著你可以根據需要，使用它的部分或全部功能。

Foundation 的獨特特性

靈活的響應式柵格系統：Foundation 的柵格系統提供了豐富的布局選項，使得創建響應式設計變得簡單高效。
模塊化架構：這允許開發者自定義所需的功能，確保了框架的靈活性和擴展性。
Sass 預處理器：Foundation 使用 Sass 預處理器進行樣式的編寫，進一步增強了樣式定義的靈活性和可維護性。
內建組件和響應式導航：框架提供了一系列預建的組件和響應式導航，加速了開發流程并提高了用戶體驗。
Flexbox 和塊級網格支持：這些現代布局技術的支持使得創建復雜的布局結構變得更為簡單。
可訪問性特性：Foundation 在設計時考慮了可訪問性，幫助開發者創建符合 WCAG 標準的網站。

如何在項目中集成 Foundation

通過如下示例代碼，可以看到如何在 React 項目中使用 Foundation：

import { Menu, MenuItem } from 'react-foundation';

export function Foundation() {
  return (
   <Menu style={{ marginLeft: '34px' }}>
     <MenuItem>
       <a href="/">Home</a>
     </MenuItem>
     <MenuItem>
       <a href="/">Blog</a>
     </MenuItem>
     <MenuItem>
       <a href="/">About</a>
     </MenuItem>
     <MenuItem>
      <a href="/">Contact</a>
     </MenuItem>
   </Menu>
  );
}

這個例子展示了如何使用 Foundation 的 Menu 和 MenuItem 組件來創建一個簡單的導航菜單。這種集成方式使得在保持 React 組件化開發模式的同時，還能享受 Foundation 提供的樣式和組件優勢。

4. Bulma

Bulma 是一個輕量級的 CSS 框架，以其簡單性、響應性和定制選項著稱。它與其他 UI 框架的不同之處在于，Bulma 是基于 Flexbox 構建的，Flexbox 是一種 CSS 布局模型，能夠根據容器的寬度調整頁面元素的寬度，這使得創建網格等任務變得非常簡單，并且是框架輕量化的原因之一。

Bulma 的主要特點

基于 Flexbox 的現代 CSS 框架：利用 Flexbox，Bulma 為開發者提供了一種更靈活、簡潔的方式來創建布局，無需復雜的布局計算。
易用且直觀的語法：Bulma 的類名清晰直觀，使得即使是 CSS 新手也能快速上手。
無 JavaScript 依賴：Bulma 完全由 CSS 構成，這意味著你可以在不添加任何 JavaScript 的情況下使用它，減少了前端項目的復雜度。
內建的響應式設計修飾符：Bulma 提供了一系列修飾符用于創建響應式設計，使得適應不同屏幕尺寸的布局變得簡單。
組件化：如導航欄、模態框、標簽頁等，Bulma 提供了豐富的組件庫，方便開發者快速實現常見的 UI 功能。
通過 Sass 可擴展：Bulma 允許通過 Sass 進行定制，開發者可以根據項目需求調整顏色、間距等參數。

如何在項目中集成 Bulma

將 Bulma 集成到項目中相當簡單，只需導入 Bulma 的 CSS 文件即可開始使用它提供的各種樣式和組件。以下是一個使用 Bulma 創建分頁導航的示例：

import 'bulma/css/bulma.min.css';

export function Bulma() {
  return (
    <div>
      <nav className="pagination" role="navigation" aria-label="pagination">
        <a href="/" className="pagination-previous">
          Previous
        </a>
        <a href="/" className="pagination-next">
          Next Page
        </a>
        <ul className="pagination-list">
          <li>
            <a href="/" className="pagination-link" aria-label="Goto page 1">
              1
            </a>
          </li>
          <li>
            <span className="pagination-ellipsis">…</span>
          </li>
          <li>
            <a href="/" className="pagination-link" aria-label="Goto page 45">
              45
            </a>
          </li>
          <li>
            <a
              href="/"
              className="pagination-link is-current"
              aria-label="Page 46"
              aria-current="page"
              46
            </a>
          </li>
          <li>
            <a href="/" className="pagination-link" aria-label="Goto page 47">
              47
            </a>
          </li>
          <li>
            <span className="pagination-ellipsis">…</span>
          </li>
          <li>
            <a href="/" className="pagination-link" aria-label="Goto page 86">
              86
            </a>
          </li>
        </ul>
      </nav>
    </div>
  );
}

這個例子展示了如何利用 Bulma 的分頁組件來創建一個簡潔美觀的分頁導航。通過使用 Bulma，開發者可以節省大量的時間來設計和編寫 CSS，專注于實現更好的用戶體驗和界面設計。

5. UIKit

UIKit 是一個開源的框架，專門用于構建 Web 應用程序的用戶界面。它與其他 UI 框架在結構和設計哲學上有所不同。不同于其他遵循傳統 BEM 方法論的框架，UIKit 采用了基于組件的結構。這種方式為組件的靈活性和可重用性提供了更大的空間，可以顯著減少構建復雜用戶界面所需的代碼量。

UIKit 的主要特性

模塊化和輕量級框架：UIKit 的設計注重于提供一個輕量級的解決方案，便于快速開發和部署。
響應式柵格系統：UIKit 提供了一個靈活的柵格系統，使得在不同設備上的布局變得簡單和一致。
預設計的組件：UIKit 包含了大量預設計的組件，如導航欄、滑塊、模態框等，簡化了開發流程。
基于 Flexbox 的布局：UIKit 利用 Flexbox 布局，提供了一種更靈活的方式來創建復雜的布局結構。
動畫和過渡效果：UIKit 包含了豐富的動畫和過渡效果，可以輕松地為界面添加視覺吸引力。
可定制和可主題化：UIKit 提供了廣泛的定制選項，使得開發者可以根據自己的需求調整樣式和功能。

如何在項目中集成 UIKit

將 UIKit 集成到項目中非常直接，僅需導入 UIKit 的 CSS 文件即可開始使用其提供的樣式和組件。以下是一個使用 UIKit 創建按鈕的示例：

import 'uikit/dist/css/uikit.min.css';

export function Uikit() {
  return (
    <div className="uk-flex uk-flex-center uk-margin-top">
      <button
        type="button"
        className="uk-button uk-button-default uk-margin-left"
        onClick={() => alert('Cancel clicked!')}
      >
        Cancel
      </button>
    </div>
  );
}

這個例子演示了如何利用 UIKit 的按鈕（Button）組件來創建一個簡單的按鈕，并使用 Flexbox 實現居中布局。通過 UIKit，開發者可以享受到高度靈活和易用的界面構建體驗，同時也能保持代碼的整潔和模塊化。

總結

選擇合適的 CSS 框架對于項目的成功至關重要。每個框架都有其獨特的特點、優勢和可能的限制，因此了解如何根據項目的具體需求挑選合適的框架是一項重要的技能。除了我們討論的 Bootstrap、Tailwind CSS、Foundation、Bulma 和 UIKit 外，市面上還有許多其他的 CSS 框架，每個都有可能成為你項目的理想選擇。

創建概念驗證

創建概念驗證（Proof-of-Concept，PoC）是評估 CSS 框架是否適合你項目的一個極好方法。通過這種方式，你可以實際操作并體驗每個框架的學習曲線、靈活性、易用性以及它們如何適應你的項目需求。以下是一些建議，幫助你通過創建概念驗證來選擇正確的 CSS 框架：

明確項目需求：在開始之前，清晰地定義你的項目需求，包括預期的功能、設計美學、響應式設計的要求等。
研究框架的特性：深入了解每個框架的核心特性、設計理念和社區支持情況。
評估學習曲線：嘗試了解開始使用框架并達到一定熟練度所需的時間和努力，確保團隊能夠快速上手。
考慮擴展性和維護性：選擇那些提供良好文檔、定期更新和社區支持的框架，以確保項目的長期可維護性。
實踐中測試：為每個框架創建小型的概念驗證項目，實際操作它們來構建一些簡單的布局或組件。這將幫助你直觀地感受到使用框架的便利性和可能的挑戰。
性能考量：測試每個框架生成的 CSS 的大小和加載時間，確保它們不會對最終用戶的體驗產生負面影響。
社區和資源：考慮框架的社區活躍度和可用資源。一個活躍的社區和豐富的學習資源可以在你遇到問題時提供幫助。

通過這種綜合評估方法，你可以更全面地理解每個框架如何適應你的項目需求，從而做出明智的選擇。記住，最適合項目的框架不一定是最流行或最新的，而是最能滿足你項目特定需求的那一個。分享你的概念驗證經驗和框架選擇理由，不僅能幫助團隊成員理解決策過程，也能為面臨相似選擇的其他開發者提供參考。

天這篇文章主要分享 10 個鮮為人知的 CSS 技巧，這些技巧將成為你提高網頁設計技能的秘密武器。

現在，我們就一起來看看這些CSS 技巧。

01. 網站平滑滾動

在<html>元素中添加scroll-behavior: smooth，以實現整個頁面的平滑滾動。

html{
    scroll-behavior: smooth;
  }

02.鏈接的屬性選擇器

此選擇器的目標是具有以“https”開頭的 href 屬性的鏈接。

a[href^="https"]{
    color: blue;
  }

03.?合并兄弟姐妹

選擇 <h2> 后面的所有兄弟元素 <p> 元素。

h2 ~ p{
    color: blue;
  }

04. :not() 偽類

該選擇器將樣式應用于不具有“特殊”類的列表項。

li:not(.special){
        font-stlye: italic;
    }

05. 用于響應式排版的視口單位

使用視口單位（vw、vh、vmin、vmax）可以使字體大小響應視口大小。

h1{
    font-size: 5vw;
  }

06. :empty 表示空元素

此選擇器定位空的 <p> 元素并隱藏它們。

p:empty{
    display: none;
  }

07.自定義屬性（變量）

您可以更輕松地定義和使用自定義屬性

主題和維護。

:root{
    --main-color: #3498db;
  }


  h1{
    color: var(--main-color);
  }

08.圖像控制的Object-fit屬性

object-fit 控制如何調整替換元素（如 <img>）的內容大小。

img{
    width: 100px; 
    height: 100px;
    object-fit: cover;
  }

09. 簡化布局的網格

CSS 網格提供了一種以更簡單的方式創建布局的強大方法。

.container{
    display: grid;
    grid-tempalte-columns: 1fr 2fr 1fr;
 }

10. :focus-in 偽類

如果該元素包含任何具有 :focus 的子元素，則 :focus-within 會選擇該元素。

form:focus-within{
    box-shadow: 0 0 5px rgba(0, 0, 0, 0, 0.2);
 }

總結

以上就是我想與你分享的10個CSS技巧，希望對你有所幫助，如果你覺得有用的話，請記得點贊我關注我。

在線咨詢

上一篇：各種圖文并茂的示例，讓我們快速進入qml世界
下一篇：Web前端開發技術智慧樹

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商