mdo / code-guide Goto Github PK

View Code? Open in Web Editor NEW

8.4K 8.4K 1.1K 432 KB

Standards for developing consistent, flexible, and sustainable HTML and CSS.

Home Page: https://codeguide.co

License: MIT License

HTML 32.00% SCSS 68.00%

code-guide's People

Contributors

Stargazers

Watchers

Forkers

andysze dolmen iepathos leoyoung 99plus2 sawant duke3d szinya clindsey yanhaoyang pgn-vole wixo yahame responsiveapp empire daveyoon data-enhanced tbanga jimmytang drublic topless kurniawanchan webcane machito webcoding designfactory elmahdimahmoud bertomartin kewtec rtraction miguelcarvajal gorilahe lefam lahmizzar beaucharman bjarnithor ianwremmel skynet ducbin mbeall abitdodgy widgetfactory zhanghb abdieffendi joshuapekera ganginator matthewsimo sennychu dallinchase kimsq fatxx 4nn3ck73td gbyukg giannwilk justjenfelice webdesignpop silentmw rjdkolb fth-ship mgarciat1090 sethlilly annarider zhangsiyuan yanguanglan mechstar voidnothings microkais archie22is scalp42 empia cironunes diegoeis danblundell dotlabel-chris juniorgodoi alwayrun andriariii sriram-nappa bostondv copypeng perry jeromehubert garcianam seanislegend cartertsai borealishq sergioymolina diagramatics radarseven noctist 111vandana arjunmenon lightburn trfiladelfo thasophearak disintegrator charca almudenaguerras afthill magicdice

code-guide's Issues

Mention HTML boolean attribute style preference

It's the difference in <input disabled> vs. <input disabled=""> vs. <input disabled="disabled">.

Missing favicon on GH pages

The favicon is referenced in the HTML as follows

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

The folder ico doesn't exist in public and thus no favicon is present.

hsl(), hsla() and rect()

If rgb() and rgba() shouldn't have spaces after commas, what about hsl(), hsla() and rect()?

HSL(A) and rect aren't common, but they also shouldn't have the spaces after commas.

Attribute Order

I work with AngularJS, any thoughts on where in the attribute order should the ng-* attributes go?

double vs single quotes

What is the motivation for single vs double quotes?

It is often desirable to switch between the two as per convenience. For example in PHP it is better to write (1) echo "<a href='$href'>"; as opposed to (2) "echo <a href=\"$href\">";.

HTML and for that matter most other languages allow for single versus double quotes for this reason.

Advise use of child (rather than descendant) selectors when component is recursive?

e.g. Bootstrap does this for its <table> and panel styles.

Classes over generic element tags

In the guide, it's said Use classes over generic element tags
What's the reason of this? I mean, that's only convention or it's "technically" better to use classes over generic elements tags?

Thanks for your answer.

Position of 'name' HTML attribute

name is quite a common HTML attribute, but it's not yet listed in the guide.

At what position should it come?

http://mdo.github.io/code-guide/#html-attribute-order

Add lang attribute to html tag as recommendation

From html tag section in W3C HTML5 Editor's draft:

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

So IMHO would be nice to have a recommendation to use lang attribute into <html> tag.

Translation and help

Hello,

I really like your this project since its good to have some well-known standards when developing web applications and I would like to contribute.

You write on your website that for every contribution, an issue should be open... I would like to translate your project into Czech since there are few well structured guidelines in my language. Is it ok if I do so?

Extra } in media query example

bootstrap

Attribute order - id first

Maybe there is sense to use the id attribute first?
In this order:

id
class
data-*
src, for, type, href

Arguments:

Using id attribute is less than using classes but often more important for the application logic
String of classes can be very long and we may miss the id attribute

Example from http://getbootstrap.com/
<header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
I prefer:
<header id="top" class="navbar navbar-static-top bs-docs-nav" role="banner">

Subdomains for translations

Now that this project has a domain, do you want to set up subdomains for the translations?

有关于一个注释的标注的错误

如下图标示，self-closing是自闭的标注，请放置到“和”字之前

code1

Leading zero

Don't include spaces after commas within rgb(), rgba(), hsl(), hsla(), or rect() values. This helps differentiate multiple color values (comma, no space) from multiple property values (comma with space). Also, don't prefix values with a leading zero (e.g., .5 instead of 0.5).

Okay, it's for rgba(0,0,0,.5), but is it for other units?

Example: margin: -.5em and margin: .5em

Is my example good code or bad?

recommend using @charset in CSS files?

e.g. @charset "UTF-8";
So that the file's encoding is explicit and will override misconfigured servers.

Add reason for new lines at end of files

Under 'Editor Preferences', there is the suggestion to "Add new line at end of files."
I'd not really come across this idea before (although seen it in many files and Terminal systems) and wasn't quite sure of the reason. After doing some research, the best example of a positive reason to do it was here: http://evanhahn.com/newline-necessary-at-the-end-of-javascript-files/

It might be good to add a link to an explanation of why you would want to do this, in the guide.

IE compatibility mode specifics

Love this project, thank you.

A note about the 'IE compatibility mode' section. It's a great idea to include it, however, in order for this tag to work as you expect, it needs to come before all other elements in the <head> excluding the <title> and other <meta> elements. Unfortunately, the location of the tag totally changes the behavior.

"The X-UA-Compatible header isn't case sensitive; however, it must appear in the header of the webpage (the HEAD section) before all other elements except for the title element and other meta elements."
— MSDN Specifying legacy document modes

There's a mention of this in the comments of the Stack Overflow article linked in your description but it's pretty buried. Seems like information that could be good to present up front. Let me know what you think. I could add a pull request with a change if you think it's useful here.

Typo under Shorthand notation

Under the shorthand notation section, "available" is spelled wrong: "avaialble"

Ohloh

I am just curious... have you ever thought about adding this project to http://www.ohloh.net/? I hope you dont mind opening an issue about this.

Missing #id on “golden rule” section breaks navigation

Fix typo

There is a typo in "Single Declarations" :

Any rule set with multiple "delcarations"

Charset

Code guide recommends <meta charset="UTF-8">, but more common way is <meta charset="utf-8"> (I don't know do they differ).

What way should be used?

2x syntax.css

There is a syntax.css in _includes/ and in _includes/css/. Can you remove one instance?

Add mention of global file preferences

Includes:

Trimming trailing white space
New lines at end of every file
UTF8

/cc @ntwb

Javascript code guide

Bootstrap have very pretty javascript code. What code guide and rules you use? In contributions of bootstrap I found only that:

No semicolons
Comma first
2 spaces (no tabs)
strict mode
"Attractive"

Thanks

Add links to relevant CSS class prefixing blog posts?

The use of character entities in HTML

Occured to me when inspecting @KuraFire's PR (#57) for translation. Should we use character entities to replace special characters (apart from < and >) or because of the <meta charset="UTF-8"> we can just paste it in place instead to save character bytes?

Add mention of media query preferences

What's the best way to include and structure media queries in a CSS file?

Should they all be bundled together at the end of the style sheet? Each media query next to the related classes? Other technique?

Missing meta tags

There aren't <meta> tags for author, description and keywords. You should add them for the robots. 😄

Add link to Czech translation

Hi, I created Czech translation (might not be perfect but bugs will be fixed :-))

Pull request has been sent

UX - scroll page by clicking on right/left parts on the window

It is convenient to list image galleries when you just click on image right and left to get forth and back. It would be a good usability feature for the guide as well.

Document use of ids and .js-* classes

guoxiangwen

郭向文

avoid @import in css?

What about adding a line about avoiding @import in CSS?
It's considered bad for performance: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Typo: "index.html" line 290

Change "or" to "for"

Be sure to write in complete sentences or larger comments...

Generic element tag selectors also bad for reasons besides perf

The current guidance in the Guide is:

Use classes over generic element tag for optimum rendering performance.

But there are non-perf-related reasons to avoid them too, right? Like why we're trying to avoid them in Bootstrap going forward?
e.g. They're unnecessarily constraining in some cases. Maybe my component uses an h2 today, but tomorrow I might want it to use an h4 instead, so it's annoying if the component's CSS relies on this aspect of the DOM.

should it have quotes or not in background image?

two differents used in guide:

/* Multiple declarations, one per line */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}

the other:

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

should it have quotes or not in background image?
url(......) or url('......') or url("......")?

darker background for the page

something less burning to the eyes than white

Document quirks mode meta tag

Fix prefix indent example

From https://github.com/mdo/code-guide#prefixed-properties:

.selector {
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

Prefixing border-radius isn't needed. Please change this example to something like:

.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.075);
          box-shadow: 0 1px 2px rgba(0,0,0,.075);
}

Great project 👍