As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 11 years ago.
Some developers are particular about how they format their codes, for some good reasons. CSS is one of the items whose formatting doesn't really have a strong convention to follow (most probably because of its declarative nature).
Our group typically follow this "convention." The longer and more detailed doc can be found here.
/* Separate each selector to its own line. */
selector-1,
selector-2<1-space>{
<indent>property:<1-space>value;
}
selector {
/* Float. */
/* Positioning related declarations. */
/* Visibility. */
/* Box related declarations. */
/* Font related declarations. */
}
Is there a tool, which I can easily customize, in order to produce this formatting?
Actually, I'd be really interested to gather other experienced CSS programmers' inputs about e.g. whether it's better to lump multiple selectors into one line or separate them into multiple lines, whether I should even bother to prettify and maintain logical orders of my code manually.
Note: This probably doesn't perfectly fit to be a SO question. However, I am pretty certain the experience accumulated by some SO-ers during their tenure writing and maintaining CSS codes will definitely give insights to this issue.
Some CSS auto-format tools exist but there are not quite extensible.
I typically follow this convention. Also using only one indent. This allows maximum readability in our team.
.selector {
Style Defs:
* dimensions (width, height) styles
* positioning (with coordinates) styles
* float/clearstyles
* spacing (margin, padding, border) styles
* display/visibility styles
* typography-related (line-height, color, etc.) styles
* miscellaneous (list-style, cursors, etc.) styles
}
I typically split layout style definitions, colour / image style definitions and #media print into to three completely separate stylesheets, which are then combined, minified and cached at view time by a bespoke handler.
Related
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I have a couple CSS files with overlapping CSS selectors that I'd like to programmatically merge (as in not just appending one file to the end of the other). Is there any tool to do this online? or a Firefox extension perhaps?
I found Factor CSS - complete with source code, but I think it does way more than I'd need. I really just want to combine CSS blocks that have the same selectors. I'll check out the source code and see if it can be converted to something usable as a TextMate bundle. That is, unless someone else manages to get to it before me.
EDIT: Even better - here's a list of web-based tools for checking/formatting/optimizing css.
No I wish there was but the programming effort seems too much since there are multiple ways to reference a single element. The best that you can do is use a runtime like FireBug to find duplicates.
I wrote a Perl utility to do this several years ago.
As well as merging one or more stylesheets into a single coherent sorted output (complete with comments to show which file(s) each property appeared in, and warnings when a property has conflicting values), you can also selectively search or merge based on the selector, the property or both.
These are handled intelligently so that, for example, if you search for the property font you also get font-size, font-weight etc (still presented inside CSS blocks with the relevant selectors that they were taken from). Likewise, selector searching tries to Do The Right (ie generally most useful) Thing. If you search for, say, the element a, it will match any block whose selector is a, a:hover, a.extlink, a#mylink, .foo a, #bar a, p a, pre > a, a + p, a img... (the last two don't directly affect the styling of the a itself but of an adjacent or descendent element, which it is often useful to know about in such a search), without matching #a, .a, etc. Of course this behaviour is optional, you can also search for an exact selector. Or a regex.
Apart from perl itself the only dependency is CSS::Tiny
It's free software, and you can get it here: cssmerge
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
I joined a new project this week and I noticed that the designer (who creates all .css files) uses css in a different way of what I am used to.
I am used to have mainly the elemented referenced by classes and classes names, for instance have a definition
.myClass { display:block; }
and use the class="myClass" attribute in my element.
this designer builds the whole design using this kind of reference:
form#myForm div a { display:block; }
Or similar. This would get the all the anchors inside divs inside the form where id=myForm.
Which one is the best approach? Mainly using classes or mainly using this other approach (I don't know how to call it)?
thanks!
There is something that nobody has included in their answers yet, oddly enough and that is it all depends on how specific you want / need to be in your selections.
The basics:
If you want to select multiple elements on a page, simply using a class selector will work:
.non-unique-elements{
// some style
}
If you want to get somewhat more specific, or want to select a unique element on the page, go with an ID selector:
#unique-element{
// some style
}
Further Styling
Now, as your coleague has done, you can get even more specific by selecting an element's ID only when it has other attributes; for example, you may want to select all elements that contain a certain class name, but are also of type form
form.some-class{
// style
}
The most selective CSS will override less selective CSS
Therefore, consider the following example:
.some-class{
}
Gets overridden by:
#some-id{
}
Gets overridden by
div#some-id{
}
It really depends on the purpose.
Class should be used to define general style where as ID should be used to select a specific item.
it's a question of whether of the css properties you're writing depends on the relationship between the html tag and its parents (and siblings):
to illustrate,
i want to set the color of some text in the page to red -> use Only Classes .redtext
i want to set the color of some text only in specifics div -> .mydiv .redtext
i want to set the width of all inputs only in a specific form -> #myform input
keep in mind that using long css selectors make them very dependent on the Page structure and therefore fragile.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I'm trying to improve the style of a website. I'm looking for some examples of beautifully styled HTML elements (tables, lists, headings, etc.) that I can draw on for inspiration, or just copy and paste verbatim (if that's permitted).
Some explanation of how the styling was achieved would be nice, but is not absolutely necessary, as I can always use Firebug to reverse engineer the design. Ideally the designs should:
Be compatible with all modern browsers (which excludes IE6 IMO)
Use little or no JavaScript
Be valid XHTML transitional/strict
EDIT: Ideally, the site(s) should provide an easy way to view a list of styles for a particular element type (ordered list, table, heading, etc.)
Thanks,
Don
The best recource for specific elements and types is in my opinion by far http://www.patterntap.com.
There you browse categories like lists and tables.
alt text http://img514.imageshack.us/img514/2662/afbeelding1eu.png
For lists, Listamatic immediately comes to mind.
For everything else, I can only think of CSS Zen Garden.
Open Source Web Design has a lot of stuff available. You can see it at: oswd.org
CSS Play, by Stu Nicholls, and, of course, A List Apart are two of my own favourites.
The folks at Zen Garden think they're pretty hot. There's a large collection of different designs of the same HTML text to be admired there. Maybe you can learn something from the masters!
http://www.dynamicdrive.com/style/
http://css-tricks.com/
http://www.css-website.com/
http://cssmania.com/
http://cssline.com/
http://webdesignfromscratch.com/web-design/web-2.0-design-style-guide.php#gradients
http://www.webcreme.com/
http://css-warfare.com/
http://www.cssbeauty.com/
http://www.boxedcss.com/
http://css.maxdesign.com.au/index.htm
http://www.csselite.com/
http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
http://veerle.duoh.com/index.php/blog/comments/a_css_styled_table/
http://www.hunlock.com/blogs/Attach_icons_to_anything_with_CSS
http://www.designmeltdown.com/default.aspx
http://net.tutsplus.com/tutorials/html-css-techniques/design-a-beautiful-website-from-scratch/
http://inspectelement.com/articles/the-ultimate-a-z-of-the-best-design-and-development-related-sites/
For the inspirational sites, I use Firefox + Firebug. 95% of the sites listed comply to web standards, so I can peek at the code and know it's OK to use.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Are there any good CSS coding style/standards?
Here is a good one:
http://www.phpied.com/css-coding-conventions/
But the important thing is to pick something and stick with it for consistency.
I agree with most of the points at Andrew Hare's link, but I strongly believe
.class-name {
color: green;
}
is inferior to:
.class-name
{
color: green;
}
on the grounds that:
.class-name, .class-name2 {
color: green;
}
or:
.class-name,
.class-name2 {
color: green;
}
are considerably less obvious to grep or read than:
.class-name,
.class-name2
{
color: green;
}
There's no standard standard, as it were. There are most certainly plenty of in-house standards and conventions. And there are certainly known best practices.
I stick to the following:
Structure your CSS according to it's purpose
That may involve separating out CSS concerns into different files (layout.css, colors.css etc). This may just as well involve clearly dividing up a single CSS file into clear sections along the same lines.
Be as specific as possible
Selectors have differing weights. ID-based selectors are more specific than class-based selectors. Chained selectors (e.g. body div#container div#content p) are very specific indeed.
Start out being as specific as you can, even if it appears you're being too specific. It's quite easy, later down the line, to merge together two very specific style definitions by removing one and making the other less specific.
A style definition with loose specificity may target elements you did not intend in ways that are not immediately apparent or obvious. I think this is the most common cause of CSS frustrations ("Why on earth will this div not let me set a top margin?")
Always specify every single style you wish to apply for a given defintion
For example, if you want all your paragraphs to have pink text, set the text colour to pink and also set the margins/padding/background colour/font and so on.
Don't rely on browser defaults to be suitably consistent. Certainly for the most commonly used elements the main browsers tend to use very similar if not identical default styling.
If you set all the relevant styles yourself you know what the end result should be.
If you only set those styles that are most immediately obvious, the end result will be (most likely) a combination of the browser defaults and your styles. This will eventually catch you out at some point. I think this is the second most common cause of CSS frustrations.
Use ids for styling unique elements
It's generally a good idea to apply an id attribute to any unique element that is going to be interacted with in any way. For CSS this will let you apply suitably specific styles more easily.
Use an id on a unique page
Pages that are significantly different in style and layout to the majority (homepage, search results, 404) should have an id on the body element. This gives you the specificity you need to ensure that your careful homepage styling doesn't get affected by styles you later apply to some internal content page.
Pretty coding style VS site speed
I've been working with pretty huge CSS files, and found out some pretty interesting things that I've never read about before.
#import
One thing is using #import. That's actually a bottleneck - by going away from using #import completely, the site got a lot more snappy.
#every .style { in one line }
When the browser reads a document, it reads line by line, so by switching from my pretty coding style to this, I accomplished 2 things;
A even more snappy site
Less scrolling, better overview. Why? Cause I first scroll down to find the style I'm going to work with, then it's all in the same line and it's not hard to scroll your eyes along the line to find what you're looking for.
The main good coding style is to actually separate css files according to their goals.
See Progressive Enhancement.
That way, whatever coding convention you will choose, you will have consistent and manageable separate css files... easier to debug.
When I code in CSS:
In first part I write the class and id
In last part I write the general element (p, font, etc) because the class and id have more importance for inheritance
I write comment if I want a particular behaviour with IE or with MoSE Browser
You can see some example in CSS Zen Garden
Generally I insert the most important elements over the other: if there's
p.important{/*features of a class*/}
p {/*features of a general element */}
Reading the CSS file I know the format rules before about the most particular elements, after the rules about the most general elements.
It's an habit in programming Java.
Put your css rules (ex: "color: red;") in alphabetical order and also put your selectors (ex: "div { color: red; }") in order they appear in your markup. Separate code for structure from skin.
Just from experience I used to write quite long CSS style sheets. Now my style sheets typically are half a page.
So keep it simple(KISS), line based (greppable) and keep it compact (use font: instead of font-size etc etc.).
Also I highly recommend using CSSlint to check your code for fluff.
Check Sass out. It's a template language for CSS that makes your source code DRY:er and mucho easy to read. Even if you're not using ruby you can use it for this task and automate the building of your css files from Sass source. And there are probably Sass implementations in other languages too.
There's probably loads. At our work we use the following:
/* =div a comment about my div */
div#mydiv {
border:1px solid #000;
}
The =div allows us to search against all div elements by using the search functionality. There's loads more though, I've used many different variations of this in the past.
In addition to what others said, remember that the C stands for 'Cascading', i.e. subelements inherit from top level elements. Sound simple and straight away. But I have often seen CSS files that contain redundant declarations, e.g. for font styles. This makes a CSS more complex and hard to maintain.
So before you add something to your CSS make sure that it is not redundant, i.e. check parent elements and remove redundant declarations from children.
Given this you should organize your CSS in a way so that high level elements (like declarations for the body class) are mentioned first and more specialized elements last.
This might also be helpful, a few tips to keep your CSS styles DRY - as in "Don't Repeat Yourself" link text
I will strongly recommend looking at Less: http://lesscss.org
While not really a standard, it has been gaining a lot of momentum recently. Less is css extension that runs in the browser bringing variables and functions into the language and therefore allowing templating.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I have a couple CSS files with overlapping CSS selectors that I'd like to programmatically merge (as in not just appending one file to the end of the other). Is there any tool to do this online? or a Firefox extension perhaps?
I found Factor CSS - complete with source code, but I think it does way more than I'd need. I really just want to combine CSS blocks that have the same selectors. I'll check out the source code and see if it can be converted to something usable as a TextMate bundle. That is, unless someone else manages to get to it before me.
EDIT: Even better - here's a list of web-based tools for checking/formatting/optimizing css.
No I wish there was but the programming effort seems too much since there are multiple ways to reference a single element. The best that you can do is use a runtime like FireBug to find duplicates.
I wrote a Perl utility to do this several years ago.
As well as merging one or more stylesheets into a single coherent sorted output (complete with comments to show which file(s) each property appeared in, and warnings when a property has conflicting values), you can also selectively search or merge based on the selector, the property or both.
These are handled intelligently so that, for example, if you search for the property font you also get font-size, font-weight etc (still presented inside CSS blocks with the relevant selectors that they were taken from). Likewise, selector searching tries to Do The Right (ie generally most useful) Thing. If you search for, say, the element a, it will match any block whose selector is a, a:hover, a.extlink, a#mylink, .foo a, #bar a, p a, pre > a, a + p, a img... (the last two don't directly affect the styling of the a itself but of an adjacent or descendent element, which it is often useful to know about in such a search), without matching #a, .a, etc. Of course this behaviour is optional, you can also search for an exact selector. Or a regex.
Apart from perl itself the only dependency is CSS::Tiny
It's free software, and you can get it here: cssmerge