Created
March 7, 2010 05:20
-
-
Save jimjeffers/324170 to your computer and use it in GitHub Desktop.
Example CSS snippets referenced on my blog: http://donttrustthisguy.com/2010/03/07/the-art-and-zen-of-writing-css/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* The two rules below would accomplish the same thing. */ | |
div#primary_content p { | |
font-size: 0.875em; | |
} | |
p { | |
font-size: 0.875em; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* KEEP OUR CSS CLEAN | |
Some guidelines to follow: | |
1. Break code down into sections. | |
2. Keep your rules alphabetically sorted. | |
3. Only put one selector per line for a block of rules that apply to multiple selectors. | |
4. Indent your rules, only one rule per line. | |
5. Indent proprietary properties with two spaces. Keep these properties directly below the proposed property. | |
example: | |
element#id, | |
element.class { | |
rule1: value; | |
-webkit-rule1: value; | |
-moz-rule1: value; | |
rule2: value; | |
top: value; | |
} | |
*/ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Over-specified selectors create a huge nightmare. */ | |
.admin #content ul.form > li input[type="text"], | |
.admin #content ul.form > li input[type="submit"], | |
.admin #content ul.form > li textarea, | |
.admin #content ul.form > li select, | |
#content .standard_form ul.form > li input[type="text"], | |
#content .standard_form ul.form > li input[type="password"], | |
#content .standard_form ul.form > li input[type="submit"], | |
#content .standard_form ul.form > li textarea, | |
#content .standard_form ul.form > li select { | |
border: 3px; | |
padding: 2px 4px; | |
} | |
/* The most generic equivalent which accomplishes the same thing. */ | |
input, | |
select, | |
textarea { | |
border: 3px; | |
padding: 2px 4px; | |
} | |
/* We could gradually become more specific as we needed... */ | |
.admin input, | |
.admin select, | |
.admin textarea { | |
background: #333; | |
color: #ccc; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment