mdo / code-guide Goto Github PK
View Code? Open in Web Editor NEWStandards for developing consistent, flexible, and sustainable HTML and CSS.
Home Page: https://codeguide.co
License: MIT License
Standards for developing consistent, flexible, and sustainable HTML and CSS.
Home Page: https://codeguide.co
License: MIT License
There aren't <meta>
tags for author, description and keywords. You should add them for the robots. 😄
郭向文
Now that this project has a domain, do you want to set up subdomains for the translations?
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("......")
?
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?
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.
Where is the proof of this statement? https://github.com/mdo/code-guide/blob/gh-pages/index.html#L68-L69
Interested to know if the same thinking as the class name recommendation applies to SASS/LESS variable names.
Recommendations for variable names would be very helpful for people writing css through a preprocessor, but who don't have knowledge of programming language style recommendations.
Great project 👍
Could you rename the font/
to fonts/
as it's better name for directories with more than one file?
It's the difference in <input disabled>
vs. <input disabled="">
vs. <input disabled="disabled">
.
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.
Bootstrap have very pretty javascript code. What code guide and rules you use? In contributions of bootstrap I found only that:
Thanks
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.
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.
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.
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.
Maybe there is sense to use the id attribute first?
In this order:
Arguments:
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">
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/
I'm coming
something less burning to the eyes than white
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.
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?
Under the shorthand notation section, "available" is spelled wrong: "avaialble"
Hi, I created Czech translation (might not be perfect but bugs will be fixed :-))
Pull request has been sent
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.
e.g. Bootstrap does this for its <table>
and panel styles.
There is a syntax.css
in _includes/
and in _includes/css/
. Can you remove one instance?
name
is quite a common HTML attribute, but it's not yet listed in the guide.
At what position should it come?
There is a typo in "Single Declarations" :
Any rule set with multiple "delcarations"
Don't include spaces after commas within
rgb()
,rgba()
,hsl()
,hsla()
, orrect()
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 of0.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?
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.
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.
I work with AngularJS, any thoughts on where in the attribute order should the ng-* attributes go?
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);
}
e.g. @charset "UTF-8";
So that the file's encoding is explicit and will override misconfigured servers.
Change "or" to "for"
Be sure to write in complete sentences or larger comments...
艾美店务管理系统Beta1
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.