• Lượng Truy Cập (Traffic): Ước lượng số lượt truy cập trang web hàng ngày, hàng giờ, hoặc trong khoảng thời gian nào đó.
• Loại Website: Loại website của bạn ảnh hưởng đến lượng tài nguyên cần thiết. Ví dụ, một trang web dạng blog có thể yêu cầu ít tài nguyên hơn so với một trang web thương mại điện tử phức tạp.
• Nội Dung Động: Nếu trang web của bạn chứa nhiều nội dung động, ví dụ như video, hình ảnh động, hay tính năng tương tác cao, sẽ đòi hỏi nhiều tài nguyên hơn so với trang web tĩnh.
• Cơ Sở Dữ Liệu: Kích thước cơ sở dữ liệu và số lượng truy vấn đối với cơ sở dữ liệu cũng quan trọng. Một trang web sử dụng cơ sở dữ liệu lớn và phức tạp sẽ đòi hỏi nhiều tài nguyên hơn.
• Cache và Tối Ưu Hóa: Sử dụng kỹ thuật tối ưu hóa và cache có thể giảm áp lực lên tài nguyên server.
• Dịch Vụ Bên Ngoài: Nếu bạn sử dụng các dịch vụ bên ngoài như CDN (Content Delivery Network) hoặc các dịch vụ quản lý nội dung, có thể giảm áp lực lên server của bạn.
• Đánh Giá Hiệu Năng Hệ Thống: Đánh giá hiệu năng của server hiện tại để xem xét việc nâng cấp.
• Dự Đoán Mở Rộng:Nếu bạn dự định mở rộng website trong tương lai, hãy xem xét các yếu tố mở rộng và dự đoán nhu cầu tài nguyên tương lai.
• Thử Nghiệm và Đo Lường: Thử nghiệm tải và đo lường hiệu suất có thể cung cấp thông tin quan trọng về cách website của bạn phản ứng dưới áp lực.
• Chính Sách và Yêu Cầu Kỹ Thuật: Xác định các chính sách và yêu cầu kỹ thuật cụ thể của bạn, chẳng hạn như thời gian phản hồi tối đa.
• …

Vậy cấu hình phần cứng bao nhiêu là phù hợp?

Trước tiên cần xác định số lượng người truy cập trong một ngày cũng như số lượng người online đồng thời trung bình. Bạn có thể sử dụng Google Analytics để thống kê và phân tích dữ liệu người dùng khi truy cập website của bạn.
Đối với các loại website load nhẹ chỉ có bài viết, tin tức, hình ảnh vừa phải và có traffic dưới 2000 visit mỗi ngày hoặc website load nặng nhiều bài viết, hình ảnh và có traffic dưới 1000 visit mỗi ngày thì bạn có thể cấu hình tầm 512MB RAM và 1core CPU.
Dưới đây là bảng cấu hình tham khảo dành cho bạn dựa theo lượt truy cập.

Nên chọn CPU có nhiều nhân (core) cho máy chủ. Số lượng nhân CPU càng nhiều thì nó sẽ càng có lợi cho người sử dụng. CPU nhanh hơn thì máy chủ nhanh hơn, nó giúp cho quá trình sử lý dữ liệu diễn ra nhanh gấp nhiều lần. Hãy luôn ưu tiên CPU nhiều nhân, một CPU có ít nhân nhưng có xung nhịp cao sẽ không tốt bằng một CPU có nhiều nhân với xung nhịp thấp hơn.
Đầu tư tối đa RAM cho cấu hình máy chủ. Cấu hình server với bộ nhớ RAM cao giúp sử lý được nhiều dữ liệu cùng một lúc, tránh tình trạng máy tính bị đơ hay treo máy.

Đối với những website phát triển nhanh, số lượng dữ liệu lưu trữ ngày càng nhiều dẫn đến database ngày càng tăng. Bạn cần thường xuyên theo dõi mức độ sử dụng tài nguyên RAM, và có kế hoạch nâng cấp khi lượng RAM gần hết vì database càng lớn thì nhu cầu sử dụng RAM càng nhiều.

Tổng kết

Một máy chủ có thể có cấu hình tối ưu với khoảng 4-8 GB RAM và 2-4 CPU core cho một website với lượng truy cập trung bình. Tuy nhiên, điều này chỉ là một ước lượng tổng quát và bạn nên thử nghiệm trên môi trường thực tế, và dự theo sự thay đổi của các yếu tố mình đã chia sẽ ở trên mà cập nhật lại để đảm bảo website đáp ứng đúng với yêu cầu cụ thể của bạn.

Cảm ơn các bạn đã đọc bài viết của mình, chúc mọi người có thêm nhiều kiến thức hay để phục vụ cho dự án!

The post Ước tính RAM / CPU cần sử dụng cho một website appeared first on Tomoshare.

Đối với các website không yêu cầu nhiều về quản lý CSDL như blog, các dự án cần build môi trường Dev, Staging,… thì bạn có thể giản thiểu chi phí cho việc quản lý CSDL bằng cách cài đặt trực tiếp MySQL lên EC2.

Các bước thực hiện

Step1: Thêm Mysql repository.

Trước tiên, chúng ta cần thêm kho lưu trữ MySQL Yum vào danh sách kho lưu trữ của máy chủ Amazon Linux 2023. Thao tác này chỉ được thực hiện một lần và cung cấp tất cả các kho phiên bản gói MySQL.

Sử dụng wget để tải về repository bằng command.

/* For MySQL 5.7 */
sudo wget https://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm

/* For MySQL 8 */
sudo wget https://dev.mysql.com/get/mysql80-community-release-el9-1.noarch.rpm 

Nhập y để confirm tải package.

Dependencies Resolved

======================================================================================================================================================================================================
 Package                                               Arch                               Version                           Repository                                                           Size
======================================================================================================================================================================================================
Installing:
 mysql80-community-release                             noarch                             el7-5                             /mysql80-community-release-el7-5.noarch                             9.1 k

Transaction Summary
======================================================================================================================================================================================================
Install  1 Package

Total size: 9.1 k
Installed size: 9.1 k
Is this ok [y/d/N]: y

Kiểm tra repository đã tải thành công chưa với câu lệnh.

sudo ls -lrt

Output:

[ec2-user@ip-172-31-32-xxx ~]$ sudo ls -lrt
total 12
-rw-r–r–. 1 root root 10534 Jul 25 2022 mysql80-community-release-el9-1.noarch.rpm

Step 2: Cài đặt MySQL.

For MySQL 5.7

/* For MySQL 5.7 */
sudo yum localinstall mysql57-community-release-el7-11.noarch.rpm

Ở bước này nếu bạn gặp lỗi tương tự như bên dưới thì tiếp tục chạy 2 lệnh tiếp theo để fix nhé.

Failing package is: mysql-community-client-5.7.39-1.el7.x86_64
GPG Keys are configured as: file:///etc/pki/rpm-gpg/RPM-GPG-KEY-mysql

sudo rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022

sudo yum -y install mysql-community-server

For MySQL 8.

sudo dnf install mysql80-community-release-el9-1.noarch.rpm
dnf repolist enabled | grep "mysql.*-community.*"
sudo dnf install mysql-community-server

Step 3: Sau khi hoàn tất các câu lệnh cài đặt, ta thực hiện start MySQL.

sudo systemctl start mysqld.service

Step 4: Kiểm tra trạng thái của Mysql hiện tại.

sudo systemctl status mysqld.service

Nếu thành công bạn sẽ thấy thông báo MySQL đã running Active: active (running) như bên dưới.

Dec 01 19:02:20 centos-512mb-sfo2-02 systemd[1]: Started MySQL Server.

Thiết lập cấu hình cho Mysql

Đổi mật khẩu cho người dùng root
Như bạn đã biết, từ Mysql 8.0 thì việc sử dụng đăng nhập không dùng mật khẩu với người dùng root đã bị loại bỏ. Vậy để tìm mật khẩu cho người dùng root khi đăng nhập lần đầu ta sẽ tìm trong file log của mysql. Mật khẩu tạm thời được tìm thấy khi thực hiện câu lệnh:

sudo grep 'temporary password' /var/log/mysqld.log

Tiếp theo ta thực hiện đăng nhập vào MySQL và nhập password tạm thời của người dùng root trong câu lệnh bên dưới: (Mật khẩu root: D6%=yjkDGnp8)

sudo mysql_secure_installation -p

Nhập mật khẩu mới cho người dùng root và nhập y cuối mỗi câu để loại bỏ các user test.

Lưu ý khi đặt mật khẩu cần tuân theo quy tắt sau:
+ Chứa ít nhất 1 ký tự in hoa
+ Chứa ít nhất 1 ký tự thường
+ Chứa ít nhất 1 số
+ Chứa ít nhất 1 ký tự đặc biệt
+ Tổng số ký tự phải lớn hơn 8

Securing the MySQL server deployment.


The existing password for the user account root has expired. Please set a new password.

New password: <MẬT KHẨU MỚI>

Re-enter new password: <NHẬP LẠI MẬT KHẨU>
The 'validate_password' component is installed on the server.
The subsequent steps will run with the existing configuration
of the component.
Using existing password for root.

Estimated strength of the password: 100
Change the password for root ? ((Press y|Y for Yes, any other key for No) :

 ... skipping.
By default, a MySQL installation has an anonymous user,
allowing anyone to log into MySQL without having to have
a user account created for them. This is intended only for
testing, and to make the installation go a bit smoother.
You should remove them before moving into a production
environment.

Remove anonymous users? (Press y|Y for Yes, any other key for No) : y
Success.


Normally, root should only be allowed to connect from
'localhost'. This ensures that someone cannot guess at
the root password from the network.

Disallow root login remotely? (Press y|Y for Yes, any other key for No) : y
Success.

By default, MySQL comes with a database named 'test' that
anyone can access. This is also intended only for testing,
and should be removed before moving into a production
environment.


Remove test database and access to it? (Press y|Y for Yes, any other key for No) : y
 - Dropping test database...
Success.

 - Removing privileges on test database...
Success.

Reloading the privilege tables will ensure that all changes
made so far will take effect immediately.

Reload privilege tables now? (Press y|Y for Yes, any other key for No) : y
Success.

All done!

Sau khi hoàn tất bước đổi mật khẩu ở trên, chúng ta có thể thực hiện đăng nhập lại với mật khẩu vừa đổi.

mysql -uroot -pPass_xxxxx

Tạo DB và người dùng cho DB của ứng dụng web

Để tạo một database mới.

create database db_new;

Bước tiếp theo chúng ta sẽ thực hiện tạo một user cho ứng dụng web.

CREATE USER 'user_db'@'localhost' IDENTIFIED BY 'Pass_xxxxx';

Thêm full quyền quản lý DB cho user vừa tạo ở trên

GRANT ALL PRIVILEGES ON db_new.* TO 'user_db'@'localhost';
FLUSH PRIVILEGES;
exit;

Để kiểm tra bước tạo ở trên đã chuẩn chưa thì chúng ta thực hiện đăng nhập lại với user và password vừa tạo:

mysql -uuser_db -ppass_xxxx

Kiểm tra trạng thái của MySQL.

Redirecting to /bin/systemctl status mysqld.service
● mysqld.service - MySQL Server
Loaded: loaded (/usr/lib/systemd/system/mysqld.service; enabled; preset: d>
Active: active (running) since Mon 2023-07-31 10:10:56 UTC; 2 weeks 2 days>
Docs: man:mysqld(8)
http://dev.mysql.com/doc/refman/en/using-systemd.html
Main PID: 250921 (mysqld)
Status: "Server is operational"
Tasks: 46 (limit: 2322)
Memory: 575.6M
CPU: 2h 19min 306ms
CGroup: /system.slice/mysqld.service
└─250921 /usr/sbin/mysqld

Đến bước này là chúng ta đã hoàn thành việc cài đặt Mysql server trên Amazon Linux 2023. Ngoài ra để thực hiện import sql có sẵn vào DB vừa tạo thì chúng ta có thể cài đặt PhpMyadmin hoặc sử dụng command import của mysql.

Import và Export Mysql

Để Export Mysql, ở đây ta sẽ sử dụng mysqldump, thực hiện câu lệnh sau tại terminal local:

mysqldump -u user_db -pPass_xxxxx db_export > ./db_backup.sql

Lưu ý để sử dụng được DB và import vào DB mới bạn cần xóa warning của mysqldump trong file db_backup.sql vừa export ra. Tìm dòng sau trong file và xóa:

mysqldump: [Warning] Using a password on the command line interface can be insecure.

Để Import Mysql vào db mới ta thực hiện lệnh:

mysql -u username -p db_export < db_backup.sql

Tổng kết

Trên đây là toàn bộ quá trình cài đặt Mysql trên Amazon Linux 2023. Các bước hướng dẫn trên được tóm gọn dành cho người có kinh nghiệm khi cài đặt server. Nếu bạn có vấn đề gì trong quá trình cài đặt hãy để lại comment hoặc inbox mình sẽ hướng dẫn cho nhé.

Reference:

https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/ec2-lamp-amazon-linux-2023.html

The post Cài đặt MySQL trên Amazon Linux appeared first on Tomoshare.

Basic

CSS không phải nguyên nhân trực tiếp gây ra vấn đề khi load trang web, nhưng bạn vẫn nên tối ưu những phần nặng của dữ liệu mà CSS có thể chứa như: Xử dung CDN, xoá các tệp không xử dụng đến, thay đổi kích thước hình ảnh, xử dụng thumbnail, giảm thiểu số file css nếu có thể,…

Tuân thủ một số quy tắc trong style coding conventions cũng là một điều nên nhớ, dưới đây là một số quy tắc bạn có thể tham khảo:

• Lùi vào 2 space (khoảng trống) cho mỗi thuộc tính
• Sử dụng ngoặc kép thay vì sử dụng ngoặc đơn (font-family: “Arial Black”, input[type=”checkbox”])
• Đặt một dấu cách ở đằng sau dấu :
• Đặt một dấu cách ở trước dấu {
• Kết thúc định nghĩa các thuộc tính bằng một dấu chấm phẩy (mặc dù việc thêm dấu chấm phẩy là không bắt buộc nhé)
• Sử dụng các cú pháp ngắn gọn nếu có thể ví dụ như (padding, margin…)
• Chỉ khai báo mỗi dòng một thuộc tính (dễ nhìn, nếu lỗi có thể biết lỗi được ở dòng nào thuộc tính nào)
• Code thêm những thuộc tính khác mà trình duyệt này hỗ trợ mà trình duyệt khác không hỗ trợ
• Giữa các khối CSS nên có một khoảng trắng
• Khuyến khích sử dụng mã màu (#fff)
• …

CSS Pre-Processors

CSS Pre-Processors là một ngôn ngữ tiền xử lý CSS, các bạn có thể hiểu nó là một kiểu viết mở rộng, nâng cấp hơn so với CSS. Mục đích của CSS Pre-Processors được sinh ra nhằm mục đích đưa các đoạn code CSS trở nên giống hơn một ngôn ngữ lập trình, và cách viết này sẽ biên dịch lại thành các đoạn code CSS bình thường.

Để áp dụng các CSS Pre-Processors vào dự án của bạn thì có vài công cụ nổi tiếng giúp các bạn áp dụng vào dự án như: SCSS, SASS, LESS, Stylus… Trong bài này mình sẽ giới thiệu về SCSS/SASS.

Tất nhiên là phải có những lợi ích nhất định của CSS Pre-Processors thì nó mới được áp dụng vào các dự án như:

• Cải thiện thời gian viết CSS
• Linh hoạt hơn và có khả năng sử dụng lại code
• Dễ dàng bảo trì cũng như là phát triển
• Cấu trúc viết code rõ ràng, dễ nhìn hơn rất nhiền
• Hạn chế được những đoạn code trùng lặp, file code nhỏ gọn.

SASS

SASS là viết tắt của Syntactically Awesome StyleSheets là một CSS Pre-Processors nổi tiếng được biết đến trong giới Front-end Developer. SASS được sinh ra bởi lập trình viên Ruby, nếu như bạn đã làm việc với Ruby thì ắt hẳn sẽ biết tới các template phổ biến như HAML hay SLIM.

Tại sao mà mình lại nhắc đến Ruby, nó liên quan gì đến CSS thì mình xin giải thích đó chính là đến từ cú pháp. Ví dụ như khi viết SLIM các bạn sẽ không cần các dấu đóng thẻ, hay dấu chấm phẩy, hay nhận biết các thẻ con bằng cách lùi dòng vào… Điều này chính là những kiểu viết của SASS.

Ví dụ như thế này

.nav

  width: 100%

  height: 100%

  float: right

  p

    color: #e1e1e1

    font-size: 14px;

SCSS

Một phần không nhỏ developer không thích cách viết của SASS lắm vì nó mang lại cảm giác đọc hơi rối cả khó hiểu, có lẽ chính vì thế nên đã có sự nâng cấp tuyệt vời đến từ SCSS.

SCSS hay còn gọi là Sassy CSS, có cú pháp giống với CSS hơn là SASS giúp chúng ta tiếp cận dễ hơn rất nhiều. Hiểu đơn giản thì SCSS là một phiên bản nâng cấp của SASS.

.nav {

  width: 100%;

  height: 100%;

  float: right;

  p {

    color: #e1e1e1

    font-size: 14px;

  }

}

Sự khác biệt cơ bản của SCSS và SASS

Qua 2 phần giới thiệu ở trên thì phần nào các bạn cũng đã hiểu hiểu SCSS và SASS là gì và cách viết như thế nào. Ở phần này mình xin tóm tắt lại chút sự khác biệt để các bạn có cái nhìn tổng quát hơn.

SASS:

• Cú pháp ngắn gọn hơn
• Sử dụng indent để thể hiện quy tắc xếp chồng (nested rules)
• Khi kết thúc một property thì không cần dấu ; để kết thúc
• Khai báo mixins bằng ký tự =
• Sử dụng mixins bằng ký tự +

SCSS

• Cú pháp gần với CSS hơn
• Sử dụng cặp dấu {} để thể hiện quy tắc xếp chồng
• Kết thúc 1 khai báo property CSS bằng dấu ;
• Khai báo mixins bằng cú pháp @mixins ten-mixins
• Sử dụng mixins bằng cú pháp @include ten-mixins

Sử dụng variables

Bây giờ mình bắt đầu giới thiệu những thứ hay ho để giúp bạn viết CSS chuyên nghiệp hơn, hay ho hơn.

Để bắt đầu thì mình xin giới thiệu về variables. Đến CSS mà còn có cả variables (biến) thì cũng hơi bị thú vị rồi đấy.

Giả sử như dự án của bạn dùng đến cả trăm chỗ có thể sử dụng cùng một giá trị màu chả hạn, đối với các mã màu đơn giản thì các bạn nhớ được thôi chứ ví dụ có những mà màu rắc rối giả sử như DEFQ13 chả hạn, thì nhớ làm sao được, nhà còn bao việc 😄

Để tối ưu hơn trong việc này chúng ta sẽ đặt cái mã màu này trong một biến, giúp chúng ta thuận tiện sử dụng hơn nhiều.

$text-grey: #e1e1e1;

/* Sử dụng */

p {

  color: $text-grey;

}

div.container a {

  color: $text-grey;

}

…

Viết đơn giản không phải cầu kì.

Mixins

Mình từng nói ở trên là CSS Pre-Processors giúp chúng ta có thể tái sử dụng code. Mixins chính là cách để giúp chúng ta có thể làm được việc này một cách đơn giản.

@mixin bordered {

  border: 1px solid #ddd;
  
  &:hover {
  
  border-color: #999;
  
  }

}

/*Sử dụng chỉ cần include mixins đã khai báo*/

div {

    @include bordered;

}

Thậm chí chúng ta có thể truyền cả tham số vào mixins.

@mixin bordered($width) {

  border: $width solid #ddd;
  
  &:hover {
  
    border-color: #999;
    
  }
  
}

/*Sử dụng chỉ cần include mixins đã khai báo*/

div {
  @include bordered(1px);
}

Nested

Khi mà mới học lập trình HTML, CSS thì mình đã từng thế này, và mình nghĩ cũng nhiều bạn đã từng như mình.

<div class="container">

    <ul class="nav">

        <li class="item">

            <a class="item-children">Hello</a>

        </li>

    </ul>

</div>

Xong khi viết CSS sẽ dạng dạng như thế này.

.container {

  width: 100%;

}

.container .nav {

  font-size: 14px;

}

.container .nav .item {

  float: left;

}

.container .nav .item .children {

  texx-decoration: none

}

Nhìn đoạn code trên có khiếp không, lặp đi lặp lại các selector, đó là chỉ với trường hợp mình có 4 item con con bên trong. Chả lẽ giờ có đến chục item con con bên trong các bạn cũng viết kiểu như thế này thì rõ ràng là không hề ổn chút nào. Lúc người khác đọc lại code phải dò dò xem đâu là cha của nó các kiểu con đà điểu thì sẽ rất mất thời gian.

Nếu như ai còn đang viết kiểu như thế mình khuyên nên bỏ đi và áp dụng ngay kiểu nested rules như sau đây.

.container {

    width: 100%;

    .nav {

        font-size: 14px;

        .item {

            float: left;

            .children {

                text-decoration: none;

            }

        }

    }

}

Nhìn trông code có phải gọn gàng, dễ quản lí và chuyên nghiệp hơn chút rồi đấy. Hãy áp dụng nhé các bạn.

Ngoài ra còn rất nhiều các tính năng khác mà các bạn có thể lên trang chủ của nó tìm đọc nếu muốn.

Kĩ thuật OOCSS

OOCSS là viết tắt của Object-Oriented CSS, hướng đối tượng trong CSS. Cụ thể mà tính chất hướng đối tượng này đó là tính kế thừa.

Kĩ thuật này được sinh ra nhằm hạn chế việc trùng lặp code.

Khai báo class bổ trợ.

Nếu bạn nào đã sử dụng Bootstrap thì đây chính là kinh nghiệm khá hay mà chúng ta có thể học hỏi từ Bootstrap.

Viết cs ngắn gọn

<!DOCTYPE html>

<html>

  <head>
  
    <style>
    
    body {
      /* Thay vì viết từng thuộc tính */
    
      font-style: italic;
    
      font-weight: bold;
    
      font-size: .8em;
    
      line-height: 1.2;
    
      font-family: Arial, sans-serif;
    
      background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSjnIfv9UzLhhQwAG_0mxil1Z5KyQT7xROTYA&usqp=CAU");
  
      background-repeat: no-repeat;
  
      background-position: center center;
  
      background-attachment: fixed;
    
      background-color: #fff;
      /* thì chúng ta có thể viết gọn lại như sau */
  
      font: italic bold .8em/1.2 Arial, sans-serif;
    
      background: #fff url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSjnIfv9UzLhhQwAG_0mxil1Z5KyQT7xROTYA&usqp=CAU") no-repeat fixed center center;
    
    }
    
    h1 {
    
      color: green;
    
      text-align: center;
    
    }
    
    p {
    
      font-family: verdana;
    
      font-size: 20px;
    
      position: fixed;
    
      bottom: 0;
    
      text-align: center;
    
      width: 100%;
    
    }
    
    </style>
  
  </head>

  <body>
  
    <h1>Welcome to</h1>
    
    <p>All Rights Reserved</p>
  
  </body>

</html>

Lưu ý & suy ngẫm

Một selector với trọng số lớn liệu có tốt không?

Ví dụ:

/* Trọng số là 2,3,4 */

#main article.sports table#stats tr:nth-child(even) td:last-child {

  ...

}

Với trọng số là 2,3,4, bạn sẽ rất khó để override nó, và sẽ làm cho code của bạn rối rắm và khó để maintain hay extend.

Bất kì khi nào bạn rơi vào tình huống không hiểu vì sao element của mình lại có style không như mong muốn, thì Specificity sẽ giúp bạn. Tuy nhiên thay vì ngồi đếm trọng số bằng tay, giờ đây với công cụ devtools mạnh mẽ của các browser thì việc xác định lỗi style là vô cùng đơn giản. Tuy nhiên các công cụ này cũng xây dựng trên nguyên lý CSS Specificity mà thôi chứ không có gì khác biệt đâu. Bạn có thể tham khảo hình ảnh bên dưới để hiểu hơn về cách đánh trọng số.

Specificity chỉ có ý nghĩa nếu một element có nhiều selector cùng trỏ (target) đến nó. Nói nôm na là nếu cuộc chiến mà chỉ có 1 người tham gia thì hiển nhiên người đó thắng rồi.

Trong CSS có việc kế thừa style từ các element cha. Tuy nhiên việc kế thừa này sẽ luôn xếp sau những selector trỏ (target) đích danh đến element nhé. Bạn để ý khi sử dụng devtools là thấy thôi.

Việc có nên sử dụng inline styles không vẫn là một vấn đề gây tranh cãi. Một số linter sẽ warning nếu bạn viết inline styles, nhưng bạn vẫn có thể tắt warning đó đi nếu muốn. Một trong những lý do là vì trọng số của nó quá cao sẽ dễ gây ra các lỗi không mong muốn, hoặc sẽ rất khó để override và buộc phải dùng đến !important. Một lý do khác nữa là với nhiều “chuyên gia” thì CSS nên đặt trong các file .css để dễ quản lý, chứ nếu nằm trong style (html) thì rối loạn lên hết?

Mặc dù trùm cuối !important vô cùng mạnh mẽ, việc dùng đến !important không phải là một giải pháp tốt và cần hạn chế sử dụng, giống như inline styles mà mình vừa đề cập đến. Trước khi buộc phải dùng đến !important, bạn hãy suy xét cẩn thận xem chúng ta có thể sử dụng CSS Specificity để đạt được mục đích hay không.

BEM

Đây là một kĩ thuật để đặt tên cho class trong HTML/CSS. Cách đặt tên class với BEM sẽ làm code của chúng ta nhìn rất chuyên nghiệp và có logic hơn rất nhiều.

Việc áp dụng kĩ thuật này vào trong project sẽ giúp chúng ta dễ dàng maintain và phát triển, dễ dàng hơn với những người vào dự án sau này khi đọc lại code.

BEM là viết tắt của Block, Element và Modifier. Nguyên tắc để đặt tên class sẽ dựa trên 3 thành phần kia để chúng ta đặt tên class cho chuẩn chỉ.

Block: Một khối độc lập mang ý nghĩa riêng, mô tả rõ mục đích của nó. (header, container, menu…). Block sẽ chứa những định dạng chung để có thể tái sử dụng.

Element: Là một phần thuộc một khối và thực hiện một chức năng cụ thể, element này sẽ phụ thuộc vào block để đặt tên sao cho phải.

Modifier: Modifier sẽ dùng để thao tác nếu muốn thay đổi cách hiển thị của block hoặc element.

Ở đây mình không phải muốn giải thích hay giới thiệu chi tiết về 2 “phương pháp” này, mà chỉ muốn chỉ ra một vài điểm liên quan với Specificity thôi. Ngoài BEM và ITCSS ra còn có nhiều phương pháp khác nữa, nhưng cơ bản đều xây dựng trên Specificity cả.

BEM: mình mặc định bạn đã biết đến BEM, thì một vài tôn chỉ của nó có thể kể đến như:

Tránh sử dụng id (#foo): lý do thì như mình đã chia sẻ, id có trọng số lớn và khá khó để override, nên việc cố gắng override nó sẽ dễ đẩy CSS của bạn đến một tương lai không mấy sáng sủa.

Tránh nested selector, cố gắng làm phẳng selector: cũng cùng lý do, nested selector cũng làm tăng trọng số của selector.

Ví dụ BEM sẽ khuyến khích:

/* BEM thích điều này, trọng số chỉ là 0,1,0 nhưng vẫn rất specific

và khó bị conflict */



.block {}

.block__elem1 {}

.block__elem2 {}

.block__elem3 {}

/* Trọng số sẽ là 0,2,0, cũng không quá tệ, nhưng BEM không khuyến khích

và nó cũng rất dễ bị conflict. */

.block {}

.block .elem1 {}

.block .elem2 {}

.block .elem3 {}

Tổng kết

Trên đây là một số kiến thức nhỏ mình đã tìm hiểu được, hi vọng nó sẽ giúp ích cho bạn trong dự án.

The post Tối ưu cách viết CSS appeared first on Tomoshare.