Bạn có nên tách CSS và HTML không?

Khi bạn bắt đầu làm việc trên các bảng định kiểu lớn hơn và các dự án lớn, bạn sẽ phát hiện ra rằng việc duy trì một tệp CSS khổng lồ có thể là một thách thức. Trong bài viết này, chúng ta sẽ xem xét ngắn gọn một số phương pháp hay nhất để viết CSS của bạn sao cho dễ bảo trì và một số giải pháp bạn sẽ tìm thấy khi người khác sử dụng để giúp cải thiện khả năng bảo trì

điều kiện tiên quyết. Biết sử dụng máy tính cơ bản, cài đặt phần mềm cơ bản, kiến ​​thức cơ bản về làm việc với tệp, kiến ​​thức cơ bản về HTML (học Giới thiệu về HTML) và ý tưởng về cách thức hoạt động của CSS (học các bước đầu tiên của CSS. )Khách quan. Để tìm hiểu một số mẹo và phương pháp hay nhất để tổ chức biểu định kiểu, đồng thời tìm hiểu về một số quy ước đặt tên và công cụ được sử dụng phổ biến để trợ giúp tổ chức CSS và làm việc theo nhóm

Dưới đây là một số gợi ý chung về các cách để giữ cho các biểu định kiểu của bạn được ngăn nắp và gọn gàng

Nếu bạn đang làm việc với một nhóm trong một dự án hiện có, điều đầu tiên cần kiểm tra là liệu dự án có hướng dẫn phong cách hiện có cho CSS hay không. Hướng dẫn phong cách nhóm phải luôn chiến thắng sở thích cá nhân của riêng bạn. Thường không có cách làm đúng hay sai, nhưng tính nhất quán mới là điều quan trọng

Ví dụ: hãy xem hướng dẫn CSS để biết ví dụ về mã MDN

Nếu bạn có thể đặt ra các quy tắc cho dự án hoặc đang làm việc một mình, thì điều quan trọng nhất cần làm là giữ cho mọi thứ nhất quán. Tính nhất quán có thể được áp dụng theo mọi cách, chẳng hạn như sử dụng cùng một quy ước đặt tên cho các lớp, chọn một phương pháp mô tả màu sắc hoặc duy trì định dạng nhất quán. (Ví dụ: bạn sẽ sử dụng các tab hoặc dấu cách để thụt lề mã của mình chứ? Nếu là dấu cách, bao nhiêu dấu cách?)

Có một bộ quy tắc mà bạn luôn tuân theo sẽ giảm thiểu chi phí đầu óc cần thiết khi viết CSS, vì một số quyết định đã được đưa ra

Có một số cách bạn sẽ thấy CSS được định dạng. Một số nhà phát triển đặt tất cả các quy tắc trên một dòng, như vậy

.box {background-color: #567895; }
h2 {background-color: black; color: white; }

Các nhà phát triển khác thích phá vỡ mọi thứ trên một dòng mới

.box {
  background-color: #567895;
}

h2 {
  background-color: black;
  color: white;
}

CSS không quan tâm bạn sử dụng cái nào. Cá nhân chúng tôi thấy việc đặt từng cặp thuộc tính và giá trị trên một dòng mới sẽ dễ đọc hơn

Thêm nhận xét vào CSS của bạn sẽ giúp bất kỳ nhà phát triển nào trong tương lai làm việc với tệp CSS của bạn, nhưng cũng sẽ giúp bạn khi bạn quay lại dự án sau thời gian nghỉ

/* This is a CSS comment
It can be broken onto multiple lines. */

Một mẹo hay là thêm một khối nhận xét giữa các phần logic trong biểu định kiểu của bạn, để giúp xác định vị trí các phần khác nhau một cách nhanh chóng khi quét hoặc thậm chí cung cấp cho bạn thứ gì đó để tìm kiếm để chuyển ngay vào phần đó của CSS. Nếu bạn sử dụng một chuỗi không xuất hiện trong mã, bạn có thể chuyển từ phần này sang phần khác bằng cách tìm kiếm nó — bên dưới chúng tôi đã sử dụng

/* This is a CSS comment
It can be broken onto multiple lines. */
0

/* || General styles */

/* … */

/* || Typography */

/* … */

/* || Header and Main Navigation */

/* … */

Bạn không cần phải bình luận mọi thứ trong CSS của mình, vì phần lớn nó sẽ tự giải thích. Những gì bạn nên nhận xét là những điều mà bạn đã đưa ra một quyết định cụ thể vì một lý do

Ví dụ, bạn có thể đã sử dụng thuộc tính CSS theo một cách cụ thể để khắc phục sự không tương thích của trình duyệt cũ hơn

.box {
  background-color: red; /* fallback for older browsers that don't support gradients */
  background-image: linear-gradient(to right, #ff0000, #aa0000);
}

Có lẽ bạn đã làm theo hướng dẫn để đạt được điều gì đó và CSS không dễ hiểu hoặc dễ nhận biết. Trong trường hợp đó, bạn có thể thêm URL của hướng dẫn vào phần bình luận. Bạn sẽ cảm ơn chính mình khi quay lại dự án này sau một năm hoặc lâu hơn và có thể nhớ mơ hồ rằng có một hướng dẫn tuyệt vời về điều đó, nhưng không thể nhớ nó từ đâu

Bạn nên có tất cả các kiểu dáng phổ biến trước tiên trong biểu định kiểu. Điều này có nghĩa là tất cả các kiểu thường sẽ được áp dụng trừ khi bạn làm điều gì đó đặc biệt với phần tử đó. Thông thường, bạn sẽ thiết lập các quy tắc cho

  • /* This is a CSS comment
    It can be broken onto multiple lines. */
    
    1
  • /* This is a CSS comment
    It can be broken onto multiple lines. */
    
    2
  • /* This is a CSS comment
    It can be broken onto multiple lines. */
    
    3,
    /* This is a CSS comment
    It can be broken onto multiple lines. */
    
    4,
    /* This is a CSS comment
    It can be broken onto multiple lines. */
    
    5,
    /* This is a CSS comment
    It can be broken onto multiple lines. */
    
    6,
    /* This is a CSS comment
    It can be broken onto multiple lines. */
    
    7
  • /* This is a CSS comment
    It can be broken onto multiple lines. */
    
    8 và
    /* This is a CSS comment
    It can be broken onto multiple lines. */
    
    9
  • Các thuộc tính
    /* || General styles */
    
    /* … */
    
    /* || Typography */
    
    /* … */
    
    /* || Header and Main Navigation */
    
    /* … */
    
    0
  • liên kết

Trong phần này của biểu định kiểu, chúng tôi đang cung cấp kiểu mặc định cho loại trên trang web, thiết lập kiểu mặc định cho bảng dữ liệu và danh sách, v.v.

/* || GENERAL STYLES */

body {
  /* … */
}

h1,
h2,
h3,
h4 {
  /* … */
}

ul {
  /* … */
}

blockquote {
  /* … */
}

Sau phần này, chúng ta có thể định nghĩa một vài lớp tiện ích, ví dụ, một lớp loại bỏ kiểu danh sách mặc định cho các danh sách mà chúng ta sẽ hiển thị dưới dạng các mục linh hoạt hoặc theo cách khác. Nếu bạn có một vài lựa chọn kiểu dáng mà bạn biết rằng bạn sẽ muốn áp dụng cho nhiều thành phần khác nhau, chúng có thể được đưa vào phần này

/* || UTILITIES */

.nobullets {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* … */

Sau đó, chúng tôi có thể thêm mọi thứ được sử dụng trên toàn trang web. Đó có thể là những thứ như bố cục trang cơ bản, tiêu đề, kiểu điều hướng, v.v.

/* || SITEWIDE */

.main-nav {
  /* … */
}

.logo {
  /* … */
}

Cuối cùng, chúng tôi sẽ bao gồm CSS cho những thứ cụ thể, được chia nhỏ theo ngữ cảnh, trang hoặc thậm chí thành phần mà chúng được sử dụng

/* || STORE PAGES */

.product-listing {
  /* … */
}

.product-box {
  /* … */
}

Bằng cách sắp xếp mọi thứ theo cách này, ít nhất chúng tôi có ý tưởng về phần nào của biểu định kiểu mà chúng tôi sẽ tìm kiếm thứ gì đó mà chúng tôi muốn thay đổi

Nếu bạn tạo các bộ chọn rất cụ thể, bạn sẽ thường thấy rằng mình cần sao chép các đoạn CSS của mình để áp dụng các quy tắc tương tự cho phần tử khác. Ví dụ: bạn có thể có một cái gì đó giống như bộ chọn bên dưới, áp dụng quy tắc cho

/* || General styles */

/* … */

/* || Typography */

/* … */

/* || Header and Main Navigation */

/* … */
1 với lớp
/* || General styles */

/* … */

/* || Typography */

/* … */

/* || Header and Main Navigation */

/* … */
2 bên trong một
/* || General styles */

/* … */

/* || Typography */

/* … */

/* || Header and Main Navigation */

/* … */
3 với lớp
/* || General styles */

/* … */

/* || Typography */

/* … */

/* || Header and Main Navigation */

/* … */
4

article.main p.box {
  border: 1px solid #ccc;
}

Sau đó, nếu bạn muốn áp dụng các quy tắc tương tự cho thứ gì đó bên ngoài

/* || General styles */

/* … */

/* || Typography */

/* … */

/* || Header and Main Navigation */

/* … */
4 hoặc cho thứ gì đó không phải là
/* || General styles */

/* … */

/* || Typography */

/* … */

/* || Header and Main Navigation */

/* … */
1, bạn sẽ phải thêm một bộ chọn khác vào các quy tắc này hoặc tạo một bộ quy tắc hoàn toàn mới. Thay vào đó, bạn có thể sử dụng bộ chọn
/* || General styles */

/* … */

/* || Typography */

/* … */

/* || Header and Main Navigation */

/* … */
7 để áp dụng quy tắc của mình cho bất kỳ phần tử nào có lớp
/* || General styles */

/* … */

/* || Typography */

/* … */

/* || Header and Main Navigation */

/* … */
2

.box {
  background-color: #567895;
}

h2 {
  background-color: black;
  color: white;
}
0

Sẽ có lúc làm cho một cái gì đó cụ thể hơn có ý nghĩa;

Trong trường hợp bạn có các kiểu rất khác nhau cho các phần riêng biệt của trang web, bạn có thể muốn có một biểu định kiểu bao gồm tất cả các quy tắc chung, cũng như một số biểu định kiểu nhỏ hơn bao gồm các quy tắc cụ thể cần thiết cho các phần đó. Bạn có thể liên kết tới nhiều biểu định kiểu từ một trang và áp dụng các quy tắc thông thường của tầng, với các quy tắc trong biểu định kiểu được liên kết sau đến sau các quy tắc trong biểu định kiểu được liên kết trước đó

Ví dụ: chúng tôi có thể có một cửa hàng trực tuyến như một phần của trang web, với rất nhiều CSS chỉ được sử dụng để tạo kiểu cho danh sách sản phẩm và biểu mẫu cần thiết cho cửa hàng. Sẽ hợp lý hơn nếu có những thứ đó trong một biểu định kiểu khác, chỉ được liên kết với các trang cửa hàng

Điều này có thể giúp việc sắp xếp CSS của bạn trở nên dễ dàng hơn và cũng có nghĩa là nếu có nhiều người đang làm việc trên CSS, thì bạn sẽ gặp ít tình huống hơn trong đó hai người cần phải làm việc trên cùng một biểu định kiểu, dẫn đến xung đột trong kiểm soát nguồn

Bản thân CSS không có nhiều cách tổ chức sẵn có; . Cộng đồng web đã phát triển nhiều công cụ và phương pháp khác nhau có thể giúp bạn quản lý các dự án CSS lớn hơn. Vì bạn có thể bắt gặp những công cụ hỗ trợ này khi làm việc với người khác và vì chúng thường hữu ích nói chung nên chúng tôi đã đưa vào một hướng dẫn ngắn về một số công cụ này

Thay vì cần phải đưa ra các quy tắc của riêng bạn để viết CSS, bạn có thể hưởng lợi từ việc áp dụng một trong những phương pháp đã được cộng đồng thiết kế và thử nghiệm trên nhiều dự án. Các phương pháp này về cơ bản là các hướng dẫn viết mã CSS, áp dụng cách tiếp cận rất có cấu trúc để viết và tổ chức CSS. Thông thường, họ có xu hướng hiển thị CSS chi tiết hơn bạn có thể có nếu bạn đã viết và tối ưu hóa mọi bộ chọn thành một bộ quy tắc tùy chỉnh cho dự án đó

Tuy nhiên, bạn có được rất nhiều cấu trúc bằng cách áp dụng một. Vì nhiều hệ thống trong số này được sử dụng rộng rãi, nên các nhà phát triển khác có nhiều khả năng hiểu cách tiếp cận bạn đang sử dụng và có thể viết CSS của riêng họ theo cách tương tự, thay vì phải tìm ra phương pháp cá nhân của riêng bạn từ đầu

OOCSS

Hầu hết các cách tiếp cận mà bạn sẽ gặp đều nhờ vào khái niệm CSS hướng đối tượng (OOCSS), một cách tiếp cận được phổ biến nhờ tác phẩm của Nicole Sullivan. Ý tưởng cơ bản của OOCSS là tách CSS của bạn thành các đối tượng có thể tái sử dụng, có thể được sử dụng ở bất kỳ đâu bạn cần trên trang web của mình. Ví dụ tiêu chuẩn về OOCSS là mẫu được mô tả là Đối tượng phương tiện. Đây là mẫu có một bên là hình ảnh, video hoặc thành phần khác có kích thước cố định và bên kia là nội dung linh hoạt. Đó là một mô hình mà chúng tôi thấy trên tất cả các trang web về nhận xét, danh sách, v.v.

Nếu bạn không sử dụng cách tiếp cận OOCSS, bạn có thể tạo một CSS tùy chỉnh cho các vị trí khác nhau mà mẫu này được sử dụng, chẳng hạn như bằng cách tạo hai lớp, một lớp có tên là

/* || General styles */

/* … */

/* || Typography */

/* … */

/* || Header and Main Navigation */

/* … */
9 với một loạt các quy tắc cho các bộ phận cấu thành và một lớp khác có tên là
.box {
  background-color: red; /* fallback for older browsers that don't support gradients */
  background-image: linear-gradient(to right, #ff0000, #aa0000);
}
0 với hầu hết các quy tắc. . Sự khác biệt giữa hai thành phần này là mục danh sách có viền dưới và hình ảnh trong nhận xét có đường viền trong khi hình ảnh mục danh sách thì không

.box {
  background-color: #567895;
}

h2 {
  background-color: black;
  color: white;
}
1

Trong OOCSS, bạn sẽ tạo một mẫu có tên là

.box {
  background-color: red; /* fallback for older browsers that don't support gradients */
  background-image: linear-gradient(to right, #ff0000, #aa0000);
}
2 có tất cả CSS chung cho cả hai mẫu — một lớp cơ sở cho những thứ thường có hình dạng của đối tượng phương tiện. Sau đó, chúng tôi sẽ thêm một lớp bổ sung để giải quyết những khác biệt nhỏ đó, do đó mở rộng kiểu dáng đó theo những cách cụ thể

.box {
  background-color: #567895;
}

h2 {
  background-color: black;
  color: white;
}
2

Trong HTML của bạn, nhận xét sẽ cần áp dụng cả hai lớp

.box {
  background-color: red; /* fallback for older browsers that don't support gradients */
  background-image: linear-gradient(to right, #ff0000, #aa0000);
}
2 và
/* || General styles */

/* … */

/* || Typography */

/* … */

/* || Header and Main Navigation */

/* … */
9

.box {
  background-color: #567895;
}

h2 {
  background-color: black;
  color: white;
}
3

Mục danh sách sẽ áp dụng

.box {
  background-color: red; /* fallback for older browsers that don't support gradients */
  background-image: linear-gradient(to right, #ff0000, #aa0000);
}
2 và
.box {
  background-color: red; /* fallback for older browsers that don't support gradients */
  background-image: linear-gradient(to right, #ff0000, #aa0000);
}
0

.box {
  background-color: #567895;
}

h2 {
  background-color: black;
  color: white;
}
4

Công việc mà Nicole Sullivan đã làm trong việc mô tả cách tiếp cận này và quảng bá nó có nghĩa là ngay cả những người không tuân thủ nghiêm ngặt cách tiếp cận OOCSS ngày nay nói chung sẽ sử dụng lại CSS theo cách này — nó đã đi vào hiểu biết của chúng tôi như một cách tốt để tiếp cận mọi thứ nói chung

BEM

BEM là viết tắt của Công cụ sửa đổi phần tử khối. Trong BEM, một khối là một thực thể độc lập, chẳng hạn như nút, menu hoặc logo. Một phần tử giống như một mục trong danh sách hoặc một tiêu đề được gắn với khối chứa nó. Công cụ sửa đổi là một cờ trên một khối hoặc phần tử thay đổi kiểu dáng hoặc hành vi. Bạn sẽ có thể nhận ra mã sử dụng BEM do việc sử dụng rộng rãi dấu gạch ngang và dấu gạch dưới trong các lớp CSS. Ví dụ: xem các lớp được áp dụng cho HTML này từ trang về quy ước đặt tên BEM

.box {
  background-color: #567895;
}

h2 {
  background-color: black;
  color: white;
}
5

Các lớp bổ sung tương tự như các lớp được sử dụng trong ví dụ về OOCSS;

BEM được sử dụng rộng rãi trong các dự án web lớn hơn và nhiều người viết CSS của họ theo cách này. Có khả năng bạn sẽ bắt gặp các ví dụ, ngay cả trong các hướng dẫn, sử dụng cú pháp BEM mà không đề cập đến lý do tại sao CSS được cấu trúc theo cách như vậy

Đọc thêm về hệ thống này BEM 101 trên Thủ thuật CSS

Các hệ thống phổ biến khác

Có một số lượng lớn các hệ thống này được sử dụng. Các cách tiếp cận phổ biến khác bao gồm Kiến trúc mô-đun và có thể mở rộng cho CSS (SMACSS), được tạo bởi Jonathan Snook, ITCSS từ Harry Roberts và CSS nguyên tử (ACSS), ban đầu được tạo bởi Yahoo. Nếu bạn bắt gặp một dự án sử dụng một trong những cách tiếp cận này, thì lợi thế là bạn sẽ có thể tìm kiếm và tìm thấy nhiều bài viết và hướng dẫn để giúp bạn hiểu cách viết mã theo cùng một phong cách

Nhược điểm của việc sử dụng một hệ thống như vậy là chúng có vẻ quá phức tạp, đặc biệt đối với các dự án nhỏ hơn

Một cách khác để tổ chức CSS là tận dụng một số công cụ có sẵn cho các nhà phát triển giao diện người dùng, cho phép bạn thực hiện một cách tiếp cận có lập trình hơn một chút để viết CSS. Có một số công cụ mà chúng tôi gọi là bộ xử lý trước và bộ xử lý sau. Bộ tiền xử lý chạy trên các tệp thô của bạn và biến chúng thành biểu định kiểu, trong khi bộ xử lý hậu kỳ lấy biểu định kiểu đã hoàn thành của bạn và thực hiện điều gì đó với nó — có lẽ để tối ưu hóa để tải nhanh hơn

Việc sử dụng bất kỳ công cụ nào trong số này sẽ yêu cầu môi trường phát triển của bạn có thể chạy các tập lệnh thực hiện xử lý trước và sau. Nhiều trình chỉnh sửa mã có thể làm điều này cho bạn hoặc bạn có thể cài đặt các công cụ dòng lệnh để trợ giúp

Bộ xử lý trước phổ biến nhất là Sass. Đây không phải là hướng dẫn về Sass, vì vậy tôi sẽ giải thích ngắn gọn một số điều mà Sass có thể làm, những điều thực sự hữu ích về mặt tổ chức ngay cả khi bạn không sử dụng bất kỳ tính năng nào khác của Sass. Nếu bạn muốn tìm hiểu thêm về Sass, hãy bắt đầu với bài viết cơ bản về Sass, sau đó chuyển sang tài liệu khác của họ

Định nghĩa biến

CSS hiện có các thuộc tính tùy chỉnh gốc, làm cho tính năng này ngày càng ít quan trọng hơn. Tuy nhiên, một trong những lý do bạn có thể sử dụng Sass là để có thể xác định tất cả các màu sắc và phông chữ được sử dụng trong dự án dưới dạng cài đặt, sau đó sử dụng biến đó xung quanh dự án. Điều này có nghĩa là nếu bạn nhận ra mình đã sử dụng sai màu xanh lam, bạn chỉ cần thay đổi nó ở một nơi

Nếu chúng tôi đã tạo một biến có tên là

.box {
  background-color: red; /* fallback for older browsers that don't support gradients */
  background-image: linear-gradient(to right, #ff0000, #aa0000);
}
7, như trong dòng đầu tiên bên dưới, thì chúng tôi có thể sử dụng nó thông qua biểu định kiểu ở bất kỳ đâu yêu cầu màu đó

.box {
  background-color: #567895;
}

h2 {
  background-color: black;
  color: white;
}
6

Sau khi được biên dịch thành CSS, bạn sẽ có CSS ​​sau trong biểu định kiểu cuối cùng

.box {
  background-color: #567895;
}

h2 {
  background-color: black;
  color: white;
}
7

Biên dịch biểu định kiểu thành phần

Tôi đã đề cập ở trên rằng một cách để tổ chức CSS là chia nhỏ các biểu định kiểu thành các biểu định kiểu nhỏ hơn. Khi sử dụng Sass, bạn có thể đưa điều này lên một cấp độ khác và có rất nhiều biểu định kiểu rất nhỏ — thậm chí còn có một biểu định kiểu riêng cho từng thành phần. Bằng cách sử dụng chức năng được bao gồm trong Sass (một phần), tất cả những thứ này có thể được biên dịch cùng nhau thành một hoặc một số lượng nhỏ các biểu định kiểu để thực sự liên kết đến trang web của bạn

Vì vậy, ví dụ: với , bạn có thể có một số tệp kiểu bên trong một thư mục, chẳng hạn như

.box {
  background-color: red; /* fallback for older browsers that don't support gradients */
  background-image: linear-gradient(to right, #ff0000, #aa0000);
}
8,
.box {
  background-color: red; /* fallback for older browsers that don't support gradients */
  background-image: linear-gradient(to right, #ff0000, #aa0000);
}
9,
/* || GENERAL STYLES */

body {
  /* … */
}

h1,
h2,
h3,
h4 {
  /* … */
}

ul {
  /* … */
}

blockquote {
  /* … */
}
0,
/* || GENERAL STYLES */

body {
  /* … */
}

h1,
h2,
h3,
h4 {
  /* … */
}

ul {
  /* … */
}

blockquote {
  /* … */
}
1, v.v. Sau đó, bạn có thể sử dụng vai trò Sass
/* || GENERAL STYLES */

body {
  /* … */
}

h1,
h2,
h3,
h4 {
  /* … */
}

ul {
  /* … */
}

blockquote {
  /* … */
}
2 để tải chúng vào các biểu định kiểu khác

.box {
  background-color: #567895;
}

h2 {
  background-color: black;
  color: white;
}
8

Nếu tất cả các phần được tải vào một tệp chỉ mục, như ngụ ý ở trên, thì bạn có thể tải toàn bộ thư mục đó vào một biểu định kiểu khác trong một lần

.box {
  background-color: #567895;
}

h2 {
  background-color: black;
  color: white;
}
9

Ghi chú. Một cách đơn giản để dùng thử Sass là sử dụng CodePen — bạn có thể bật Sass cho CSS của mình trong Cài đặt cho Bút và CodePen sau đó sẽ chạy trình phân tích cú pháp Sass cho bạn để bạn có thể xem trang web kết quả với CSS thông thường được áp dụng. Đôi khi bạn sẽ thấy rằng các hướng dẫn CSS đã sử dụng Sass thay vì CSS thuần túy trong các bản trình diễn CodePen của họ, vì vậy sẽ rất hữu ích nếu bạn biết một chút về nó

Xử lý hậu kỳ để tối ưu hóa

Ví dụ: nếu bạn lo lắng về việc thêm kích thước vào biểu định kiểu của mình bằng cách thêm nhiều nhận xét bổ sung và khoảng trắng, thì bước xử lý hậu kỳ có thể là tối ưu hóa CSS bằng cách loại bỏ mọi thứ không cần thiết trong phiên bản sản xuất. Một ví dụ về giải pháp hậu xử lý để thực hiện việc này sẽ là cssnano

Đây là phần cuối cùng của mô-đun khối xây dựng của chúng tôi và như bạn có thể thấy, có nhiều cách để bạn có thể tiếp tục khám phá CSS từ thời điểm này — nhưng bây giờ bạn có thể tiếp tục tự kiểm tra bằng các bài đánh giá của chúng tôi. cái đầu tiên được liên kết dưới đây

Để tìm hiểu thêm về bố cục trong CSS, hãy xem mô-đun Bố cục CSS

Bây giờ bạn cũng sẽ có các kỹ năng để khám phá phần còn lại của tài liệu CSS MDN. Bạn có thể tra cứu các thuộc tính và giá trị, khám phá Sách dạy nấu ăn CSS của chúng tôi để biết các mẫu sử dụng hoặc tiếp tục đọc trong một số hướng dẫn cụ thể, chẳng hạn như Hướng dẫn về bố cục lưới CSS của chúng tôi

Lợi ích của việc tách CSS kiểu khỏi HTML nội dung là gì?

Kiểu (CSS) tách biệt với cấu trúc (HTML), có nghĩa là kích thước tệp nhỏ hơn . Giảm kích thước tệp có nghĩa là giảm băng thông, có nghĩa là thời gian tải nhanh hơn.

Bạn có thể tách CSS và HTML không?

Cách tiếp cận. Chúng tôi có thể tách biệt nội dung và thiết kế bằng cách sử dụng CSS bên ngoài có phần mở rộng tệp là. css . Đối với điều này, chỉ cần chỉ định đường dẫn tệp được yêu cầu của tệp bên ngoài trong thẻ

Có thể kết hợp HTML và CSS không?

Có ba cách để thêm CSS vào HTML. Bạn có thể thêm CSS nội tuyến vào thuộc tính kiểu để tạo kiểu cho một phần tử HTML trên trang . Bạn có thể nhúng biểu định kiểu nội bộ bằng cách thêm CSS vào phần đầu của tài liệu HTML của bạn. Hoặc bạn có thể liên kết đến một biểu định kiểu bên ngoài sẽ chứa tất cả CSS tách biệt với HTML của bạn.