CSS đã có những bước tiến vượt bậc trong vài năm qua. Trước đây, bạn có thể sử dụng CSS để tạo các ứng dụng web có giao diện đơn giản, dựa trên bảng HTML và các float CSS cho hệ thống bố cục. Ngày nay, bạn có thể thiết kế các giao diện người dùng tương tác phức tạp với thiết kế tinh tế.

Mặc dù CSS ngày càng trở nên tiên tiến, việc viết CSS từ đầu cho các ứng dụng web lớn có thể tốn thời gian. Nó cũng có thể dẫn đến việc lặp lại kiểu dáng, tệp CSS dài, lỗi tương thích trình duyệt và thường là một cơ sở mã phức tạp hơn.

Để giải quyết những thách thức này, các khung CSS đã ra đời. Khung CSS giới thiệu một phương pháp cho phép các nhà phát triển áp dụng một tập hợp các kiểu và thành phần CSS được xác định trước và chuẩn hóa để tạo ra giao diện người dùng nhất quán, hấp dẫn và phản hồi linh hoạt.

Tuy nhiên, với rất nhiều khung CSS để lựa chọn, việc quyết định khung nào phù hợp với ứng dụng của bạn có thể khó khăn. Bạn cần thực hiện so sánh phù hợp, xem xét các tính năng tổng thể của từng khung CSS để chọn tùy chọn phù hợp nhất với nhu cầu của bạn.

Trong bài viết này, chúng ta sẽ khám phá khung CSS là gì, những ưu điểm và hạn chế của chúng, cũng như cách bắt đầu sử dụng chúng. Chúng ta cũng sẽ giới thiệu các khung CSS nổi bật và được sử dụng nhiều nhất mà bạn nên biết vào năm 2024 và các năm tiếp theo.

Cuối cùng, bạn sẽ hiểu rõ về cách hoạt động của các khung CSS và biết cách chọn một khung phù hợp với nhu cầu dự án của mình. Hãy bắt đầu nào.

Khung CSS là gì?

Khung CSS là một bộ các kiểu và bảng định kiểu CSS đã được viết sẵn và sẵn sàng sử dụng, cung cấp một tập hợp các kiểu và thành phần cho mã đánh dấu của bạn. Chúng đơn giản hóa quy trình phát triển bằng cách cung cấp nền tảng các kiểu CSS có thể tái sử dụng cho các yếu tố thiết kế và bố cục phổ biến.

Các khung CSS được sử dụng để tạo giao diện người dùng quen thuộc và nhất quán, đơn giản hóa thiết kế đáp ứng và tăng cường sự hợp tác giữa các nhóm phát triển.

Tại sao nên sử dụng Khung CSS?

Các khung CSS cung cấp nhiều lợi ích làm cho chúng trở thành một công cụ không thể thiếu trong phát triển web. Dưới đây là một số lợi ích mà các khung CSS mang lại:

• Thời gian phát triển nhanh hơn: Các khung CSS đi kèm với các thành phần và kiểu dáng được xây dựng sẵn, loại bỏ nhu cầu viết mọi thứ từ đầu. Điều này đẩy nhanh quá trình phát triển và cho phép các nhà phát triển tập trung vào việc tùy chỉnh và tinh chỉnh các khía cạnh cụ thể của dự án thay vì xây dựng mọi thứ từ đầu.
• Kiểu dáng và thiết kế nhất quán: Các khung CSS giúp mang lại một giao diện và cảm nhận đồng bộ trên các thành phần và trang khác nhau. Chúng đảm bảo rằng tất cả các kiểu dáng, yếu tố giao diện người dùng, nút và kiểu chữ tuân theo một ngôn ngữ thiết kế thống nhất, giúp tiết kiệm thời gian mà các nhà phát triển dành cho việc định kiểu và đảm bảo trải nghiệm người dùng tốt hơn.
• Cải thiện sự hợp tác và bảo trì: Các khung CSS thường cung cấp các thư viện tài liệu phong phú và các quy ước đã được thiết lập, giúp các nhà phát triển dễ dàng cộng tác và bảo trì cơ sở mã. Với một cơ sở mã chung và tài liệu chi tiết, các nhà phát triển có thể dễ dàng hiểu và sử dụng mã của nhau.

Các Loại Khung CSS

Các khung CSS không phải là "một kích thước phù hợp với tất cả". Chúng có nhiều hình thức khác nhau, mỗi loại có trọng tâm và lợi thế riêng. Hiểu các loại mà khung CSS có thể phù hợp sẽ giúp bạn hiểu những gì mỗi khung có thể cung cấp.

Bây giờ, hãy xem xét các loại khung CSS chính.

Khung dựa trên thành phần

Đây là nguồn gốc của các khung CSS. Các khung dựa trên thành phần cung cấp một tập hợp các thành phần giao diện người dùng được xây dựng sẵn mà các nhà phát triển có thể đưa vào ứng dụng của họ để lắp ráp nhanh chóng giao diện. Mục tiêu là cung cấp một hệ thống thiết kế mô-đun và có thể tái sử dụng có thể giúp bạn tạo ra các ứng dụng web nhất quán và hấp dẫn về mặt hình ảnh mà không cần phải bắt đầu lại mỗi lần.

Khung ưu tiên tiện ích

Triết lý đằng sau các khung ưu tiên tiện ích là CSS không nên mang tính mô tả hoặc phụ thuộc nhiều vào mã đánh dấu của bạn (ví dụ: một lớp '.header' đại diện cho thanh điều hướng hoặc tiêu đề của trang web), mà thay vào đó nên dựa trên chức năng (ví dụ: '.text-align-center').

Thay vì giới hạn thiết kế ứng dụng của bạn trong những gì khung cung cấp, các khung ưu tiên tiện ích cung cấp các kiểu và lớp CSS chỉ thực hiện một nhiệm vụ (hoặc một nhóm nhiệm vụ nhỏ) làm các khối xây dựng để mở rộng và tùy chỉnh thiết kế ứng dụng của bạn vượt ra ngoài giới hạn của các khung dựa trên thành phần.

CSS-in-JS

Với sự ra đời của các thư viện JavaScript như React, các khung CSS-in-JS đã được tạo ra để cho phép các nhà phát triển thao tác trực tiếp với các kiểu dáng bằng cách bao gồm CSS trong mã đánh dấu JavaScript của họ.

CSS-in-JS tận dụng tính động của JavaScript để cung cấp một cách viết các kiểu CSS tương tác có hiệu suất tốt và dựa trên dữ liệu và tương tác của người dùng.

Còn nhiều loại khung CSS khác có sẵn, nhưng ba loại này bao gồm các nhóm đáng chú ý nhất.

Lưu ý rằng không có ranh giới rõ ràng giữa các trọng tâm này. Hầu hết các khung CSS có thể chồng chéo lên nhiều loại - ví dụ, một khung dựa trên thành phần có thể cung cấp cho bạn các tiện ích, trong khi một khung ưu tiên tiện ích cũng có thể cung cấp cho bạn các thành phần.

9 Khung CSS Bạn Nên Biết Năm 2024

Bootstrap

Bootstrap ban đầu là một công cụ nội bộ của X (trước đây là Twitter) để duy trì giao diện nhất quán trên nền tảng. Sau đó, nó được phát hành mã nguồn mở cho cộng đồng phát triển web rộng lớn hơn vào năm 2011. Bootstrap là một trong những khung CSS được sử dụng rộng rãi nhất, tập trung vào thiết kế web đáp ứng, ưu tiên thiết bị di động.

Bootstrap cung cấp một bộ các thành phần CSS và JavaScript mạnh mẽ, chẳng hạn như hệ thống lưới và các thành phần UI đáp ứng như nút, menu điều hướng và biểu mẫu, giúp đơn giản hóa quá trình xây dựng bố cục web gọn gàng và nhất quán.

Bootstrap có sự hỗ trợ cộng đồng lớn và hơn một trăm nghìn lượt sao trên GitHub. Mặc dù nó có thể có vẻ cồng kềnh so với các tùy chọn hiện đại, nhưng nó vẫn là một trong những khung CSS được sử dụng nhiều nhất mà bạn có thể sử dụng để xây dựng các ứng dụng web có giao diện đẹp và nhất quán về chủ đề mà không cần phải là chuyên gia về CSS và thiết kế web.

Cách sử dụng Bootstrap

Để bắt đầu với Bootstrap, bạn cần đưa các tệp nguồn của nó vào dự án của mình. Trong một khung JavaScript như React, bạn có thể cài đặt Bootstrap vào dự án của mình bằng trình quản lý gói như npm.

npm install bootstrap

Tiếp theo, nhập CSS của Bootstrap vào tệp nhập chính của ứng dụng của bạn (thường là src/index.js).

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

Điều này sẽ nhập CSS của Bootstrap và làm cho nó có sẵn trong toàn bộ ứng dụng của bạn. Bây giờ bạn có thể sử dụng các thành phần Bootstrap trong ứng dụng của mình, như sau:

import React from 'react';

function App() {
  return (
    <div className="container">
      <h1>Hello, Bootstrap in React!</h1>
      <button className="btn btn-primary">Click Me</button>
    </div>
  );
}

export default App;

Để tìm hiểu thêm về Bootstrap, hãy tham khảo tài liệu Bootstrap chính thức, chứa các hướng dẫn chi tiết, ví dụ và các tài nguyên khác.

Tailwind CSS

Tailwind CSS là một khung CSS ưu tiên tiện ích cho phép bạn nhanh chóng xây dựng giao diện người dùng tùy chỉnh trực tiếp trong tệp mã đánh dấu của mình.

Là một khung ưu tiên tiện ích, Tailwind loại bỏ sự ràng buộc của các khung dựa trên thành phần như Bootstrap.

Mặc dù các khung dựa trên thành phần như Bootstrap xuất sắc trong việc đơn giản hóa việc xây dựng bố cục web bằng cách cung cấp các thành phần UI được xác định trước, nhưng chúng có những ý kiến đóng góp vì bạn bị giới hạn trong hệ thống thiết kế và hệ sinh thái khung hiện tại. Cố gắng mở rộng hoặc tùy chỉnh bố cục ứng dụng mà khung cung cấp có thể trở nên rắc rối.

Tailwind cung cấp một hệ thống mạnh mẽ gồm các lớp tiện ích và hỗ trợ làm các khối xây dựng có thể được kết hợp để xây dựng bất kỳ thiết kế nào trực tiếp trong mã đánh dấu của bạn. Đứng thứ hai trong cuộc khảo sát State of CSS năm 2023 với tỷ lệ sử dụng khoảng 76%, Tailwind là lựa chọn hàng đầu để tạo mẫu nhanh và đẩy nhanh quy trình phát triển theo các tiêu chuẩn web hiện đại.

Cách sử dụng Tailwind CSS

Cài đặt tailwindcss bằng trình quản lý gói và tạo tệp tailwind.config.js của bạn để cấu hình và tùy chỉnh Tailwind CSS cho ứng dụng của bạn.

npm install -D tailwindcss
npx tailwindcss init

Thêm đường dẫn đến tất cả các tệp mẫu và mã đánh dấu của bạn, cùng với các cấu hình khác trong tệp tailwind.config.js.

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

Thêm chỉ thị @tailwind cho từng lớp của Tailwind vào tệp CSS chính của bạn và đảm bảo nhập tệp CSS vào tệp nhập chính của ứng dụng.

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

Bây giờ, bạn có thể áp dụng các lớp tiện ích trực tiếp trong mã đánh dấu HTML để tạo kiểu cho các thành phần của mình.

function Button({children}) {
  return (
      <button className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
        {children}
      </button>
  );
}
export default Button;

Bạn có thể tìm hiểu cách thiết lập và sử dụng Tailwind CSS cho môi trường dự án của mình và các trường hợp sử dụng nâng cao bằng cách đọc tài liệu Tailwind CSS chính thức.

Material UI

Material UI là một khung CSS dựa trên thành phần để xây dựng giao diện người dùng trong các ứng dụng React. Nó dựa trên hệ thống thiết kế Material Design mã nguồn mở của Google và cung cấp một loạt các thành phần và kiểu dáng được xây dựng sẵn.

Là một trong những cộng đồng UI lớn nhất trong hệ sinh thái React, Material UI cung cấp một hệ thống thiết kế hiện đại và hấp dẫn về mặt hình ảnh. Nó có một bộ tùy chọn tùy chỉnh cho phép các nhà phát triển dễ dàng triển khai các hệ thống thiết kế tùy chỉnh trên thư viện, làm cho nó trở thành một lựa chọn phổ biến để tạo giao diện người dùng nhất quán trong các ứng dụng React.

Cách sử dụng Material UI

Cài đặt các gói cốt lõi của Material UI và bất kỳ phần phụ thuộc nào khác mà bạn có thể cần.

npm install @mui/material @emotion/react @emotion/styled

Bây giờ, bạn có thể nhập bất kỳ thành phần Material UI nào vào các thành phần React của mình và sử dụng chúng trong mã JSX của bạn.

import Button from '@mui/material/Button';
export default function ButtonUsage() {
  return <Button variant="contained">Hello world</Button>;
}

Xem tài liệu Material UI để biết hướng dẫn sử dụng chi tiết, tham chiếu API và ví dụ.

styled-components

styled-components là một trong những thư viện CSS-in-JS nổi bật nhất. Nó cung cấp một cách liền mạch để tạo và quản lý các kiểu CSS trong các tệp JavaScript và thành phần.

Mặc dù ban đầu được thiết kế cho hệ sinh thái React, styled-components đã phát triển đến mức bạn có thể sử dụng nó trong JavaScript thuần hoặc các khung JavaScript khác như Vue.

Là thư viện CSS-in-JS được yêu thích nhất trên GitHub và có lượng tải xuống NPM hàng tuần cao nhất, styled-components cung cấp một phương pháp định kiểu linh hoạt và trực quan cao, giúp việc xây dựng các thành phần UI có thể tái sử dụng và tự chứa trở nên dễ dàng hơn.

Cách sử dụng styled-components

Cài đặt gói styled-components bằng npm hoặc yarn.

npm install styled-components

Bây giờ, bạn có thể định nghĩa các thành phần được tạo kiểu của mình bằng cách nhập hàm styled và sử dụng nó để tạo các phiên bản được tạo kiểu của các phần tử HTML hoặc thành phần tùy chỉnh.

import styled, { css } from 'styled-components'

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: #BF4F74;
`;

render(
  <div>
    <Title>
      Hello World!
    </Title>
  </div>
);

Tham khảo tài liệu styled-components chính thức để biết hướng dẫn toàn diện, ví dụ và các tính năng nâng cao.

Foundation

Foundation là một giải pháp thay thế gần nhất với Bootstrap. Nó không chỉ là một khung CSS mà là một bộ công cụ toàn diện để tạo kiểu cho các ứng dụng web, xây dựng các mẫu email (trước đây nổi tiếng là khó khăn) và tích hợp với Motion UI của ZURB để tạo hoạt ảnh CSS cao cấp.

Nó bao gồm các thành phần UI phổ biến như Bootstrap, nhưng tập trung nhiều hơn vào tiện ích và cung cấp cho các nhà phát triển nhiều tùy chọn hơn để tùy chỉnh các thành phần. Với quá nhiều tính năng, nó có thể phức tạp hơn và khó hiểu hoàn toàn cách thức hoạt động so với các khung khác.

Cách sử dụng Foundation

Bạn có thể cài đặt Foundation vào dự án của mình bằng trình quản lý gói.

npm install foundation-sites

Bây giờ, bạn có thể sử dụng các kiểu và thành phần của nó trong ứng dụng của mình.

<div class="card" style="width: 300px;">
  <div class="card-divider">
    This is a header
  </div>
  <img src="assets/img/generic/rectangle-1.jpg">
  <div class="card-section">
    <h4>This is a card.</h4>
    <p>It has an easy to override visual style.</p>
  </div>
</div>

Tham khảo tài liệu chính thức của Foundation để biết hướng dẫn chi tiết, ví dụ và các tài nguyên khác.

Chakra UI

Là sản phẩm của nhà phát triển người Nigeria Segun Adebayo, Chakra UI, giống như MUI, là một thư viện thành phần và khung CSS cho các ứng dụng React. Nó nhấn mạnh khả năng tiếp cận, công thái học của nhà phát triển và hệ thống thiết kế có thể tùy chỉnh.

Chakra UI cung cấp một bộ thành phần được thiết kế tốt và có thể truy cập, có thể dễ dàng tùy chỉnh để phù hợp với thương hiệu và kiểu dáng của dự án.

Cách sử dụng Chakra UI

Để bắt đầu, hãy cài đặt các gói Chakra UI bằng trình quản lý gói.

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

Sau khi cài đặt Chakra UI, bạn cần bao bọc ứng dụng hoặc các thành phần cụ thể của mình bằng ChakraProvider để làm cho các thành phần Chakra UI có sẵn.

import * as React from 'react'
// 1. import `ChakraProvider` component
import { ChakraProvider } from '@chakra-ui/react'
function App() {
  // 2. Wrap ChakraProvider at the root of your app
  return (
    <ChakraProvider>
      <TheRestOfYourApplication />
    </ChakraProvider>
  )
}

import { Button} from '@chakra-ui/react'
export default function ButtonUsage() {
  return <Button colorScheme='blue'>Hello world</Button>;
}

npm i @emotion/css

import { css } from '@emotion/css'

const color = 'white'

render(
  <div
    className={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hover to change color.
  </div>
)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">

<div class="container">
  <div class="notification is-primary">
    This is a primary notification
  </div>
</div>

<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.5/build/pure-min.css" integrity="sha384-YGKp99VfZX/+U5vL4VHQcf0U0RX2kNyGFVQ+P0XtqM0R5w6T39zfrWzrz8WEcGI+" crossorigin="anonymous">

<div class="pure-g">
  <div class="pure-u-1-3">
    <p>This is a third</p>
  </div>
  <div class="pure-u-1-3">
    <p>This is a third</p>
  </div>
  <div class="pure-u-1-3">
    <p>This is a third</p>
  </div>
</div>