From 740d539e2fb78a237ec87144ca9061a9be1ce782 Mon Sep 17 00:00:00 2001 From: binhpt-1239 Date: Tue, 23 Jul 2024 16:19:13 +0700 Subject: [PATCH] Update coding standard html and css --- README.md | 1 + eng/html_css/standard.md | 62 ++++++++++++++++++++++---- vn/html_css/standard.md | 95 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 150 insertions(+), 8 deletions(-) create mode 100644 vn/html_css/standard.md diff --git a/README.md b/README.md index 90d6bbd..671d205 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,7 @@ - [Ruby](./vn/README.md#ruby) - [Ruby on Rails](./vn/README.md#ruby-on-rails) - [git](./vn/README.md#git) +- [HTML-CSS](./vn/html_css/standard.md) ### [English](./eng/README.md) diff --git a/eng/html_css/standard.md b/eng/html_css/standard.md index 7836141..4c555f9 100644 --- a/eng/html_css/standard.md +++ b/eng/html_css/standard.md @@ -1,7 +1,7 @@ -# Framgia HTML-CSS Coding Standard +# Sun* HTML-CSS Coding Standard ## Indentation -* Same as in PHP, please use 4 spaces for indentation. DO NOT USE HARD Tab. +* Indent by 2 spaces at a time. Don’t use tabs or mix tabs and spaces for indentation.. * Use lowercase for element names, attributes, attributes values (unless text/CDATA), CSS selectors, properties, property values. * Remove trailing white spaces. @@ -11,20 +11,53 @@ ```html Link to google ``` +* Multimedia Fallback, Provide alternative contents for multimedia. +```html + + + + +Spreadsheet screenshot. +``` +* Avoid unnecessary id attributes. +* Prefer class attributes for styling and data attributes for scripting. +* Where id attributes are strictly required, always include a hyphen in the value to ensure it does not match the JavaScript identifier syntax, e.g. use 'user-profile' rather than just 'profile' or 'userProfile'. +```html + +
+ + +
+ … +
+ … +
+``` ## CSS * Omit unit specification after “0” values ```css +flex: 0px; /* This flex-basis component requires a unit. */ +flex: 1 1 0px; /* Not ambiguous without the unit, but needed in IE11. */ margin: 0; padding: 0; ``` -* Omit leading “0”s in values. +* Leading 0, Always include leading “0”s in values. +* Put 0 in front of values or lengths between -1 and 1. ```css -font-size: .8em; +font-size: 0.8em; ``` * Separate words in ID and class names by a hyphen. ```css -#video-id {} +/* Not recommended: does not separate the words “demo” and “image” */ +.demoimage {} + +/* Not recommended: uses underscore instead of hyphen */ +.error_status {} + +/* Recommended */ +.video-id {} .ads-sample {} + ``` * Put declarations in alphabetical order. Ignore vendor-specific prefixes for sorting purposes. ```css @@ -40,10 +73,23 @@ text-indent: 2em; * Use a space between the last selector and the declaration block. Use a space after a property name’s colon. ```css -h3 { - font-weight: bold; +/* Not recommended: missing space */ +.video{ + margin-top: 1em; +} + +/* Not recommended: unnecessary line break */ +.video +{ + margin-top: 1em; +} + +/* Recommended */ +.video { + margin-top: 1em; } ``` ## References -* [Google HTML/CSS Style Guide](https://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml). +* [Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html). +* [B.E.M](https://getbem.com/introduction/) diff --git a/vn/html_css/standard.md b/vn/html_css/standard.md new file mode 100644 index 0000000..c1d6ea9 --- /dev/null +++ b/vn/html_css/standard.md @@ -0,0 +1,95 @@ +# Tiêu chuẩn viết mã Sun* HTML-CSS + +## Thụt lề +* Thụt lề 2 khoảng trắng cùng một lúc. +* Sử dụng chữ thường cho tên thành phần, thuộc tính, giá trị thuộc tính (trừ khi văn bản/CDATA), bộ chọn CSS, thuộc tính, giá trị thuộc tính. +* Loại bỏ khoảng trắng ở cuối. + +## HTML +* Sử dụng ```
```, thay vì ```
``` +* Khi trích dẫn thuộc tính, vui lòng sử dụng dấu ngoặc kép +```html +Liên kết tới google +``` +* Multimedia Fallback, Cung cấp nội dung thay thế cho đa phương tiện. +```html + + + + +Ảnh chụp màn hình bảng tính. +``` +* Tránh các thuộc tính id không cần thiết. +* Ưu tiên các thuộc tính class để tạo kiểu css và thuộc tính data cho dữ liệu. +* Trong trường hợp các thuộc tính id được yêu cầu bắt buộc, hãy luôn bao gồm dấu gạch nối trong giá trị để đảm bảo nó không trùng với cú pháp JavaScript, ví dụ: sử dụng 'user-profile' thay vì 'profile' hoặc 'userProfile'. +```html + +
+ + +
+ … +
+ … +
+``` +## CSS +* Bỏ qua thông số đơn vị sau giá trị “0” +```css +flex: 0px; /* Thành phần flex này yêu cầu một đơn vị. */ +flex: 1 1 0px; /* Không mơ hồ nếu không có đơn vị, nhưng cần thiết trong IE11. */ +margin: 0; +padding: 0; +``` +* Đặt số 0 trước các giá trị trong khoảng từ -1 đến 1. +```css +font-size: 0.8em; +``` +* Phân tách các từ trong tên ID và class bằng dấu gạch nối. +```css +/* Không khuyến khích: không tách rời 2 từ “demo” và “image” */ +.demoimage {} + +/* Không nên dùng: sử dụng dấu gạch dưới thay vì dấu gạch nối */ +.error_status {} + +/* Khuyến khích */ +.video-id {} +.ads-mẫu {} + +``` +* Sắp xếp thuộc tính css theo thứ tự bảng chữ cái. +* Bỏ qua các tiền tố css dành riêng cho nhà cung cấp trong phần sắp xếp. +```css +background: fuchsia; +border: 1px solid; +-moz-border-radius: 4px; +-webkit-border-radius: 4px; +border-radius: 4px; +color: black; +text-align: center; +text-indent: 2em; +``` +* Dùng khoảng trắng giữa tên và khối lệnh css. +Sử dụng khoảng trắng sau dấu hai chấm của tên thuộc tính. +```css +/* Không khuyến khích: thiếu khoảng trống */ +.video{ + margin-top: 1em; +} + +/* Không khuyến khích: ngắt dòng không cần thiết */ +.video +{ + margin-top: 1em; +} + +/* Khuyến khích */ +.video { + margin-top: 1em; +} +``` + +## Tài liệu tham chiếu +* [Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html) +* [Quy ước B.E.M](https://getbem.com/introduction/)