8 kiểu Style cho một Component

Đăng lúc 22:18 13.01.2022

Trong giới Frontend Website có rất nhiều cách để chúng ta style cho một thành phần nào đó trong website. Một cách mà chúng ta hay tiếp cận nhất đó chính là nhúng một file css vào component qua thẻ link hoặc import. Bài viết hôm nay, mọi người hãy cùng mình tìm hiểu về những cách này nhé ????

Let’s get started !

Các kiểu Style cho một Component

Internal CSS

Với cách này bạn chỉ cần viết CSS ngay trong thẻ <style> và chèn thẻ này ngay trong file html của bạn là được. Bạn có thể đặt thẻ này ở trong cặp thẻ <head>, trong <body> trước các thẻ cần style, … Và bạn nên đặt nó trước hoặc trong body.

<head>
  <!-- ... -->
  <style type="text/css">
    /* Viết CSS bạn ở đây */ 
    div {
      color: pink;
    }
  </style>
</head>
<body>
    <!-- ... -->
</body>

Ưu điểm:

  • Dễ tiếp cận, test nhanh css của bạn.
  • Vì nó nằm trong 1 file nên dễ dàng gửi nó để preview và không ảnh hưởng các file html khác.

Nhược điểm:

  • Khó quản code css khi file quá lớn, thường thì các file css rất dài.
  • Không thể tái sử dụng cho các file html khác.

External CSS

Đây là các truyền thống thường được sử dụng nhất. Để sử dụng thì bạn cần tách css của mình ra các file khác nhau có đuôi .css. Sau đó bạn chỉ cần liên kết nó qua thẻ <link rel=”stylesheet”>

<head>
  <!-- ... -->
  <link rel="stylesheet" href="your-path-css-file" />
</head>
<body>
    <!-- ... -->
</body>

// Trong ReactJS bạn có thể dùng import để nhúng file css vào component
import 'your-file.css';

function App(){
  // ...
}

Ưu điểm:

  • Dễ dàng tái sử dụng các css của bạn cho nhiều component, file html khác nhau.
  • File html được load nhanh hơn.
  • Code dễ đọc, dễ bảo trì hơn.

Nhược điểm:

  • Bạn phải load tất cả css trong file css nhưng đôi khi không cần dùng tất cả.
  • Phải quản lý nhiều file css hơn và có khả năng bị trùng css ở các file khác nhau.
  • Nếu file css lớn sẽ ảnh hưởng đến tốc độ load trang của bạn.

Inline CSS

Là việc bạn viết thẳng các css vào trong các thẻ html.

<body>
  <div style="color:pink;font-size:15px;">
    Hello, world!
  </div>
</body>
const divStyle = {
    coilor: 'pink',
    fontSize: '18px'
};

function App() (
    <div style={divStyle}>
        <p style={{color:'blue'}}>Hello, world!</p>
    </div>
);

Ưu điểm:

  • Độ ưu tiên cao hơn so với 2 phương pháp trên.
  • Áp dụng riêng biệt cho 1 thẻ mà không ảnh hương thẻ khác.
  • Dễ dàng test nhanh.
  • Hữu ích khi dùng Javascript để inject vào.

Nhược điểm:

  • Code khó quản lý, quá nhiều thuộc tính trong một thẻ.
  • Không thể tái sử dụng.

LƯU Ý: Những cách còn lại dưới đây bản chất nó chỉ giúp chúng ta compile ra CSS và style cho component theo 1 trong 3 cách trên. Vì cuối cùng thì trình duyệt vẫn chỉ hiểu được CSS, chỉ là thay vì viết CSS thuần thì các cách dưới này sẽ dùng cách thức khác để viết nhằm linh động và hiệu quả hơn ????

CSS Preprocessors như Sass, Less

Tiền xử lý CSS (CSS Preprocessors) sẽ giúp chúng ta viết css một cách linh hoạt hơn như có thể dùng biến, hàm, mixin, css lồng nhau, vv…

Một số CSS Preprocessors thường dùng như Sass (Scss), Less, Stylus.

Lưu ý: Trình duyệt chỉ đọc hiểu được CSS, có nghĩa là các CSS Pre chỉ có giúp chúng ta viết code nhanh, gọn hơn thôi. Bản chất nó cũng phải biên dịch ra các file css và nhúng vào trong file html của bạn.

Mình sẽ demo việc dùng Scss nhé. Bạn có thể đọc cách dùng Scss ở đây

Bước 1: Cài đặt sass

# Cài đặt Sass (Nếu chưa có npm thì bạn cần cài Nodejs trước nhé)
npm install -g sass

Bước 2: Tạo 1 file style.scss, file này bạn sẽ dùng để viết scss cho nó.

Bước 3: Build file scss này ra file css. Bạn dùng lệnh sau:

# Build file style.scss thành file style.css
sass style.scss style.css

# Build file style.scss thành file style.css và tự động build lại nếu thay đổi file scss
sass --watch style.scss style.css

# Build cả folder chứa file scss ra folder chứa file css và theo dõi sự thay đổi của folder
sass <folder_scss>:<folder_css> --watch

Bước 4: Nhúng các file css vào file html của bạn (nhớ là file css nhé)

Note: Nếu bạn dùng ReactJS thì có thể cài sass vào rồi import trực tiếp file scss vào nhé.

Ưu điểm:

  • Code nhanh và linh hoạt hơn nhiều, tiết kiệm nhiều thời gian.
  • Tái sử dụng các đoạn code thông qua mixin, import, …
  • Kết hợp với BEM là một sự tuyệt vời nhờ vào khả năng viết nested ????

Nhược điểm:

  • Dễ bị hiểu nhầm về kích thước thật (vì cái thật sự được load là file css đã build ra chứ không phải là file scss lúc dev).
  • Khó dò lỗi và debug hơn css thuần.

Atomic CSS

Atomic CSS

Atomic CSS là một kiến trúc hay cách thức với CSS, nó không phải thư viện hay gì cả.

Atomic là nguyên tử, nghĩa là bạn sẽ viết những css cho các class một cách tối giản nhất. Và những class này sẽ là những viên gạch nhỏ để xây dựng lên một ngôi nhà to.

Atomic CSS phải đảm bảo được tính nguyên tử của nó, nghĩa là một class chỉ làm đúng với ngữ nghĩa và tên của nó. Ví dụ:

<-- Cách viết thông thường -->
<style>
  .box{
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

<div class="box"></div>
/* Dùng Atomic CSS */
.d-flex{
  display: flex;
}

.align-i-center{
  align-items: center;
}

jus-content-center{
  justify-content: center;
}
 
/* <div class="d-flex align-i-center jus-content-center"></div> */

Ưu điểm:

  • File css của bạn sẽ rất gọn nhẹ vì khả năng tái sử dụng rất cao.
  • Viết một lần dùng mãi mãi, nếu bạn làm cá nhân thì có thể tái sử dụng các file atomic đã xây dựng cho mọi project. Từ đó tốc độ code của bạn sẽ tăng đáng kể.
  • Thống nhất với cả team. Vì các class của atomic có ngữ nghĩa cố định nên sẽ không gặp trường hợp người này code kiểu này, người kia hiểu kiểu khác.
  • Tránh trùng lặp code ở nhiều nơi.
  • Các thư viện Atomic xây dựng sẵn xịn xò như Tailwind, Tachyons, ACSS

Nhược điểm:

  • Nếu tự xây dựng từ đầu, thì bạn phải tốn thời gian để viết từng class (Khổ trước sướng sau ????)
  • Tốn thời gian cho người mới vào team (phải đọc hết cái đống atomic này ????)
  • Và class trong thẻ dài ngoằng, đây có vẻ là điểm đáng sợ nhất của nó.

CSS-in-JS

Css-in-JS là một kỹ thuật dùng Javascript để tạo ra các css và class tương ứng, sau đó gắn vào DOM.

Chúng ta có thể làm việc này thông qua các thư viện bên ngoài, phổ biến như Styled-component, JSS, Radium, …

import styled from 'styled-components';

const Button = styled.a`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;

  ${props => props.primary && css`
    background: white;
    color: black;
  `}
`
function App(){
  return <div>
     <Button
      href="https://github.com/styled-components/styled-components"
      target="_blank"
      rel="noopener"
      primary
    >
      GitHub
    </Button>

    <Button as={Link} href="#docs">
      Documentation
    </Button>
  </div>
}

Ưu điểm:

  • Tận dụng được sức mạnh của JavaScript để viết css một cách linh động hơn.
  • Có thể truyền props vào để viết dynamic css.
  • Dễ dàng tái sử dụng cho các component khác nhau.
  • Tự động tạo class không trùng lặp nên không lo trùng lặp CSS.
  • Tự động thêm prefix, không lo các trình duyệt khác không hỗ trợ.
  • Code ít hơn, nhanh hơn.
  • Đặc biệt, là đỡ tốn công suy nghĩ tên class như BEM ????

Khuyết điểm:

  • Thay đổi thoái quen viết CSS vì thế cần tốn thời gian tìm hiểu.
  • Khó Debug CSS với cách cũ là dùng tên class.

CSS Modules

Với CSS modules chúng ta sẽ viết các stylesheet thành từng file nhỏ, phục vụ cho từng modules cụ thể. Cũng sử dụng cách thức import để nhúng file css vào component của chúng ta, nhưng điểm khác của nó là nó sẽ tạo ra một biến chứa các class tự tạo, gần như không trùng lắp. Việc này rất hữu ích.

/* file style.module.css */
.button {
  color: red;
}

.box {
  background-color: red;
}
import styles from './style.module.css'

console.log(styles);

function App(){
  return <div className={styles.box}>
    <button className={styles.button}></button>
    </div>
}

/*
  sytles = {
    button: 'style_button_2Lja',
    box: 'style_box_3Klq'
  }
*/

Ưu điểm:

  • Có thể dùng lại file css đó mà không lo trùng tên class.
  • Tách biệt module rõ ràng hơn vì thường chỉ dùng cho riêng component đó.
  • Khắc phục được phạm vi global của cách import css như bình thường.

Nhược điểm:

  • Quản lý nhiều file css module hơn.
  • Chỉnh sửa file có thể ảnh hưởng đến các component khác dùng chung css module này.

PostCSS

postcss

PostCSS là một Javascript tool cung cấp các API để chúng ta xử lý, biến đổi CSS (A tool for transforming CSS with JavaScript).

Điểm nổi bật của PostCSS là nó mang tính modular với lượng plugin khủng. Tuỳ vào mỗi project của bạn mà chỉ cần cài các plugin cần thiết.

Nếu bạn từng dùng Tailwind thì Tailwind khuyên bạn cài đặt nó như một plugin của PostCSS thay vì dùng CDN. Đều này giúp bạn có thể config được nhiều thứ hay ho hơn.

Tailwind Post CSS

Ưu điểm:

  • Nhiều Plugin hỗ trợ mạnh mẽ, đầy đủ tính năng.
  • Tự động xoá CSS thừa không dùng đến.
  • Sử dụng nhiều tiện ích như Sass.
  • Tự minify, gộp media query, tối ưu code CSS khi ở production mode.
  • Không lo vấn đề trình duyệt không hỗ trợ CSS mới.
  • Tự tạo ra được Plugin theo nhu cầu cụ thể.

Nhược điểm:

  • Cấu hình hơi phức tạp, cần tốn thời gian tìm hiểu.
  • Phụ thuộc vào nhiều plugin.

Tạm kết

Trên đó là những gì mà mình biết về các style cho một component. Mong bài viết này hữu ích đến mọi người.

Cảm ơn mọi người đã đọc bài viết ????

Bạn có thể tham thảo thêm:

 
==***==

Khoá học: Quản trị Chiến lược Dành cho các Lãnh đạo Doanh nghiệp
Nhấn vào đây để bắt đầu khóa học

Khóa học: Trở thành chuyên gia Bảo mật và tấn công ANM- Hacker mũ trắng
Nhấn vào đây để bắt đầu khóa học

Chuyên gia phân tích, tự động hóa Web iMacros
Nhấn vào đây để bắt đầu khóa học

Xây dựng ứng dụng tự động hóa AutoIT
Nhấn vào đây để bắt đầu khóa học

Khóa đào tạo Hacker và Marketing Facebook từ A - Z
Nhấn vào đây để bắt đầu khóa học

Khóa học: Phân tích và trực quan hóa dữ liệu với Power BI
Nhấn vào đây để bắt đầu khóa học

Khóa học đào tạo Marketing Facebook thông minh
Nhấn vào đây để bắt đầu khóa học

Lập trình Visual Foxpro 9 - Dành cho nhà quản lý và kế toán
Nhấn vào đây để bắt đầu khóa học

Làm chủ xây dựng Game chuyên nghiệp
Nhấn vào đây để bắt đầu khóa học

Trở thành chuyên gia Marketing Facebook thông minh
Nhấn vào đây để bắt đầu khóa học

Kỹ sảo Điện ảnh đỉnh cao với khóa học After Effect
Nhấn vào đây để bắt đầu khóa học

Trở thành chuyên gia Vẽ Đẳng Cấp với khóa học AI
Nhấn vào đây để bắt đầu khóa học

Làm Chủ thiết kế ảnh với Photoshop CC
Nhấn vào đây để bắt đầu khóa học

Dựng Phim Siêu đẳng với Adobe Premiere
Nhấn vào đây để bắt đầu khóa học

Khóa dựng phần mềm quản lý dành cho nhà Quản lý và Kế toán bằng MS ACCESS
Nhấn vào đây để bắt đầu khóa học

Khóa học Machine Learning cơ bản-Khoa học dữ liệu - AI
Nhấn vào đây để bắt đầu khóa học

Khóa học Đào tạo sử dụng Excel Chuyên nghiệp & ứng dụng
Nhấn vào đây để bắt đầu khóa học

Khóa học sử dụng PowerPoint Chuyên nghiệp & ứng dụng
Nhấn vào đây để bắt đầu khóa học

Khóa học xây dựng và quản trị hệ thống đào tạo trực tuyến
Nhấn vào đây để bắt đầu khóa học

Bài viết liên quan

Bạn yêu thích

Hocviendaotao.com

Chuyên mục yêu thích

Trang bạn quan tâm nhất

Đóng góp nội dung

Gửi ý kiến cho ban biên tập
Gửi thông tin

Thông tin

ĐĂNG KÝ/LIÊN HỆ:

Đăng ký nhận thư từ chúng tôi!

Đăng ký nhận email để nhận thông báo về sách mới, khuyến mại, miễn phí, luân giữ kết nối và cập nhật từ chúng tôi!