Trong ngành lập trình Web, HTML/CSS/JavaScript là những thứ cực kì căn bản. Muốn làm một Web developer, ít nhiều gì ta cũng phải học và thành thạo những thứ trên.

Tuy vậy, khi trò chuyện với một số bạn học và làm về web, mình thấy các bạn có một suy nghĩ chung là: JavaScript thì khó thật, còn CSS dễ òm hà! CSS chỉ cần đặt class, id, sau đó viết file CSS là xong thôi.

Nhiều bạn còn tự hào là mình tự học và thành thạo CSS trong vòng 1-2 tuần. CSS thật sự đơn giản và dễ học như vậy sao?

Hãy cố gắng đọc hết bài viết này, bạn sẽ tự nhìn lại bản thân và suy nghĩ lại nhé!

Thuở mới học web, mình cũng nghĩ HTML và CSS dễ òm hà! Thế nhưng, thuở bắt đầu làm việc với CSS trong dự án thật, bị thực tế vả cho sml, mình mới nhận ra hồi xưa mình ảo tưởng sức mạnh cỡ nào.

Vì vậy, chúng ta sẽ cùng tìm hiểu xem, đằng sau vẻ ngoài đơn giản, CSS có gì làm anh em chúng ta đau đầu nhé.

Chuyện layout từ xưa đến nay

CSS thường được dùng để style cho các element của HTML, tạo layout của trang web. Giả sử ta muốn tạo một trang web có layout như sau:

• Đầu trang có một header
• Nội dung nằm giữa, hai bên là 2 cột quảng cáo. Hai cột này phải cao bằng nội dung
• Trong HTML, cột #center phải nằm trước cột left (vì mục đích semantic + SEO)
• Dưới chân trang là footer

Giao diện trông đơn giản thế này nhưng khi dùng CSS để implement lại không hề đơn giản tẹo nào (Không tin các bạn thử code mà không dùng flexbox xem)! Nó được coi là “chén thánh” mà dân code CSS hằng truy cầu.

Để làm được những layout từ cơ bản tới phức tạp, ta phải nắm rõ các khái niệm và box-sizing, margin, padding, position, float, display (inline, inline-block, block).

Nghe thì đơn giản chứ không dễ ăn đâu nhé. Khi đi làm thật sự, đôi khi bạn sẽ vò đầu bức tai vì cái button lệch đi vài pixel, hay muốn các item nằm thẳng hàng mà không biết làm thế nào.

Đấy là chưa kể đến chuyện gần đây lại lòi ra 2 cách layout mới: flexbox và css-grid. Những cách layout này đi kèm với vô số thuộc tính mới, đòi hỏi chúng ta phải bỏ ra thời gian để học và nắm vứng

(Bật mí là dùng flexbox và css-grid thì làm cái giao diện “chén thánh” phía trên dễ òm nha).

Chuyện tooling

Khi mới học, chúng ta chỉ cần viết toàn CSS  vào một file, bỏ file CSS vào HTML và chạy là xong. Khi cần thư viện thì cứ copy thêm thư viện bỏ vào.

Cách này cũng khá là ok, hiện tại vẫn còn được sử dụng rất phổ biến. Tuy nhiên, trong các dự án lớn, ta thường phải setup những tooling sau:

• Tool để bundle (gom nhiều file CSS lại thành một) nhằm giảm số lượng kết nối tới server
• Tool để minimize CSS nhằm giảm dung lượng tải (Các bạn đọc bài phân tích tốc độ tải trang chóng mặt của TGDD nhé)
• CSS pre-processor như SASS, LESS, Stylus. Các pre-processor này cho phép ta viết CSS bằng cú pháp của các pro-processor đó, thêm các chức năng như biến/vòng lặp/ kế thừa, sau đó build ra CSS.

Đa phần những bạn mình hỏi đều không biết, hoặc biết nhưng chưa từng dùng những tooling này. Nếu bạn chưa biết thì hãy cố gắng tìm hiểu nhé!

Chuyện tổ chức file và naming convention

Viết CSS cho dự án nhỏ là chuyện đơn giản. Viết CSS cho một dự án lớn, nhiều thành viên lại là chuyện hoàn toàn khác!

Ở các dự án nhỏ, gom hết CSS vào một file để viết là được. Tuy nhiên, khi vào các dự án lớn gồm vài chục màn hình, vài trăm element và component.

Lúc này, nếu nhiều thành viên cũng sửa 1 file CSS, ta sẽ dễ gặp trình trạng file bị conflict. File cũng sẽ phình lên nhanh chóng đến 2-3000 dòng, một cơn ác mộng khi phải bảo trì code.

 

Thế nên, ta phải tách CSS ra làm nhiều file. Mỗi thành viên khi cần chỉ sửa một file nhỏ.

Khi dự án lớn hơn nữa, chúng ta lại gặp phải vấn đề khác. Đôi khi, chúng ta lỡ tạo ra class, element trùng tên, trùng id (button, banner, header).

Do CSS không có namespace như các ngôn ngữ lập trình khác, khi thấy các style có class hoặc ID trùng tên nhau, browser sẽ apply style sau đè lên style trước đó. Vì vậy, đôi khi bạn chỉ sửa 1 style nho nhỏ, nhưng lại làm … bể CSS toàn bộ trang web.

Ngoài ra, khi làm việc nhóm, mỗi người viết CSS một kiểu sẽ rất khó bảo trì. Do vậy, người ta thường tuân theo một quy tắc chung để đặt tên cho CSS style, gọi code convention.

Hiện tại, code convention phổ biến nhất của CSS là BEM (Block__Element–Modifier) và SMACSS. Các bạn có thể tự tìm hiểu nhé!

Kết

Bài viết cũng khá dài rồi nên mình tạm ngưng ở đây. Bài viết còn chưa đề cập đến những thứ “khó nhằn” khác của CSS như: animation, responsive, … Gần đây giới front-end lại có trào lưu dùng CSS-in-JS, lại có thứ để cho chúng ta học và sử dụng.

Nếu bạn không biết, hoặc chưa nắm vững những thứ mình nhắc đến trong bài này thì cũng đừng lo! Hồi xưa mình cũng không biết tụi nó tồn tại, cho tới khi mình bắt đầu đi làm. Do vậy, cứ vừa làm vừa học dần là được thôi.

Còn một lời khuyên nho nhỏ cho các bạn này! Đôi khi, do đã quá quen với việc ăn sẵn dùng framework (Boostrap, SemanticUI), ta có thể tạo ra giao diện tạm ổn, nhưng lại không hiểu bản chất CSS đằng sau như thế nào cả.

Do vậy, các bạn hãy thử ít dùng framework lại, và sử dụng CSS thuần. Tự viết CSS thay vì dùng class có sẵn sẽ giúp bạn luyện và học thêm nhiều về CSS đấy!

Tìm hiểu thêm

• https://medium.com/actualize-network/modern-css-explained-for-dinosaurs-5226febe3525
• https://css-tricks.com/bem-101
• https://medium.freecodecamp.org/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849