What is Digg?64 Comments
- chris9902, on 10/12/2007, -4/+45or use @import and split the files up.
- astatine, on 10/12/2007, -0/+38The article misses an obvious point:
/* Use Comments */
It can break sections up for readability, and assist searches through the text. - xeeton, on 10/12/2007, -3/+33His point is that you should limit the round trips to the server.
- chris9902, on 10/12/2007, -2/+25downloading a couple of 10kb files is much less of a hassle then downloading 1 50kb file and having to maintain it.
plus if you were to ever update that file then the user would have to download the whole 50kb again but if you have 5 files and change 1 they only download that. That makes more sense to me. - chris9902, on 10/12/2007, -6/+23I don't know where you get that idea from.
you can have a number of stylesheets for print and screen (and even handheld). And have you ever tried maintaining a javascript library in 1 file? no chance. - Jelloman, on 10/12/2007, -0/+14You can get the best of both worlds with server-side includes: low number of HTTP round trips, but easier to maintain by having a larger number of smaller files.
- chris9902, on 10/12/2007, -0/+12If you've ever coded anything then come back to it months later without comments you'd know.
Plus it's just good practice. If anyone was to ever work with your code apart from you it would be nice to know what's going on. Not just CSS but all languages. - sembetu, on 10/12/2007, -0/+11That's what I do.
I generally break my CSS up into logical parts, such as "global", "header", "navigation", "content", and "footer". Anything else ends up sub to one of those, and I separate them with clear comments, like this:
/********header********/
Header styling goes here
/*****end header******/
This way, if I have long sections of styling, I can tell where I am at the end of the style section, that way I don't get lost. Also, it reinforces the separation of the sections for me.
Beyond that, I generally keep everything pretty agnostic so that I can reuse the basic structure for any other projects I have. Also, I generally have a standard list of my typically styled elements, and I will usually keep them all in the file regardless of whether I use them or not, that way, if I need them later, I can easily find them without having to decide where to insert them. While those elements are "waiting" I either comment them out or just delete the styling between the curly braces.
Also, as far as size goes and all of that... Some folks argue that you should get as much unnecessary text out as possible, and although I don't favor bloat, I generally leave unstyled "templating" elements in for the sake of ease of use, rather that worry about trimming those last few hundred bytes. Its just a trade-off. - sembetu, on 10/12/2007, -0/+7I also think this guy takes indenting too far. I indent, but only the actual style part of the classes and selectors:
#selector {
---style;
---style;
---style;
}
.class {
---style;
---style;
---style;
}
That usually covers it for me. Beyond that and it gets kind of silly (IMO).
( substitute spaces for the hyphens... digg edited my spaces out) - sembetu, on 10/12/2007, -0/+7It is just good practice, and it makes your CSS more readable and manageable.
- etnu, on 10/12/2007, -3/+8The cost to a user for multiple round trips is HUGE. You should simply concatenate your files together. Keep them separate for development and debugging, then crush them together, strip out comments, unnecessary whitespace, etc., then serve that for production.
- CaptShmo, on 10/12/2007, -5/+9good article, but this guy is kinda anal... alphabetically ordering elements? c'mon now...
- cwmonkey, on 10/12/2007, -2/+6I would murder any coworkers that indent selectors. I like to be able to quickly scroll down the stylesheet and see all the selectors on the left.
- WiBu, on 10/12/2007, -1/+4I use a comment for a title of the section then a prefix for stuff which goes in that section and a suffix for what it is:
/* Header */
#hd_updated{...}
#hd_network{...}
#hd_title h1{...}
#hd_title a, #hd_title a:link, #hd_title a:visited{...}
#hd_title a:hover, #hd_title a:active{...}
Works great for me and when other people pick it up they usually get the hang of it pretty quickly. I usually strip the comments out when putting it on a live site though, I don't want comments which mean nothing to the end user clogging up the tubes! - theotherlight, on 10/12/2007, -0/+3If someone indented my CSS file like the article suggests I would be severely displeased... and quite disgusted just at the sight of it.
As someone above suggests... comments are more than enough, and splitting up files where absolutely necessary. - northerncomfort, on 10/12/2007, -3/+6I use Smultron, actually. CSSEdit is a very nice program, but I have yet to put it to use in a project.
- fkuall, on 10/12/2007, -1/+4the windows alternative i use is notepad++, works like a charm for me
- cherouvim, on 10/12/2007, -0/+2So, if you want to move that #hd_updated to the footer, you have to change the html and css to say #ft_updated?
- sembetu, on 10/12/2007, -0/+2I do, but I can't do that in the comment box on digg.
- chris9902, on 10/12/2007, -2/+4Douglas Bowman has a good article about this but he calls them "flags"
http://www.stopdesign.com/log/2005/05/03/css-tip-flags.html - kasted, on 10/12/2007, -0/+1another good way to make your css clean, is putting your syntax in order like so:
#lol { width: x; height: x; ; then style stuff here, and last but not least typography }
just my 2 bits - eponym, on 10/12/2007, -0/+1Interesting idea for organizing (the article). I've tried a couple ways. Lately I've been favoring grouping by element. And then if needed, having multiples of the setup for each section.
/*--------------- [ < p > ] ----------------*/
.className {
---style;
---style;
---style;
}
etc... - Grumps, on 10/12/2007, -0/+1Comment + Indent + Alphabetically works the best
/* Comment the ID */
#id {
aproperty:value;
bproperty:value;
cproperty:value;
dproperty:value;
}
#id .class {
aproperty:value;
bproperty:value;
cproperty:value;
dproperty:value;
} - TriggReaver, on 10/12/2007, -0/+1Interesting formatting, but like previous commenter's have said, better to use @import and split up your css styles into several stylesheets rather than making one mega-huge css file. I agree about the section where the writer suggests to use the full path when possible, it's just easier to read and organize. I don't know about alphabetizing the attributes though, it's one way to go I guess.
Another good formatting style is to create headers to group styles
i.e.
/*--------------------------------------------
Typography
--------------------------------------------*/
#style1 {
}
#style2 {
}
/*--------------------------------------------
Layout
--------------------------------------------*/
#style1 {
}
#style2 {
} - champs, on 10/12/2007, -2/+3... or you could just use a single tab.
/me ducks. - gameguy43, on 10/12/2007, -2/+3we need more webdev tutorials up on digg. kevin, please make an individual web development section.
- lunchbox170, on 10/12/2007, -0/+1Yeah I always comment my CSS
I use jedit too - briefcrossing, on 10/12/2007, -0/+1Underscores are generally problematic within CSS class and ID names, especially for older browsers.
See: http://devedge-temp.mozilla.org/viewsource/2001/css-underscores/ - dbr_onix, on 10/12/2007, -0/+1Surely alphabetically arranging all elements will be harder to read than arranging them "logically". I.e putting things relating to position together (Like width/height, top/left etc), colour stuff together etc etc..
Not done a lot of CSS-based-sites (only recently started learning it), but I tend to intend stuff like :
/* Boxes on index page */
.index-button-background {
---left: 30px;
---top: 278px;
}
---.index-button-mailing
---{
------left : 181px;
------top: 278px;
------height: 155px;
------width: 123px;
---}
(3 hypens = 1 tab)
It makes it easier to find related sections, having a linebreak after each section name (before the { ) makes it easy to match up pairs of curly-brackets (More usefull in languages like Perl, C and PHP, so it's more of a habbit than anything..)
- Ben - tdskate, on 10/12/2007, -1/+2this article came just in time for me.
- looksliketrent, on 10/12/2007, -0/+1Alphabetically ordering things can make searching for a specific style/definition incredibly easy, especially for larger/longer files. You always know whether it's above or below your current viewing area!
- Frankie4Fingers, on 10/12/2007, -0/+1If you use a proper program, it will put elements in alphabetical order. Also, not all people use Dreamweaver or a program that shows you all the selectors in a big list. You obviously haven't worked for a large project that is supposed to be professional, and I don't mean the little shop on the boardwalk of town, I mean a fortune 100 company and a project > 1M in funds. On these projects, it is important to have a good standards and guidelines document that includes a definition of the style class and what it does and where it is used. So not only should you put the styles in order you should also make it apparent where the style should be placed in the html code.
- dotdan, on 10/12/2007, -0/+1One of the main benefits of CSS is the fact that it separates style from content, and in the same sense, one style can be applied to many pages of content, all of which differ. I've found that structuring everything alphanumerically, rather than by structure, makes working with a style sheet much easier.
- zoltanthebold, on 10/12/2007, -1/+1I think this is all too anal. Who has time to neatly order elements like this? I don't, at least not on commercial projects.
I use commenting in the CSS file, using fairly intuitive chunks of the HTML page as headings:
/* Main Navigation */
...and the like. If you use something like Dreamweaver it hardly matters anyway.
As for putting style elements in alphabetical order? Is that a joke? Someone has a little too much time on their hands. - SkiShakakai, on 10/12/2007, -0/+0If you're looking for an easy way to structure your CSS and javascript files, check out this tutorial: http://forwarddevelopment.blogspot.com/2006/11/optimizing-page-loading-in-coldfusion.html
Its geared towards ColdFusion but can easily be used by any other server-side language. - Glendz, on 10/12/2007, -0/+0The only thing I didn't do in what he posted was doing alphabetical order of properties of an element. Interesting. :)
- savageplay, on 10/06/2008, -0/+0My work has asked me to write a documentation of my HTML & CSS code and this is my current working draft. Maybe it'll help someone else or maybe I"ll get some positive comments on stuff i can do better, but i am in the same point as alot of people here, i generally do not have the time to have my code to be as extremely neat & tidy as I'd like. There are alot of class names and ways optimization i know i can do, but to me its more about making things modular and doing it fast. Clean & optimized, though important they are often bonus' to getting the project done on time.
http://austin.servershost.net/%7Ecbutcher/dev/Docu ... - monkeychewtoy, on 10/12/2007, -3/+3a {}
a.hover {}
a.link {}
#anal {}
b {}
Seriously though, alphabetizing can be very handy for keeping things neat. - isleshocky77, on 10/12/2007, -4/+4I'm surprised it took so long for someone to say that.
- thedom, on 10/12/2007, -0/+0Can't we agree to disagree and just arrange the styles in a table...?
- Huvet, on 10/12/2007, -1/+0Comments are great for explaining things in code that are hard to understand. But writing /* header */ #header is just repeating yourself. Comments should be used when your code is hard to read or understand, but not more than that.
- adamtj, on 10/12/2007, -1/+1I use skEdit - http://www.skti.org - works great.
- osubz3ro, on 10/12/2007, -0/+0Everyone writes CSS in thier own way. This just so happens to work for the writer. Yours probably works for you. Could we get a positive comment here? Personally I like well organized and clean style sheets, esp when you have multiple people making edits. Need I say more?
- Huvet, on 10/12/2007, -0/+0Why not add the p to the selector instead? Commenting just for the sake of it leads to mess in my experience.
- Respec7, on 10/12/2007, -1/+0@WoollyMittens
Nice! Good idea I'm gonna use it - Frankie4Fingers, on 10/12/2007, -4/+3I use the best package out there for css cleanup and creation, it is called TopStyle. http://www.newsgator.com/NGOLProduct.aspx?ProdID=TopStyle
It can do anything. - joaob, on 10/12/2007, -7/+6that's ok when developing for yourself. but nothing says unprofessional like a messy css file.
- WoollyMittens, on 10/12/2007, -2/+1I use this little handmade script to make a complete structured empty stylesheet, based on the HTML of a document. I find it very useful to get started on the styles.
http://www.woollymittens.nl/weblab/app_makestylesheet/index.htm - REpler, on 10/12/2007, -5/+3Why do I need to structure them? That didn't seem to be in the article. Is there a speed increase somehow associated to the way it gets parsed?
You gonna tell me how to sort toothpicks next? -
Show 51 - 57 of 57 discussions
Check out the new & improved 
© Digg Inc. 2009
— Content created and posted by Digg users is