Bạn tưởng CSS đơn giản và dễ học? Bạn sẽ nghĩ lại sau khi đọc bài viết này!

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: flexboxcss-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 flexboxcss-grid thì làm cái giao diện “chén thánh” phía trên dễ òm nha).

Chưa kịp học hết CSS mà đã ra flex-box với css-grid

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.

Frustrated Programming GIF - Find & Share on GIPHY

 

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.

Ví dụ điển hình cho chuyện … bể CSS

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!

Thử hạn chế dùng framework, viết CSS nhiều cho lên trình nha

Tìm hiểu thêm

Advertisements

6 thoughts on “Bạn tưởng CSS đơn giản và dễ học? Bạn sẽ nghĩ lại sau khi đọc bài viết này!”

  1. tks anh, bài viết rất bổ ích ạ. à mà hình như cái chuyện accessing css từ js có phải là ba cái thằng o function, f function với c function ko anh nhỉ? 😀

    Like

  2. E làm dev web 2 năm nay, chưa bao giờ e coi CSS là đơn giản, là dễ học, nó cực kỳ gây ức chế và đau đầu, e thề e mà gặp thằng nào nói html/css dễ òm à, là e tát thẳng cho sml chứ ở đó mà dễ 😥

    Liked by 3 people

  3. Cảm ơn Anh đã chia sẻ bài viết hữu ích. Thật sự đôi khi học những thứ cao xa người ta sẽ quên đi những cái từng là cơ bản, không xem trọng nó. Nhưng thật sự muốn học cao, học xa thì vẫn phải học căn bản, học học cho vững, học cho chắc thì mới là nền tảng tốt.

    Like

  4. Đúng thật là khi rờ đến animation và responsive mới thấy CSS mới là thứ khó nhằn nhất 😦

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s