Ưu điểm external style sheets

Liệt kê những ưu điểm và nhược điểm của External Style Sheets?

Biết được cả những ưu điểm và nhược điểm của ngôn ngữ lập trình trong các câu hỏi phỏng vấn CSS là rất quan trọng đối với một người học CSS. Điều đó cho thấy bạn có kiến ​​thức chuyên sâu khi học CSS.

Giải thích khái niệm "specificity" trong CSS?

Bản thân khái niệm đơn giản có nghĩa là các quy tắc CSS nhất định thay thế (ghi đè) các quy tắc khác bằng cách cụ thể hơn. Đây là một khái niệm khó vì có thể gây ra một số vấn đề sau này - sử dụng quá nhiều loại quy tắc có tính đặc trưng cao có thể gây khó khăn khi thấy cần thay đổi điều gì đó sau khi hoàn thành công việc.

Có ba cấp độ của specificity (độ đặc trưng) cần biết trong các câu hỏi phỏng vấn CSS - type (loại), class (lớp) và ID (identification). Bộ chọn type có độ đặc trưng thấp nhất, trong khi ID loại là cao nhất.

Giải thích phông chữ "web-safe" và "fallback"?

Khi cố gắng chọn phông chữ cho trang web của mình, bạn nên nhớ rằng không phải mọi trình duyệt web đều có thể nhận diện được tất cả các loại phông chữ khác nhau - đây là nơi phông chữ web-safe được lựa chọn sử dụng. Những phông chữ này được sử dụng phổ biến và tốt nhất. những loại được biết đến như Times New Roman, Arial hoặc Calibri. Nếu vì một lý do nào đó, trình duyệt web của bạn không nhận ra các phông chữ này (mặc dù không phải vậy) thì đã có các phông chữ fallback - đây là các phông chữ mà trình duyệt sẽ tự động chọn.

Các loại phông chữ có thể là một trong số câu hỏi phỏng vấn CSS phổ biến hơn, vì vậy hãy ghi nhớ chúng thật tốt.

File splitting trong CSS là gì?

File splitting (Chia tách tệp) cho phép chia các tệp lớn thành các tệp nhỏ hơn nhằm mục đích giúp chương trình chạy nhanh hơn và mượt mà hơn. Để có thể phân chia các tệp, bạn sẽ cần một bộ tiền xử lý CSS.

Các tập tin có thể được chia theo bất kỳ cách nào bạn muốn, nhưng nên giữ gọn gàng và phân chia có logic. Điều này sẽ giúp quản lý trang web nhanh hơn mà không cần phải chờ các tải các trang định dạng thừa.

Định nghĩa "rule set" trong CSS là gì?

Điều quan trọng cần biết trong các câu hỏi phỏng vấn CSS đó là rule sets. Những bộ quy tắc (rule sets) được tạo từ các khối khai báo tuân theo các bộ chọn cụ thể. Các bộ quy tắc này cho máy chủ biết một tài liệu nhất định có hình thức như thế nào.

Tại sao sử dụng import trên đầu tập tin?

import được sử dụng phổ biến nhất ở đầu tập tin vì việc ghi đè các bộ quy tắc đã tồn tại là một nỗi lo lớn. Bằng cách đặt import lên hàng đầu sẽ thường tránh được vấn đề này.

CSS Sprites là gì?

CSS Sprites hay còn có một cái tên cún cơm khác là “CSS Image Sprites”, nó là một phương thức dùng để gộp nhiều ảnh nền cần sử dụng vào một file hình duy nhất và thường sử dụng thuộc tính background-position để xác định vị trí thành phần ảnh nền cần sử dụng.

Một trang web có thể chứa từ vài chục thậm chí vài trăm bức ảnh, trong số đó thì sẽ có chứa một số lượng lớn các bức ảnh có kích thước nhỏ như icons, logo hay social buttons … Và hãy tưởng tượng nếu các anh em có một webpage có hơn 100 icons độc lập và vô số hình ảnh đại diện cho bài viết, sau khi trình duyệt load xong mã HTML, nó sẽ gửi đi vô vàng request đến server để lấy các bức ảnh này. Để giải quyết vấn đề trên ta chỉ cần gộp tất cả các icons thành một file ảnh duy nhất và gửi 1 request đến server khi cần và sử dụng kỹ thuật CSS Sprites để làm được việc này.

Normallizing trong CSS là gì?

Bạn học HTML thì chắc cũng thừa biết là mặc định trình duyệt đã tự mặc định hiển thị một số thẻ HTML thành một đoạn văn bản đã được markup đầy đủ, ngoài ra thì nó cũng mặc định thêm một số quy tắc trên trang tài liệu web HTML như có chứa padding, margin,…và một cái quan trọng là mỗi loại trình duyệt đều có những quy tắc riêng nên việc hiển thị mặc định sẽ không giống nhau.

Do vậy khi viết CSS cho website, bạn nên đưa tất cả các giá trị của các phần tử trên website về bằng 0 hết và xóa một số định dạng có sẵn để khi cần chúng ta sẽ dùng CSS viết lại theo ý của mình để đảm bảo nó hiển thị tốt trên tất cả các trình duyệt. Việc làm này người ta gọi là Reset CSS.

Reset CSS như thế nào?

Nếu bạn muốn tự reset CSS đơn giản nhất thì hãy viết đoạn sau vào tập tin CSS là có thể đưa toàn bộ giá trị liên quan tới Box Model về 0.

* { padding: 0; margin: 0; border: none; }

Nhưng như vậy có vẻ không tối ưu cho lắm, thay vì reset CSS như vậy thì chúng ta sẽ dùng các bộ Reset CSS có sẵn mà nhiều designer/developer chuyên nghiệp thường sử dụng.

Một số bộ Reset CSS thông dụng

Bạn có thể sử dụng các bộ reset CSS thông dụng dưới đây để tiết kiệm thời gian và tối ưu hơn. Cách sử dụng là copy code bỏ vào đầu file CSS của bạn.

• normalize.css: Đây là bộ reset CSS thông dụng nhất hiện tại, phù hợp với cả HTML5 và CSS3. Đặc điểm của bộ này là sẽ điều chỉnh các phần tử trong website hiển thị phù hợp với tất cả các trình duyệt thông dụng, xóa bỏ toàn bộ margin và padding mặc định, có sẵn style cho các thẻ khá có ích như _{, ^{, ,...}}

• Reset CSS 2.0 by Eric Meyer: Nếu bạn cần một đoạn reset CSS đưa toàn bộ các phần tử website về “thời đồ đá”, không có bất cứ một định dạng gì thì có thể sử dụng bộ này. Bộ reset CSS này thích hợp cho những ai muốn tự mình viết lại CSS cho toàn bộ các thành phần trong website, kể cả việc thiết lập kích thước chữ cho các thẻ tiêu đề.

CSS preprocessors là gì?

CSS Preprocessors được Việt hóa bằng một cái tên rất hoành tráng: “ngôn ngữ tiền xử lý CSS”. Đây là một ngôn ngữ kịch bản mở rộng của CSS và được biên dịch thành cú pháp CSS giúp bạn viết CSS nhanh hơn và có cấu trúc rõ ràng hơn. Nó có nhiệm vụ giúp bạn logic hóa và cấu trúc các đoạn mã CSS để cho CSS tiến đến gần hơn với một ngôn ngữ lập trình.

Hiểu đơn giản CSS preprocessors là một ngôn ngữ kịch bản mở rộng của CSS. Nó cho phép developer viết mã từ một ngôn ngữ nào đó, ngôn ngữ đó ở đây chính là SASS/SCSS, LESS hay một ngôn ngữ tương tự, sau đó biên dịch nó thành CSS.

Sự lợi hại của CSS preprocessors được mình tổng hợp như sau:

• Tiết kiệm thời gian viết code: Với các quy tắc mở rộng, CSS preprocessors giúp bạn có thể tái cấu trúc lại mã nguồn CSS một cách logic và rõ ràng. Từ đó tránh được việc viết đi viết lại một đoạn code, tiết kiệm thời gian viết code, tăng năng suất và nhanh chóng hoàn thành sản phẩm.
• Dễ dàng bảo trì và phát triển CSS: Xã hội không ngừng đổi mới và website cũng không ngừng phát triển. Nhưng nếu bạn cứ thêm CSS vào khi cần thì về lâu dài rất khó quản lý tập tin CSS và gây khó khăn khi bạn cần thiết kế lại website hay nâng cấp nó. Vì sẽ có nhiều đoạn CSS bị trùng hoặc không được sắp xếp đúng cách. Các CSS preprocessors giúp bạn tạo ra các biến trong CSS và sử dụng nhanh chóng. Ngoài ra nó cũng giúp bạn dễ dàng viết CSS cho nhóm vùng chọn tốt hơn, dễ dàng bảo trì về sau cũng như dễ dàng viết CSS thêm cho các phần tử khác có cùng đối tượng.
• Các tập tin CSS được tổ chức một cách rõ ràng: Để thuận tiện cho việc quản lý và phát triển file CSS về sau, bạn cần phải xây dựng được một cấu trúc khoa học, rõ ràng và dễ truy vấn. Bạn có thể chia nhỏ thành nhiều file CSS khác nhau ứng với mỗi công dụng của nó. Ví dụ file button.scss sẽ chứa code CSS cho thành phần button, block.scss sẽ chứa code CSS cho thành phần là các khối block, ... Việc chia nhỏ ra các file như vậy giúp code được phân tách rõ ràng cho từng phần, sau này khi ta muốn sửa chữa, thay đổi hay viết thêm CSS thì điều đó trở nên đơn giản hơn rất nhiều thay vì viết tập trung hết code vào chung một file CSS.