MyClass.vn – Bài viết lập trình cybersoft.edu.vn – Đào tạo chuyên gia lập trình
Related Articles
HTML
1. Cú pháp
Nên sử dụng Tab ngắn (2 khoảng trắng), điều này sẽ giúp code giống nhau trên mọi môi trường
2. Doctype !
Nên khai báo doctype để bắt đầu với một môi trường tiêu chuẩn & phù hợp với mọi trình duyệt
<!DOCTYPE html>
<html>
<head>
</head>
</html>3. Chèn CSS và JavaScript
Trong HTML5, không cần thiết phải khai báo kiểu (type) cho CSS và JavaScript như text/css & text/javascript vì nó đã được xác định là mặc định.
4. Giảm thải code thừa
Việc sử dụng các thẻ cha dư thừa, không có tác dụng trong việc viết CSS thì nên tránh.
5. Thứ tự thuộc tính
Các thuộc tính của HTML nên được sắp xếp theo thứ tự để việc đọc code dễ dàng hơn.
classid,namedata-*src,for,type,href,valuetitle,altrole,aria-*
Các class được tái sử dụng nhiều vì vậy nó nằm đầu tiên. Các id cụ thể hơn và nên sử dụng hợp lí, nên nằm ở thứ hai.
<a class="..." id="..." data-toggle="modal" href="#">
Example link
</a>
<input class="form-control" type="text">
<img src="..." alt="...">6. Thuộc tính đúng sai (Boolean)
Thuộc tính này sẽ không cần khai báo giá trị, nếu xuất hiện đồng nghĩa với giá trị true và không xuất hiện đồng nghĩa là false.
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>CSS
1. Cú pháp
Sử dụng tab ngắn (2 khoảng trắng) để đảm bảo code được dịch giống nhau trong mọi môi trường
Khi nhóm các bộ chọn (selectors) hãy giữ mỗi bộ chọn nằm trên 1 dòng
Thêm 1 khoảng trắng trước 1 khối của thuộc tính để dễ đọc
Đặt dấu ngoặc nhọn của 1 khối thuộc tính ở 1 dòng mới
Thêm khoảng trắng phía sau dấu : của mỗi thuộc tính
Với mỗi định nghĩa, việc nằm trên 1 dòng sẽ cho báo lỗi chĩnh xác hơn
Không thêm dấu khoảng trắng vào phía sau dấu phẩy trong các giá trị của RGB, RGBA….
Tránh thêm đơn vị cho các giá trị bằng 0
/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
padding:15px;
margin:0px 0px 15px;
background-color:rgba(0, 0, 0, 0.5);
box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
2. Thứ tự khai báo
Những thuộc tính có đặc tính giống nhau nên được sắp xếp theo thứ tự sau:
– Định nghĩa bị trí (Positioning)
– Kiểu hình khối (Box model)
– Kiểu ký tự (Typographic)
– Hình ảnh (Visual)
Việc này giúp chúng ta tìm code nhanh hơn, hơn nữa việc ghi nhận giá trị từ trên xuống dưới cũng sẽ có tác dụng khi bạn biết sắp xếp code CSS của mình.
Định vị trí đầu tiên vì nó có thể loại bỏ phần tử trong 1 layout.
Kiểu hình khối được định nghĩa tiếp để có thể xác định kích thước của mỗi thành phần.
….Việc này giống như bạn đặt các CSS theo hướng tổng quan đến chi tiết của 1 elements.
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}3. Không sử dụng @import
So với các
, @import sẽ chậm hơn, nó cần nhiều yêu cầu từ trang hơn và không dự tính được các lỗi xảy ra. Hãy dùng các cách sau để thay thế @import
– Sử dụng nhiều
– Sử dụng các trình biên dịch như SASS/LESS để biên dịch toàn bộ CSS vào 1 file duy nhất.
4. Vị trí đặt các Media query
Việc đặt các media query nên để bên cạnh các bộ chọn gần nhất có thể. Không lên chỉ viết media query 1 lần rồi cho tất cả các bộ chọn có sự thay đổi ở các thiết bị vào cùng 1 media query.
Nên sử dụng Sass, sau đó gọi các mixin media query và đặt các media query ngay bên trong các bộ chọn, sử dụng cú pháp lồng
Tham khảo:
/* sử dụng tương tự */
.cd-trigger {
@include MQ(L) {
// Viết style tại đây
}
@include MQ(XL) {
/// Viết style tại đây
}
}5. Thuộc tính tiền tố
Khi sử dụng các thuộc tính tiền tố (Prefixed properties), hãy thụt đầu dòng vào dể các giá trị có thể thẳng hàng với nhau giúp dễ dàng để thay đổi giá trị.
/* Prefixed properties */
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}6. Khai báo CSS đơn
Trong trường hợp chỉ có 1 định nghĩa CSS, hãy loại bỏ những ngắt dòng để có thể dễ chỉnh sửa hơn. Bất kì CSS nào sử dụng nhiều định nghĩa đều phải cho xuống dòng.
Đây là một trong yếu tố quan trọng để phát hiện ra lỗi, ví dụ khi có báo lõi ở dòng 120 nếu chỉ có 1 định nghĩa bạn sẽ xác nhận được ngay lỗi ở đó.
/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }
/* Multiple declarations, one per line */
.sprite {
display: inline-block;
width: 16px;
height: 15px;
background-image: url(../img/sprite.png);
}
.icon { background-position: 0 0; }
.icon-home { background-position: 0 -20px; }
.icon-account { background-position: 0 -40px; }7. Ký hiệu viết tắt
Hãy hạn chế các kí hiệu viết tắt, thay vào đó hãy định nghĩa rõ ràng các giá trị. Các thuộc tính viết tắt thường được sử dụng nhiều bao gồm:
paddingmarginfontbackgroundborderborder-radius
Thông thường bạn không cần phải điền hết các thuộc tính của định nghĩa viết tắt. Ví dụ : HTML heading chỉ cần setting cho top và bottom margin, đến lúc cần, chỉ cần viết lại 2 thuộc tính đó. Sử dụng đinh nghĩa viết tắt quá nhiều sẽ dẫn dến các định nghĩa bị lặp lại quá nhiều và xảy ra lỗi ngoài ý muốn.
/* Bad example */
.element {
margin: 0 0 10px;
background: red;
background: url("image.jpg");
border-radius: 3px 3px 0 0;
}
/* Good example */
.element {
margin-bottom: 10px;
background-color: red;
background-image: url("image.jpg");
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}8. Ghi chú – comment
Code được viết và duy trì giữa nhiều người. Vì vậy hãy đảm bảo rằng các mô tả, ghi chú của bạn người khác cũng có thể đọc được. Một ghi chú code tốt là một ghi chú có bối cảnh và mục đích. Không nên ghi chú đơn giản bằng một phần đại diện hoặc tên lớp.
Hãy đảm bảo rằng các ghi chú là một câu cú hoàn chỉnh, cũng như sử dụng các cụm từ ngắn gọn dễ hiểu cho các ghi chú chung.
/* Bad example */
/* Modal header */
.modal-header {
...
}
/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
...
}
9. Cơ cấu tổ chức
- Phân vùng code thành các phần riêng biệt.
- Xây dựng cấu trúc chú thích hợp lý và thống nhất
- Sử dụng nhiều khoảng trống lớn để phân cách cho những phần code lớn để có thể dễ dàng tìm kiếm khi làm việc với một file lớn.
- Khi sử dụng nhiều file CSS, hãy phân vùng chúng theo từng thành phần thay vì phân theo các trang. Vì các trang có thể thay đổi thành phần và các thành phần cũng có thể di chuyển theo yêu cầu.
/*
* Component section heading
*/
.element { ... }
/*
* Component section heading
*
* Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
*/
.element { ... }
/* Contextual sub-component or modifer */
.element-heading { ... }———
Còn rất rất nhiều các tiêu chuẩn và phương pháp viết HTML & CSS để chúng ta code tốt hơn, dễ bảo trì và tối ưu hơn. Mình sẽ tiếp tục tìm hiểu và viết lại để chúng ta cùng nhau học hỏi.
Cảm ơn các bạn.
Nguồn: Phan Trọng Biên
Đề tìm nơi học Front-End bài bản, có lộ trình, có định hướng nghề nghiệp và được giới thiệu việc làm, các bạn hãy tham khảo khóa học này nhé tại CyberSoft Academy.
