[ Web Proxy ]
URL:
Viewing: https://codeguide.intersection.tw [Back]  [Original]
@mdo
Logo [ Logo]

HTMLCSS

@mdo · v4.0.0 · GitHub

HTML

CSS

Github Issue Issue

HTML

<!doctype html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="Company">
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

HTML5 Doctype

HTML 

<!doctype html>
<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

HTML5

Authors are encouraged to specify a lang attribute on the root html element, giving the documents language. This aids speech synthesis tools to determine what pronunciations to use, translation tools to determine what rules to use, and so forth.

lang IANA 

<html lang="en">
  <!-- ... -->
</html>

IE

IE10 Internet Explorer <meta> IE11 Microsoft Edge

Stack Overflow 

<!--  IE10  -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

HTML Entity &emdash; XML (&)/ HTML Entity

UTF-8 

<head>
  <meta charset="utf-8">
</head>
<body>
  <p> HTML Entity</p>
</body>

CSS JavaScript

HTML5 CSS JavaScript type text/css text/javascript

HTML5 

<!--  CSS -->
<link rel="stylesheet" href="code-guide.css">

<!--  CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js"></script>

HTML 

<!--  -->
<button>...</button>

<!--  -->
<div class="btn" onClick="...">...</div>

HTML

classidname data

<a class="..." id="..." data-toggle="modal" href="#">
  
</a>

<input class="form-control" type="text">

<img src="..." alt="...">

XHTML HTML

WhatWG

true false

WhatWG

[] 

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

HTML HTML

<!--  -->
<span class="avatar">
  <img src="...">
</span>

<!--  -->
<img class="avatar" src="...">

.editorconfig Bootstrap EditorConfig

CSS

Wikipedia 

//  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
}

//  CSS
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgb(0 0 0 / .5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

  2. Box

Box Box FlexFloatGrid Table

border Box box-sizing border-box border-width border border-radius

Mixin border-top-radius() Mixin border-radius responsive-font-size() font-size

Bootstrap Stylelint 

.declaration-order {
  // 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  // Box 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;

  // 
  font: normal 14px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;
  text-decoration: underline;

  // 
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  // 
  opacity: 1;
}

block inline block inline CSS

Writing Mode 

// 
.element {
  margin-right: auto;
  margin-left: auto;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

// 
.element {
  margin-inline: auto;
  border-block: 1px solid #eee;
}

CSS Color Levels 4rgba() hsla() rgb() hsl() rgb() hsl() Alpha CSS

WCAG 16px 4.5:13:1

.element {
  color: rgb(255 255 255 / .65);
  background-color: rgb(0 0 0 / .95);
}

@import

<link> @import

Steve Souders 

<!--  link  -->
<link rel="stylesheet" href="core.css">

<!--  @import -->
<style>
  @import url("more.css");
</style>

Media Query

Media Query

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

CSS 183 

// 
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

// 
.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; }

HTML margin0

Mozilla Developer Network 

// 
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}

// 
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}


// 
.table > thead > tr > th {  }
.table > thead > tr > td {  }

// 
.table > thead > tr {
  > th {  }
  > td {  }
}


// 
.element {
  margin: 10px 0 @variable*2 10px;
}

// 
.element {
  margin: 10px 0 (@variable * 2) 10px;
}

Class CSS // 

// 
// 
.modal-header {
  ...
}

// 
//  .modal-title  .modal-close 
.modal-header {
  ...
}

Class

Custom Properties 

// 
.t { ... }
.red { ... }
.header { ... }

// 
.tweet { ... }
.important { ... }
.tweet-header { ... }


// 
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

// 
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

(>) <table>

.custom-table > tbody > tr > td,
.custom-table > tbody > tr > th {
  /* ... */
}


//
// 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 { ... }

@mdo Code Guide (by ymcheung)

MIT Copyright 2022

Web Proxy Viewer  |  New URL  |  Original Page