Smartors

Thế nào là code đẹp?

Mặc dù là dân thiết kế, nhưng cái máu kĩ thuật nó đã ngấm vào tôi từ bé, chính vì thế nên tôi khá chú trọng đến sự mạch lạc, khoa học trong mỗi việc mình làm. Bởi việc trình bày mạch lạc và khoa học không những giúp cho bạn dễ hiểu hơn mỗi khi tiếp cận lại với công việc của mình, nó còn có rất nhiều lợi ích: giúp cho những người làm cùng bạn hiểu rõ hơn để từ đó tiếp tục hay phát triển, giúp cho những người đánh giá, giám sát nhìn thấy thành quả lao động của bạn, và giúp cho chính bạn được đánh giá cao hơn khi được người ngoài nhìn vào, vân vân và vân vê…

Không phải tự nhiên mà slogan của WordPress.Org lại là “Code is Poetry” (Code là Thơ ca). Sau khi tìm hiểu về code của WordPress tôi mới thực sự hiểu điều này và cảm phục những người viết nên nó. Đó cũng chính là lý do vì sao tôi “iêu” WordPress đến vậy.

Xin giới thiệu với các bạn file sau đây để có thể hiểu rõ hơn thế nào là code đẹp 🙂

Beautiful Code

Click vào để xem full

Vì HTML (hay bạn dùng THTML hay wateverPHP để hiện thị PHP đi chăng nữa) thì thành quả hiện ra khi View Source vẫn sẽ phải chứa nội dung (content) một cách chặt chẽ – điều này có lợi ích rất lớn cho việc SEO (Search Engine Optimization). Chính vì thế chúng ta nên chứa code một cách tối thiểu, tức càng ít code càng tốt, và càng nhiều nội dung càng good:

– Sử dụng <link> trong <header> để link tới các JS và CSS ở ngoài, không dùng JS hay CSS code trong Source.

– Sử dụng class cho các style, không dùng inline style.

– Những thẻ không cần thiết như <br /> hay dấu trống như  … thì bỏ đi, mặc định cái thằng <p> nó đã biết xuống dòng rồi.

– Không dùng <table> để dàn layout, <table> là để dùng cho các bảng có số liệu (như excel ý).

– Những phần code riêng biệt nên để riêng ra trong 1 div: header thì cho vào #header, footer thì cho vào #footer.

– Đặt tên các div, class cho đúng và chặt chẽ. Project của riêng cty mình làm thì đặt TV cũng được, ví dụ #dau, #than, #dit, .gachdit, .dam, .nhat (hehe đùa tí thôi :P) Google khi tìm kiếm ở Source sẽ biết ở đâu id=”header” hay id=”footer” và chú trọng vào fần content hay main nhiều hơn.

– Indent (tức lùi dòng code con vào trong code mẹ) cho đúng và rõ ràng, giúp người sau dễ làm tiếp và phát triển.

– Còn khá nhiều, anh em nhìn vào file trên thì biết, mà file trên chắc cũng chưa nói hết được, tự học trao đổi với nhau là tốt nhất.

Chỉ có tí ti kiến thức về HTML, nhưng làm web design không có nghĩa là không cần quan tâm gì đến code. Bản thân những dòng code khô khan nó cũng có cách design riêng, đó là code sao cho đẹp, cho sạch sẽ, gọn gàng, dễ hiểu, như thơ cũng phải có khổ, có dòng…

Hôm nay nhân dịp giờ nghỉ trưa bạo mồm nói linh tinh, chia sẻ chút hiểu biết về code, có gì mong các đại ca coder & programmer bỏ qua cho nhé 😛 hehehe. Bây giờ phải Kebab thôi ko thì chết đói mất (Ko thể nào thanh tịnh cho được!)

“Code is Poetry. And Design is not only Design”
Tản mạn về code & design – November 07 – D7

 


PS. Mong anh em lên blog post bài ủng hộ cho blog của cty nó xôm tụ tí 😀 Mong rằng blog của chúng ta càng ngày càng chất lượng như những Project chúng ta đã, đang và sẽ làm 🙂

2 thoughts on “Thế nào là code đẹp?

  1. wiliam

    Để viết code gọn gàng rành mạch cần phải có một quá trình luyện tập. Không chỉ với css mà bất cứ code cái gì cũng vậy. Để code càng ngày càng đẹp thì ta có thể học hỏi và rèn luyện bằng cách:
    1. Đọc sách viết về code rõ ràng rành mạch như cuốn: clean code… đọc xong trình code tăng lên 5-6 bậc, code các lớp trừu tượng trở nên đơn giản hơn
    2. Học hỏi từ những người xung quanh… các cao nhân code sẽ có tư duy code khác thường, hãy học cái cách mà họ làm ra code sẽ giúp bạn code tốt hơn

    Các bạn có thể tham khảo thêm tại bài viết này: http://codetinhgon.com/2016/12/07/lam-sao-de-code-dep/

Leave a Reply