Merge pull request #110 from binhpt-1239/add_coding_convention_html_css

Add coding convention for HTML/CSS

FrontEnd/HtmlCss.md

@@ -35,3 +35,6 @@ Vào cuối phần này, sinh viên sẽ có thể:
 Sử dụng quy tắc đặt tên class: 
 - http://getbem.com/introduction/
 - https://goo.gl/BM7D8V
+
+Sử dụng quy tắc code:
+- [HTML-CSS](./coding_convention/HtmlCss_vi.md)

FrontEnd/HtmlCss_en.md

@@ -35,3 +35,6 @@ At the end of this section, students will be able to:
 Use class naming rules: 
 - http://getbem.com/introduction/
 - https://goo.gl/BM7D8V
+
+Coding convention:
+- [HTML-CSS](./coding_convention/HtmlCss_en.md)

FrontEnd/coding_convention/HtmlCss_en.md

@@ -0,0 +1,95 @@
+# Sun* HTML-CSS Coding Standard
+
+## Indentation
+* 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.
+
+## HTML
+* Use ```<br>```, not ```<br />```
+* When quoting attributes, please use double quotation marks
+```html
+<a href="google.com" class="info">Link to google</a>
+```
+* Multimedia Fallback, Provide alternative contents for multimedia.
+```html
+<!-- Not recommended -->
+<img src="spreadsheet.png">
+
+<!-- Recommended -->
+<img src="spreadsheet.png" alt="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
+<!-- Not recommended: `window.userProfile` will resolve to reference the <div> node -->
+<div id="userProfile"></div>
+
+<!-- Recommended: `id` attribute is required and its value includes a hyphen -->
+<div aria-describedby="user-profile">
+  …
+  <div id="user-profile"></div>
+  …
+</div>
+```
+## 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;
+```
+* Leading 0, Always include leading “0”s in values.
+* Put 0 in front of values or lengths between -1 and 1.
+```css
+font-size: 0.8em;
+```
+* Separate words in ID and class names by a hyphen.
+```css
+/* 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
+background: fuchsia;
+border: 1px solid;
+-moz-border-radius: 4px;
+-webkit-border-radius: 4px;
+border-radius: 4px;
+color: black;
+text-align: center;
+text-indent: 2em;
+```
+* Use a space between the last selector and the declaration block.
+Use a space after a property name’s colon.
+```css
+/* 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.github.io/styleguide/htmlcssguide.html).
+* [B.E.M](https://getbem.com/introduction/)

FrontEnd/coding_convention/HtmlCss_vi.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 ```<br>```, thay vì ```<br />```
+* Khi trích dẫn thuộc tính, vui lòng sử dụng dấu ngoặc kép
+```html
+<a href="google.com" class="info">Liên kết tới google</a>
+```
+* Multimedia Fallback, Cung cấp nội dung thay thế cho đa phương tiện.
+```html
+<!-- Không nên dùng -->
+<img src="Lansheet.png">
+
+<!-- Được đề xuất -->
+<img src="Spreadsheet.png" alt="Ả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
+<!-- Không nên: `window.userProfile` sẽ thực thi để tham chiếu đến <div> -->
+<div id="userProfile"></div>
+
+<!-- Khuyến nghị: thuộc tính `id` là bắt buộc và giá trị của nó bao gồm dấu gạch nối -->
+<div aria-describeby="user-profile">
+ …
+ <div id="user-profile"></div>
+ …
+</div>
+```
+## 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/)