Thứ Hai , Tháng Tư 24 2017
Trang chủ / Chuyên đề lập trình / Lập trình Web / Kỹ thuật HTML-CSS / Lý do việc tách biệt CSS, JS với nội dung HTML

Lý do việc tách biệt CSS, JS với nội dung HTML

Lý do việc tách biệt CSS, JS với nội dung HTML


Chào các bạn,
Để bắt đầu vào khóa học này, tôi sẽ trình bày các bạn trước những ý niệm quan trọng trong việc phát triển và xây dựng ứng dụng Web, lập trình web, thiết kế web. Trong bài học này, tôi sẽ trình bày với các bạn những lý do tại sao chúng ta khi thiết kế hoặc xây dựng một website, chúng ta cần tách hẳn CSS và JS ra ngoài trang web.
Các bạn đã bao giờ tìm thấy chính mình trong một tình huống mà các bạn đã thực hiện một trang web mà các đoạn mã HTML, CSS và JavaScript được tổ chức trong một file và sau đó nó trở thành như một cơn ác mộng nếu các bạn mang trang web đó ra và sửa đổi nó?
Những gì các bạn đã thực hiện như vậy thường được gọi là “Spaghetti code“, lộn xộn và rối như “mì ống ý” vậy. Để tránh rơi vào cái bẫy này, bạn nên thực hiện theo một quy tắc đơn giản:

Luôn tách HTML, CSS và JavaScript vào tập tin khác nhau.

Hãy nhớ rằng mã HTML là để thực hiện cho nội dung ( có cấu trúc), CSS là để thiết kế và JavaScript là dành cho thực hiện các hành vi .

Bằng cách tách chúng thành các file riêng lẻ khác nhau chúng ta sẽ có được những lợi ích rất lớn sau:

  • Bảo trì dễ dàng
  • Tăng hiệu suất
  • Khả năng tiếp cận tốt hơn
  • Một nền tảng tốt cho SEO

Bảo trì dễ dàng

Trước hết, code của các bạn trở nên dễ bảo trì hơn. Nếu trong quá trình thực hiện, chúng ta có thể thực hiện sai với thiết kế về mặt giao diện, layout nào đó, thì lúc đó chúng ta có thể nghĩ ngay là nó có thể là trong CSS. Nếu một chức năng nào đó mà không thực hiện hành vi nhưng mong đợi ở phía Client,  chúng ta nghĩ có lẽ là sai trong các tập tin JavaScript. Nói cách khác, việc tách này giúp chúng ta dễ dàng hơn để tìm lỗi sai ở đâu.

Các bạn hãy tưởng tượng nếu chúng ta muốn thay đổi toàn bộ thiết kế của trang web của bạn trong một file bao gồm cả CSS, JS và HTML trong đó, có lẽ chúng ta cũng hơi rùng mình ấy nhỉ :). Việc có HTML, CSS và JavaScript trong một tập tin lớn, khi muốn thay đổi, về cơ bản chúng ta cần phải viết lại toàn bộ trang web. Nhưng nếu bạn là một coder tốt và giữ chúng tách ra, tất cả các bạn cần làm là thay đổi CSS. Đơn giản, phải không nào?

Tăng Hiệu suất

Trong hầu hết các trường hợp, các trang web sẽ tải nhanh hơn nếu chúng ta có các lớp riêng biệt. Và tất cả chúng ta đều biết tốc độ là rất quan trọng trong việc xây dựng website ! Tốc độ quyết định sự cạnh tranh của sản phẩm của các bạn!

JavaScript và CSS là tài nguyên tĩnh, do vậy, nó có thể được lưu trữ một cách hiệu quả thông qua các bộ đệm các trình duyệt.  Thông thường chúng được trình duyệt tải về một lần duy nhất và lưu trữ trong bộ đệm của trình duyêt, nhờ vào đó chúng ta tiết kiệm được cả băng thông và thời gian hiển thị.

Khả năng tiếp cận

Bằng cách tách các tập tin ra các file khác nhau, nó sẽ giúp cho khả năng tiếp cận của các trang web của chúng ta tăng lên. Điều này có nghĩa là ngay cả khi người sử dụng tương tác với trang web của chúng ta bằng cách sử dụng một thiết bị có khả năng thấp (ví dụ: trình duyệt không hỗ trợ JavaScript, màn hình phân giải thấp, trình duyệt cũ,…) thì nó vẫn có thể truy cập vào nội dung được vì các thiết bị này đơn giản là bỏ qua những phần nó không hỗ trợ và điều đó giúp người dùng cũng tiếp cận được với nội dung của website chúng ta.

HTML là nền tảng vững chắc của web. Chúng ta đảm bảo rằng chúng được tách rời với CSS, Javascript thì chúng ta có thể chắc chắn rằng tất cả các trình duyệt trên hành tinh này có thể truy cập nội dung của website chúng ta.

Hỗ trợ SEO Tốt hơn

SEO – Chữ viết tắt của Search Engine Optimize – Tối ưu hóa tìm kiềm . Trình thu thập web , các robot của các ​​của Công cụ Tìm kiếm  (crawles web) sẽ tự động đánh chỉ mục cho các nội dung website. Do vậy, khi chúng ta tách rời, phần nội dung của website chúng ta rõ ràng hơn, điều này sẽ hỗ trợ các công cụ thực hiện đánh chỉ mục nhanh hơn, hiểu rõ nội dung của website chúng ta hơn. Do đó, SEO sẽ được tốt hơn.

Một Ví dụ được trình bày không tốt

Trong ví dụ này, tất cả HTML, CSS, Javascript được gom chung vào một file. Trông rất lộn xộn và phức tạp.

HTML

 Một Ví dụ được trình bày TỐT

Trong ví dụ này, các phần nội dung HTML, giao diện CSS và hành vi Javascript được tách bạch rõ ràng.

HTML

CSS
Javascript
Kết luận: Tôi sẽ trình bày kết luận bài học này thông qua video dưới đây.

Nhận xét của bạn

nhận xét

Tác giả songle

songle

Xem thêm

Chia sẻ kinh nghiệm học lập trình – Định hướng học lập trình

Chào các bạn, Có rất nhiều tìm đến trang myclass.vn để nhờ tư vấn về …

Trả lời