针对 github 页面源代码 的分析

html class="js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths no-csspositionsticky filereader eventsource xhr2"

modernize 检测浏览器环境（JS 非源代码）

body class="logged_out page-profile macintosh  env-production"

登录状态 页面类型 系统 env-production 同上，都是为后面 js 操作获得依据。（这是 WWW 服务器后台的输出，估计来自头文件）

<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub" />

open search

 <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub" />

mac设备 图标

<link rel="logo" type="image/svg" href="https://github-media-downloads.s3.amazonaws.com/github-logo.svg" />

给哪个设备用的呢？

<meta property="og:image" content="https://github.global.ssl.fastly.net/images/modules/logos_page/Octocat.png">
<meta name="hostname" content="fe16.rs.github.com">
<meta name="ruby" content="ruby 1.9.3p194-tcs-github-tcmalloc (2012-05-25, TCS patched 2012-05-27, GitHub v1.0.32) [x86_64-linux]">
<link rel="assets" href="https://github.global.ssl.fastly.net/">
<link rel="xhr-socket" href="/_sockets" />

<meta name="msapplication-TileImage" content="/windows-tile.png" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="selected-link" value="/guoshuang" data-pjax-transient />
<meta content="collector.githubapp.com" name="octolytics-host" /><meta content="github" name="octolytics-app-id" />

<link rel="icon" type="image/x-icon" href="/favicon.ico" />

<meta content="authenticity_token" name="csrf-param" />
<meta content="JSUbjyjigzd3aIWgK24WnvSQQQzNO2djATGrsxiuo5A=" name="csrf-token" />

有趣的头文件。

div class="wrapper"

容器也坚持使用 class 而不是 id，看来信心十足。

div class="fullscreen-overlay js-fullscreen-overlay" id="fullscreen_overlay

覆盖

div id="ajax-error-message" class="flash flash-error"

ajax 错误信息

<div class="svg-tip" style="position: absolute; display: none; box-sizing: border-box;"></div>

补丁 svg 信息，看来 github 也有补锅匠。

Others

• 代码注释、缩进完整，估计用了 第三方 预处理工具。
• font icon 是 octicons

更多参考

https://github.com/styleguide/css/1.0