Phương pháp CSS là gì?

.button {
    box-sizing: border-box;
    height: 50px;
    width: 100%;
}

.grey-btn {
    background: #EEE;
    border: 1px solid #DDD;
    box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 3px;
    color: #555;
}

 class="button grey-btn">
    Click me!

 class="Bgc(#0280ae.5) C(#fff) P(20px)">
    Lorem ipsum

3. BEM

Công cụ sửa đổi phần tử khối là một phương pháp giúp bạn tạo các thành phần có thể tái sử dụng và chia sẻ mã trong quá trình phát triển giao diện người dùng

Ví dụ

 class="loginform loginform--errors">
     class="loginform__username loginform__username--error"> 
        Username  type="text" name="username" />
    
     class="loginform__password">
        Password  type="password" name="password" />
    
     class="loginform__btn loginform__btn--inactive">
        Sign in
    

Lớp .loginform là một khối bao gồm ba phần tử

4. CSS SMA

SMACSS là một cách để kiểm tra quy trình thiết kế của bạn và là một cách để điều chỉnh những khuôn khổ cứng nhắc đó thành một quy trình suy nghĩ linh hoạt

Ví dụ

Giả sử bố cục của chúng ta có tên là .l-footer. Chúng tôi có một mô-đun biểu mẫu tìm kiếm bên trong nó. Biểu mẫu tìm kiếm đã được gửi ít nhất một lần bởi người dùng

 class="l-footer">
     class="search is-submitted">
         type="search" />
         type="button" value="Search">
    

5. CSS có hệ thống

CSS có hệ thống chia sẻ nhiều nguyên tắc và ý tưởng mà bạn có thể tìm thấy trong OOCSS, BEM, SMACSS, SUIT CSS và các phương pháp CSS khác. CSS có hệ thống có nghĩa là một giải pháp thay thế đơn giản hơn cho các phương pháp CSS hiện có

Ví dụ

Đây là đánh dấu cho hai tiện ích hiển thị thanh điều hướng và biểu mẫu tìm kiếm

 
 class="NavBar">
   

      
 href="./">Home
      
 href="about.html">About
      
 href="learn/">Learn
      
 href="extend/">Extend
      
 href="share/">Share
   


 
 class="SearchBox">
    action="search.html" method="get">
        for="input-search">Search
        name="q" type="search" id="input-search" />
        type="submit">Search
    

Nội dung — ở dạng tiện ích con và các phần tử HTML trần trụi — sau đó được đặt trong bố cục. Cuối cùng, các lớp sửa đổi được thêm vào để thay đổi cách trình bày mặc định của mọi thứ

Phần kết luận

Bằng cách cung cấp cách tiếp cận dựa trên lớp để chia các thiết kế web lớn thành nhiều thành phần nhỏ, mô-đun, riêng biệt, tất cả các kỹ thuật CSS đều giải quyết thách thức về khả năng mở rộng và khả năng bảo trì trong CSS

Mỗi mô-đun giao diện người dùng có thể được sử dụng lại trong suốt một thiết kế và thậm chí được chuyển từ dự án này sang dự án khác nếu các phương pháp CSS giống nhau. Các phương pháp tiếp cận CSS làm được nhiều việc hơn là chỉ giải quyết vấn đề về khả năng mở rộng CSS

Cảm ơn bạn đã đọc

Nếu bạn thích bài đăng này, hãy đăng ký nhận bản tin của tôi để không bao giờ bỏ lỡ các bài báo, buổi ra mắt sản phẩm và tin tức công nghệ của tôi

Phương pháp CSS tốt nhất là gì?

Các phương pháp CSS hướng đối tượng là gì?

Phương pháp BEM là gì?

Bem còn dùng không?