Is there a standard or best practice for the order of grouping of styles CSS element styles? I know that this isn't a major concern, but I want to be sure I'm always producing readable code, especially for elements with many styles.
Take for example:
#element {
font-family: Arial;
font-size: 8pt;
color: #666666;
border: 1px solid #ccc;
position: relative;
top: 5px;
left: 5px;
}
#element groups the styles in the order of text styles, then border, then position. Is there a standard for a css-type hierarchy that places some type of priority or importance on this order? For example, should you group in order of: position, text styles, border?
Quite frankly, it boils down to personal preference, but here's my convention:
Group things that look like they're related to each other. Then, use white space to separate each "group". I just hit "enter" after each block. For other styles, like "top", "left", etc., I put them all in one line, after their main style (like "position"). I also tend to put CSS3 properties as the last style in any given block.
Sometimes, when I'm in a good mood, I also tend to loosely alphabetize the properties (by block). But again, it's really just preference.
Example of what I do:
#element {
color:black;
font-family:Arial;
font-size:1.2em;
font-weight:bold;
text-transform:capitalize;
text-shadow:0 1px 1px black;
background-color:white;
border-bottom:1px dotted gray;
box-shadow:1px 1px 2px black;
position:fixed;
top:0; right:0;
height:30px;
width:245px;
}
Just my two pennies!
Different people have different opinion, I would prefer it to be alphabetically sorted.
Then CSS itself can be re-factored to separate out structural CSS pages and ui element specific pages.
The structural CSS are the ones that control the structure of the pages.
Good question, not sure there is a standard but my preferred method is.
#element {
layout,
positioning,
text style
appearance
}
For example
#element {
display: block;
width: 15px;
height: 15px;
float: left;
position: relative;
font-size: 12px;
line-height: 16px;
text-decoration: none;
color: #333;
text-indent: -9999px;
white-space: nowrap;
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
}
Like with all styles of coding, it's not that important. What does matter is consistency. If you work on a team, you should all agree on what suits you all best rather than find a convention that is thought to be best that you'd need to adapt to... That's really a waste of time. Likewise, if you are working on projects that will be inherited, stick with the same convention, but do what suits you best.
Related
I've got problem with link styling -
hover and active works, but link doesn't, what am i doing wrong?
How can i fix this problem?
#nav{padding: 5px 230px 10px 230px;}
#nav li{
display: inline-block;
list-style: none;
margin: 5px;
padding: 1px;
font: 20px Century Gothic;
}
a.navlink:link{
color:#06AD00;
background: white;
border-top: 1px #958A7E solid;
border-bottom: 1px #958A7E solid;
cursor:pointer;
}
a.navlink:visited{}
a.navlink:hover {
color: black;
background: white;
border-top: 1px black solid;
border-bottom: 1px black solid;
cursor:pointer;
}
a.navlink:active {
color: red;
background: white;
border:0;
cursor:pointer;
}
You CSS works great on my FireFox.
Make sure you define the HTML tags and attributes properly according to your CSS.
Also, note that you may see the wrong style because your links are already visited. Try to put some URLs that you didn't visit. (ex: sdfdsfdsfsfdhgsdf.com ect...)
I've had this same problem with certain versions of Opera and older IE. I've always avoided the :link pseudo-class in favor of just a natural a style - never quite understood the reason why, but :link was always 50/50 while natural a has never failed.
Try this instead for your :link style:
a.navlink{
...
}
This will only create a default state for your a.navlink elements - the other pseudo-classes will still modify it properly. If it doesn't fix things for you, then my next guess would be you've got a conflicting style somewhere. Hard to know for sure without getting our hands on the rest of the source.
:link only matches unvisited links, per spec. If you want to match all links, you have to do something like a.navlink:link, a.navlink:visited {}
This question already has answers here:
Is there a specific order for CSS properties?
(6 answers)
Closed 2 years ago.
Does the order of properties in a CSS declaration have an effect on the rendering of the HTML?
This is really a trickier question than I first thought. My first reaction was:
Within a CSS rule (also called “rule set”), the order of declarations (of the form property: value) is immaterial. So foo { color: red; background: white; } is equivalent to foo { background: white; color: red; }. There is no separate statement about this in specifications (I suppose); it follows from the lack of any statement that would make the order significant.
On second thought, we could also have
* { font: 100% Calibri; font-weight: bold; }
What happens if you switch the order? In browsers, it does have an effect. I’m not sure how this should be interpreted in terms of CSS specification, but browsers apparently, and naturally, process the declarations sequentially. So the rule makes the text bold, but if you change the order,
* { font-weight: bold; font: 100% Calibri; }
then things change. The font shorthand sets font-weight to its initial value normal, so the text is not bold.
On third thought, there are many methods and tricks based on the order. So yes, the order of declarations is significant.
The impact of the order of rules is a completely different issue.
Apparently the order does not have any direct impact on the result.
The subject has been mentioned here: http://css-tricks.com/new-poll-how-order-css-properties/
It does have an impact according to here: http://css-tricks.com/ordering-css3-properties/
And here is another trend: http://perishablepress.com/obsessive-css-code-formatting-patterns-and-trends/
Final verdict: Arrange the way you judge best, it will work.
Mainly 5 Types Of CSS Property Orde:
Randomly
Grouped By
Alphabetical
By Line Length
CSS Properties by Importance
1. Randomly
.module {
border: 1px solid #ccc;
width: 25%;
padding: 20px;
position: relative;
min-height: 100px;
z-index: 1;
border-radius: 20px;
}
2. Grouped By
.module {
width: 25%;
min-height: 100px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 20px;
position: relative;
z-index: 1;
}
3. Alphabetical
.module {
border-radius: 20px;
border: 1px solid #ccc;
min-height: 100px;
padding: 20px;
position: relative;
width: 25%;
z-index: 1;
}
4. By Line Length
.module {
border: 1px solid #ccc;
border-radius: 20px;
position: relative;
min-height: 100px;
padding: 20px;
z-index: 1;
width: 25%;
}
Here is Refrence URL: https://css-tricks.com/new-poll-how-order-css-properties/
5. Ordering CSS Properties by Importance
But Best Way To Ordering CSS Properties by Importance
Layout Properties (position, float, clear, display)
Box Model Properties (width, height, margin, padding)
Visual Properties (color, background, border, box-shadow)
Typography Properties (font-size, font-family, text-align,
text-transform)
Misc Properties (cursor, overflow, z-index)
Example:
.button {
display:inline-block;
margin:1em 0;
padding:1em 4em;
color:#fff;
background:#196e76;
border:0.25em solid #196e76;
box-shadow:inset 0.25em 0.25em 0.5em rgba(0,0,0,0.3),
0.5em 0.5em 0 #444;
font-size:3em;
font-family:Avenir, Helvetica, Arial, sans-serif;
text-align:center;
text-transform:uppercase;
text-decoration:none;
}
In normally no need or rule to order of properties in a CSS declaration. I wrote order like my requirements of design and browser response, but in firebug tool it arrange sin alphabet order.
The best method of order is
1. box model = width ->height->float
2. font related = font-size -> text-decoration, font-family
3. background images = width, height, border, image
Then only browser allocate space for each element faster in my experience.
Some persons order like below types:
Random
Alphabetical
Grouped by Type
By properties Length
There are some guidelines. But, at the end of the day it comes down to browser implementation. Try not to rely on a certain order always working, because it won't. Inside a declaration, a statement tends to override a previous statement.
I new to CSS/CSS3 and I read in many places different way to build CSS files. Some people all tags in the same elements and some people divide elements and then use different classes in the HTML code.
eg:
// css
h1 { font: normal 20px Arial; color: black; margin: 1em 0; padding:0; border-bottom: solid 0.1em #ddd; }
h2 { font: normal 16px Arial; color: black; margin: 1em 0; padding:0; border-bottom: solid 0.1em #ddd; }
so in the HTML they just have to put and that's it. If you need to change the border color then you have to change ALL tags that has the border-bottom.
OR
h1 { font: normal 20px Arial; }
h2 { font: normal 16px Arial; }
.colorBlack { color: black; }
.headers { margin: 1em 0; padding:0; }
.borderBottom { border-bottom: solid 0.1em #ddd; }
and in the HTML you use:
<h1 class="black headers borderBottom">h1</h1>
Very easy but everytime you have to put all the CSS you need
Is there any Best Practices on how to build CSS? Which way is better for performance or loading time?
I recommend to use:
h1, h2 {
color: black;
margin: 1em 0;
padding: 0;
border-bottom: solid 0.1em #ddd;
}
h1 {
font: normal 20px Arial;
}
h2 {
font: normal 16px Arial;
}
The best practice: Keep your code readable. Readability is not achieved by separating a style definition in several useless classes.
Usually, you want the h1 and h2 tags to have similar styles. For that reason, I've grouped the styles. When you want another property value for a certain element, you can add another CSS definition. When the selector has a higher specificity, the new declaration will override the previous one(s).
I think both technics are useful. Personally I often put two or more classes when I need to separate one element from another (example last in row element should not contain margin-right) my code looks like:
HTML:
<div class="images-row">
<div class="image-item">...</div>
<div class="image-item">...</div>
<div class="image-item">...</div>
<div class="image-item last-in-row">...</div>
</div>
CSS:
.image-item {
border:1px solid red;
margin-right:20px;
width:200px;
height:200px;
}
.image-item.last-in-row {
margin-right:0;
}
(supported well in IE > 7 and other good browsers). This solution keeps the code quite clean and also makes me write less (I don't need to rewrite all the styles for the last element or add separate selectors). jQuery element handling is less confiusing (I need only one selector to match all .image-items).
i wanted to know if i can change the background color of the of hovering option using css only. I am not bothered about browser compatibility. But give me a solution that works across most browser.
I think the best solution first is to know that you DON'T have to expect that you page look the same in all browser. A good clean solution is use the power of each browser to do this. for example build a css for chrome/safari, another for IE and a last one for Firefox, you can do it as the follow example:
and I think use JAVASCRIPT for this purpose is NOT the best solution.
for web-kit safari/chrome
select{
-webkit-appearance: button;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url(../img/forms/arrow_blue.png),
-webkit-linear-gradient(#E1E1E1, #FFF 30%, #FFF);
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #CCC;
color: #999;
font-size: 90%;
font-family:Comfortaa, Arial, Helvetica, sans-serif;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
height:40px;
}
For firefox:
#-moz-document url-prefix() {
select{
border-radius: 5px;
background-image: url(../img/forms/arrow_blue.png),
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #CCC;
color: #999;
font-size: 90%;
font-family:Comfortaa, Arial, Helvetica, sans-serif;
margin: 0;
height:auto;
padding:10px;
}
}
And you can target each IE in each version as example
<!-- cause not every body is pretty -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="frontend/css/ie8-and-down.css" />
<![endif]-->
select{ border:1px solid #EEE;
width:auto !important;
height:35px !important;
padding:5px !important;
margin:5px !important;
line-height:1 !important;
}
I thinks in this way you will have nice dropdowns in all browser, while only safari/Chrome will be look exactly as you like, the other ones will behave as the user expect and you will not have to use javascript
Hmmm... you can use the :hover pseudo class to change the background-color of a select element but I just tried:
option:hover {
background-color: #F00;
}
with no result. However:
select:hover option {
background-color: #F00;
}
will change the background color of options when you hover of the select menu but as far as I can tell using option:hover itself won't work
The select tag depends on the OS you're on,
and you can't style it the way you want
the best solution is to use jquery to replace the select with a styled list (editable with css)
take a look:
http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
is this the sort of thing your after?
select:hover { background-color: red; }
I know this is an old question, but since I had tryed to implement this in the past and although I came to the conclusion that is not worth it most of the time, I realize sometimes it really affects the design idea (i'm not a designer but they get very frustrated about details like that), I thought I would share a resource I found that actually suggests ways to work around the fact that it is very difficult (if not impossible) to get a consistent enough look and feel by just applying css to the tag. Hope it helps somebody.
The html select tag styling challenge
I want to style a form in html using CSS. It's a really simple form, so I didn't expect to have any problems with accessing it with CSS selectors. But anyway, when I am trying to add something like:
#maincontent #left_side #comments{
margin: 100px;
}
or
#comments{
margin: 100px;
}
I see no visible effect.
Sorry, I think I am not very descriptive, but not sure how to describe the problem...
Maybe you could take a look at the demo url here:
http://chess-advices.com:8000/article/ololo/
And suggest how to fix my CSS, to pretify the form? (Well I actually just need to access it first)
Thanks in advance
You forgot to close this:
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #f3f3f3;
color: #ccc;
display:none;
change this to:
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #f3f3f3;
color: #ccc;
display:none;
}
To find this: Line 267 in your style.css or you can use strg/cmd + f to find it...
But i think, if you add something like this:
form label { width: 100px; display: block; float: left; }
form p { padding: 5px 0px 0px 0px; }
your form would look nicer :)
I hope this is the answer of your question...
There is an error earlier in the css file that causes this. There is no closing bracket on the style div.pagination span.disabled style, that makes the browser skip the rest of the css file.
Note: as an id is unique in a page, you only need #comments to target the element. The only reason to use #maincontent #left_side #comments would be if you need to make it more specific to override some other style, or if you use the style sheet for several pages and there can be other elements with the id comments that you don't want to target.