Trang chủ

Hé lô mọi người, đợt trước mình chia sẻ 1 bài vềAtomic CSS, có một số anh em vẫn chưa có sự tin tưởng với cách viết Atomic. Phần lớn là"Nếu viết hàng loạt class trong cùng 1 element vậy thì khác nào viết inline style đâu... tại sao không viết css inline cho nhanh?".

Trước đây khi mới xem qua thằng Atomic, mình cũng có suy nghĩ tương tự như vậy. Sau khi làm qua một vài ví dụ mình thấy sự khác nhau cho ở thắc mắc trên. Ở bài viết này mình sẽ chia sẻ sự khác nhau giữa khái niệm CSS Inline và Functional CSS (thường được gọi là Utility-first CSS hayAtomic CSS

Đang ngồi nghĩ cách đặt tên,
Có thằng em đến kêu "ngừng dùng BEM"...

Trong các dự án markup HTML mà mình đang support, ngoại những án React dùngstyled component thì 96,69% thống nhất xây dựng theo kiểu BEMBlock__Element--Modifier - một dạng tổ chức CSS theo kiểu OOCSS tuyệt vời mà mình từng biết. Nhưng trong vòng 1 năm trở lại đây, khái niệm Atomic được léo nhéo bên tai, nó là cái khỉ gì mà giang hồ đồn dữ vậy.

1. Tổng quan Atomic CSS là gì?

Thông thường, khi dùng Bootstrap, Foundation hoặc code CSS truyền thống, trường hợp phải selector đến nhiều cấp là tất nhiên, rồi đau đầu nghĩ đến cách đặt tên biến sao cho ngữ nghĩa... thật là một thảm hoạ.

Chào mọi người, lần này mình xin nối tiếp chủ đề"vở sạch chữ đẹp" như những tiết học trước. Bài viết lần này mình xin chia sẻ vài kinh nghiệm viết code React mà mình đã đúc kết qua một vài dự án.

Cách tổ chức component

Cách đặt tên component và kiểu file

Tên component nên đặt theo chuẩn PascalCaseHeader.jsx

Tên component cần đề cập đúng mục đích của nó, phải rõ ràng và duy nhất trong ứng dụng, để dễ tìm thấy hơn và tránh những nhầm lẫn có thể xảy ra.s

Ởbài trước, mình đã chia sẻ với các bạn một số tips để coding"vở sạch chữ đẹp". Để tiếp nối cho phần chia sẻ trước, hôm nay mình xin chia sẻ cách để tổ chức source và coding SASS tối ưu thời gian đồng thời giúp cho mình "Best Practices" hơn.

Quy hoạch thế nào để dễ quản lý

Đây là một dạng cấu trúc folder SASS của mình trong mỗi dự án. Bạn cũng có thể tham khảo

Trong mỗi dự án, Frontend Dev có vai trò như lính đánh thuê, cũng giống như người ta thường nói "làm dâu trăm họ". Để hài lòng với mọi gia đình đặc biệt là những "bà mẹ chồng khó tính", chị em chúng ta cần học theo kinh nghiệm đúc kết từ những bậc tiền bối.

Thông thường convention mà các lập trình viên lấy làm chuẩn sẽ là 2 hoặc 4 space tùy theo ngôn ngữ hoặc rules dự án. Bạn có thể tham khảocode style PSR-2.

Khi code bạn thường dùng gì để thụt đầu dòng (indent)?

Có người thích dùng tab, người khác lại dùng 2 hoặc 4 dấu space để thụt dòng. Bên cạnh việc không thống nhất là bao nhiêu space còn có sự tranh cãi giữa dùng tab và dùng space. Vì sao lại xảy ra tình trạng tranh cãi, ai thích dùng gì thì dùng chứ. Đó là vì có ý kiến cho rằng gõ 2 dấu cách mới là code chuẩn, còn dùng tab thì không. Nên dùng 2 spaces hay dùng tab?

React router là gì?

React Router là một thư viện định tuyến (routing) tiêu chuẩn trong React. Hiện nay phiên bản release là React Router v4. Nó giữ cho giao diện đồng bộ với URL trên trình duyệt. React Router giúp bạn định nghĩa ra các URL động, và lựa chọn Component phù hợp để hiển thị trên trình duyệt người dùng ứng với từng URL. Nó tương đương với sự khẳng định, nếu bạn có URL này, nó sẽ tương đương với Route này thì giao diện sẽ thế này!

Ví dụ bạn có URLlocalhost:3000/contact thì website sẽ chuyển đến trang "Liên hệ". Nhưng với React, website của bạn là 1 SPA (Single-Page Applications) nên nó vẫn giữ nguyên website (thực ra là 1 app), còn nội dung của trang Liên hệ (đây là 1 component) được hiện ra mà không load hoàn toàn lại trạng.

React Hooks là gì

React Hooks là một tính năng mới được chính thức release trong bản React 16.8.

Như chúng ta đã biết thì trong React có 2 loại component trong React là Stateless và Stateful. Với React Hooks nó cho phép một function component có thể sử dụng state, sử dụng các lifecycle method, context và nhiều thứ khác... Khắc phục những vấn đề "wrapper hell" - các component lồng nhau phức tạp, component dài dòng, bỏ đi mấy cái this màu mè.