HTML & CSS Workmanship Manual

Hôm nay mình muốn chia sẻ một bài viết rất hay của NASA về việc sử dụng HMTL & CSS trong việc viết mã Front End. Để làm được không khó, nhưng đi sâu để hiểu và viết mã một cách đáng tin cậy thì còn có rất nhiều điều thú vị...

 

HTML

1. ELEMENTS

  • Add closing tags to elements that aren't self-closing.
  • Don't add the forward slash for self-closing elements.
  • Avoid unnecessary markup, such as surrounding a block element in a <div>.
  • Use lowercase, not uppercase.
Code:
<!--Do this-->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<input type="text">

<!--Not this-->
<DIV>
  <UL>
    <LI>Item 1
    <LI>Item 2
  </UL>
</DIV>
<INPUT type="text" />

 

Resoning:
  1. There's less of a chance of error because of an unclosed tag.
  2. The forward slash is no longer needed according to the spec.
  3. Concise markup requires more thought and planning, but pays off in performance and maintainability.

 

2. ATTRIBUTES

  • Surround values for attributes in double quotes.
  • Boolean attributes, such as required, do not need a value. 1
  • Follow this order for attributes: 2
  1. class
  2. id
  3. name
  4. data- attributes
  5. for, href, value, etc.

Code:

<!--Do this-->
<input class="input" type="radio" required>

<!--Not this-->
<input type='radio' class="input" required='true'>

Reasoning:

  1. Not required according to the spec - if a boolean attribute is present, it's true; if it's not, it's false.
  2. The order follows what the most common attributes are. Almost every element will have class, most will have an id, some will have data attributes, etc. This makes it easier to mentally parse.

 

3. CONRTESIES

  • Put a single line break between blocks/components.
  • Avoid adding comments. An exception would be a closing comment for large blocks.

Code:

<div class="video-player">
  ...
</div>

<div class="comment-list">
  ...
</div> <!--end comment-list-->

Reasoning:

  1. The structure of your document should explain your intentions without the need for comments. A comment at the end of large blocks though can help with debugging purposes.

 

4. REMINDERS

  • Don't use styling tags such as <bold> and <hr>.
  • Do not inline Javascript.
  • HTML is about structure and meaning, not style or behavior.

Reasoning:

Keep these in mind for maintainability purposes and to keep a separation of concerns. Future you and other developers know they need to look in CSS files for styling and Javascript files for behavior.

 

CSS

1. FORMATTING

  • Each selector in a group should be on its own line.
  • The opening brace belongs on the same line as the selector.
  • Put a space before the opening brace.
  • Each property and value pair gets its own line
  • Properties and values belong on the same line.
  • One space after the colon of a property.
  • Put a space after each comma.
  • Always end with a semicolon.

Code:

/* Do this */
h4,
h5,
h6 {
  color: rgba(100, 100, 100, 0);
  margin-bottom: 0.25rem;
}

/* Not this */
h4, h5, h6
{
  color:rgba(100,100,100,0);
  margin-bottom:0.25rem
}

Reasoning:

These formatting defaults are the standard at many companies and also have the added benefit of making the code easier to scan.

 

2. SASS

  • Stick to the basics: variables, includes, and mixins.
  • Avoid nesting whenever possible.
  • Adhere to this order:
  1. @include
  2. regular styles
  3. pseudo classes
  4. nested items (only if you must)
  5. media queries

Code:

.list-item {
  @include font-size(1);
  padding: 1rem;

  &:hover {
    background-color: $light-gray;
  }

  @include respond($br-desktop) {
    padding: 2rem;
  }
}

Reasoning:

  1. SASS has many powerful tools, but these can make your code difficult to maintain if you're not careful and confusing for the next person who touches it.
  2. On any decent-sized site, specificity problems can and will arise rather quickly. Extending your components later will be difficult as well.
  3. Defaults to help out the next developer and make the code easier to scan.

 

3. CSS

  • Hyphen-delimit your class names.
  • Use lowercase, not uppercase.
  • Prefix decimals with a leading 0.
  • Don't specify units for zero values.
  • Do not style js- prefixed classes.
  • Avoid using !important unless absolutely necessary. Restrict its use to utility classes prefixed with a u-.
  • Adhere to this property order:
  1. Positioning (position, z-index...)
  2. Box Model (display, margin...)
  3. Typographic (font, color...)
  4. Visual (background, opacity...)

Code:

/* Do this */
.table-item {
  padding: 0.25rem;
  margin: 0;
  font-size: 1.25rem;
}

/* Not this */
.tableItem {
  font-size: 1.25rem;
  padding: .25rem;
  margin: 0rem;
}

Reasoning:

  1. Classes prefixed with js- are strictly for hooking into Javascript. Developers know this is the class to use for setting up click events and such. They are not meant to be styled.
  2. Properties marked with !important can make that component's reusability difficult in the future.

 

4. NAMING CONVENTION

  • Find one you like and stick to it.
  • This site was made using BEM. Other options include:
  1. OOCSS
  2. SMACSS
  3. Idiomatic CSS
  4. RSCSS
  5. Title CSS

Code:

.item {
  &__number {
    ...
  }

  &--selected {
    ...
  }
}

Reasoning:

You don't have to follow a certain naming convention, but doing so will reduce the amount of time you spend thinking names up, give you a good code structure, and make it easy for the next developer to pick up.

 

5. COMMENTING

  • Use a title comment for sections/components.
  • Keep comments coupled with the component/element. Don't put comments next to individual properties.
  • Don't comment about what you're doing. It's more important to comment why you're doing it.

Code:

/*----------------------------------------
  #MAIN-NAV
----------------------------------------*/

/* We're setting an opacity here because of a Safari rendering issue. */
/* The flex-direction changes to ensure nothing is oddly stacked on mobile. */

Reasonning:

  1. Using rem values makes it easier to scale a site via media queries since rem is based on the root font size. There are other alternatives to consider though.
  2. Seconds are a bit easier to mentally parse than milliseconds although this can largely come down to user preference.
  3. If you're only adding a left margin, it's clearer if you do margin-left: 1rem over margin: 0 0 0 1rem. It also erases the chance of getting unnecessarily overwritten later.

 

 

TOOLS

1. EDITOR SETTINGS

  • Use UTF-8 encoding.
  • Use soft tabs set to 2 spaces.
  • Give yourself an 80 character wide guide
  • Remove any trailing whitespace.
  • Put a new line at the end of files.

Info:

  • Everyone uses different tools to write their code. These settings ensure that everything will display the same regardless of environment or text editor.
  • It also ensures you don't muddy up commits and diffs with spacing issues.
  • Use this file to get these defaults after downloading the EditorConfig plugin for your text editor of choice.

 

2. PLUGINS

  • EditorConfig - helps maintain your coding style.
  • Emmet - greatly improves the code writing workflow with shorthand, autocomplete, and more.
  • Minimap - a full preview of your code in the sidebar.

Info:

These are just a few of my favorite plugins. Be sure to check out the settings for some of them because they can override the editor settings shown above.

 

3. RESOURCES

  • Trello - A look into how Trello writes their CSS.
  • Medium - Medium’s CSS is actually pretty f***ing good.
  • CSS Guidelines - High-level advice and guidelines for writing sane, manageable, scalable CSS.
  • GitHub Primer - Best practices and guidelines for writing HTML and CSS with approachable formatting, syntax, and more.
  • Sass Guidelines - An opinionated styleguide for writing sane, maintainable and scalable Sass.

Info:

A lot of what is in this guide is based on the information provided in the incredible resources listed here. All of them are highly recommended reading.

 

Related Post


Các kết hợp trong CSS – Combinator
Tuesday, March 10, 2015
Việc sử dụng CSS kết hợp rất quan trọng trong việc thiết kế layout trong thiết kế web và lập trình web. Sau đây tôi xin giới thiệu đến các bạn việc kết hợp này.
Video học bootstrap 3 Tiếng Việt
Monday, November 3, 2014
Bootstrap hiện tại là 1 framework css mạnh và phổ biến hiện nay. Khi đã nắm được nó các bạn sẽ thấy việc phát triển layout website rất thú ví và đơn giản hơn rất nhiều. Bản thân mình cũng sử dụng bootstrap cho khá nhiều dự án của mình. Nhưng chủ yếu là học theo ví dụ kiểu cưỡi ngựa xem hoa và bị hổng kiến thức khá nhiều. Hôm này mò mẫm trên google tìm ra được 1 serial video hướng dẫn bootstrap khá hay, mình nghĩ nó sẽ giúp những cho những bạn chưa biết về bootstrap có cái nhìn tổng quan về framework này, và những thành phần nhác đọc siêng ngủ như mình bù đắp được một số kiến thức bị hổng của bootstrap từ đó hoàn thiện mình hơn....
Search

Đăng ký nhận bài mới


Category

Blog Archive