I used to group according to structure, but really what does that mean to a HUMAN.
I saw an advert for a company that say they were looking for a coder who “organized his CSS, alphabetically”… which just said to me that they missed the point of what organization actually DOES. Not to mention having to rearrange the whole thing every time you make or rename a class or ID.
What I was suggesting is that you CHUNK your CSS into it’s relevant potions. I have only coded for a couple of years but i found that I always had :
resets and general classes. For example you may always use .clearfix{} or .center{margin:0 auto;}, etc.
then the part that concerns the layout. usually mostly done with IDs., tons of size and background image work, floats… what ever it takes to get the page to lay out the way you want it.
etc etc.
Nother benefit to this is that you can reuse code. if you liek the way you did the type in one site or if you are working on similar layout.
A hyperbolic example for clarity. I don’t really run 1000 classes (or 1000 rules, for that matter) in one sheet - even though it sometimes seems that way when I’m looking for the one I want.
I use much the same approach. I started with the predefined tags such as <h1> and <p>, then the basic page structure progressing from container to topbanner to footer. That part pretty much stays organized. I run into trouble when I start creating classes that are used in just one or two specific places. They add up quickly and hide even faster.
1000 classes??! I would hate to see the number of IDs you make. I am sure you meant 1000 rules. I like to organize my CSS the same way I organize my CDs, by current favorite; it used to drive my roommate NUTS.
No, seriously. I take the following steps.
look for duplicate declarations. If you have a rule count into the 100s, chances are that you have used individual declarations for the same rules.
.myclass { background:green; height:100px;}
.another { background:green; height:100px;}
.somemore { background:green; height:100px;} Could be easily rewritten:
.somemore, .another , .myclass { background:green; height:100px;}
this saves bandwidth and helps organize the code. Additionally i there is a logical reason why all the rules are the same it become easier to modify stuff later on ( one change instead of 3).
it helps to separate resets, common, function, layout ,typography and overrides . I chunk my code into these segments. Overrides I always put at the end, for obvious reasons, it may also include any IE hacks.
if for some reason this is still not organized enough there is always breaking theabove sections into their own files and using links or @imports.
That sounds fishy to me – if the time and effort put into import/export in excel (of all things)… I mean at that point, why not just type it in properly from the start?
If you are finding that helping, I would suspect there’s probably something fundamentally flawed with your markup or CSS approach in the first place… like a nasty case of “not every DIV needs a class, not every element needs a DIV around it and not every element needs it’s width set” or some similar phenomenon.
The only time you should need a ‘tool’ is for cleaning up other people’s messes who still think it’s 1997… and for that we have dragonfly/firebug.
If you are making it yourself there’s ZERO excuse for not being able to type it in PROPERLY in the first place – but given that from what I see of most other people’s work with a total lack of understanding of the cascading part of “cascading style sheets”, lack of grasping the simple rules of specificity, or even recognizing the advantages of one property per line and single tab for properties formatting, it’s no wonder there are those who want some sort of tool to sleaze their work out for them.
But again it’s only as complicated as people make it… and mein gott a lot of people make it complicated.
Well, juffrouw poes, I can’t say how most places do it, but your place is not doing it in a good manner. You’re violating the separation principle. The template is the structure (html), and it belongs to you. The mid-tier guy should export the variable arrays to the template. He can call them what he wants; he just needs to tell you what’s what so you can use them as you want. Likewise, you send him forms with name/value pairs, and he can use them in any way he wants.
With the separation, you can alter the html via Smarty without his having to do a thing to accommodate, and he can alter his logic without your having to change anything. Only the API need remain unchanged.
It just happens that how it works here at my job, WE humans also end up looking at the production code : )
Amen, Sister. When source gets squeezed, the original fluffy code tends to get lost, or at least is not available to the guy who has to maintain it.
I’ll actually use “content” and “button” and “wrapper” for my names, because there’s nothing else to them (no other names). I haven’t had quotes in my pages but if I did, I’d use the q element (Gary Turner has a nice example of how to actually get those elements to work in HTML/CSS also in IE on his page here <–scroll down to “Second Thoughts”… this is what I’ve used the one or two times I’ve had quote elements).
However do you keep track of all those references? Thanks for the citation.
The thing is, in web development, the development code is the production code. HTML is a declarative structure language, css is a declarative presentation language, and ecmascript (javascript) is interpreted, not compiled, so it too is the production source. Javascript and css are both cached, so have only a trivial effect on bandwidth.
I read somewhere that we should act as if the person who maintains the site is a violent psychopath who knows where you live. Seems like a good idea to me.
I have my CSS in separate files:
- reset
- layout
- content
- forms
This makes managing different items easy and keeps everything simple. When the files are on the server they are merged into one file and the file is then cached. And that is the file that is called rather than several separate files.
I find this method to be perfect for me however there are some who dislike the method.
no, it’s like real programming. even though html doesn’t compile, and even though such an automated software doesn’t exist yet, a correctly done minify on all html, css, js code would never alter the appeareance, that’s just silly.
and in real programming reverse engineering it’s harder than reversing the minify, but still, programmers manage when disaster strikes
edit: but you can see on your developing code version what’s all about. your production code will look like .wa1 etc.
I understand that their is two copies, but it’s still a nightmare to manage. I don’t know of any automated software that would rename your classes to .wa1 etc and shrink your code.
I used minify on the site, and in some processes my code did not work properly afterwards. It altered the appearance, particularly with hovers and buttons.
I know you probably save some space, but saying this, the risks are too high. I have had many instances when I lost the clients html site, and because I had the original html online I saved myself some potential problems.
There are ways to reverse this minify, or compression process, but it’s never guaranteed, and it’s almost like playing with fire.
Edit: If I wrote my code with .wa1 etc. I certainly won’t be able to know what’s going on, so writing this natively would be out of the question
thank you ds60, you are offering a concise and in a proper english articulation explanation i could never do. but i do my best although i have to say it could also be used for internet deployment. site’s code doesn’t have to be pretty. you don’t introduce the code, you introduce the content to visitors and users.
You missed what he’s saying – which is maintaining two copies - a verbose non-stripped one you do all your edits/maintennance on, and a stripped one you deploy. What is typically called a “production” copy and a “deployment” copy.
IF you have sufficient control over the project and are not deploying it in the wild (like as something other people can use on the internet) and are only restricting it in-house where you KNOW the ‘production’ copy is always available, what he’s saying is sustainable. It just falls apart for internet deployment – at least if you are working for a client and it’s not some little personal project. Sustainability of that practice comes down to the scope of the project – and since apparently everything noonnope does is intranet related… it’s no shock it doesn’t make a whole lot of sense with the larger target base.
But for some wierd reason with his use of English, much like the rest of his gibberish he seems to think “copy” always means a 1:1 exact match – which of course it does not. Copy can be degraded, changed, etc.
Just chalk up the misunderstanding to an entirely different understanding of what words mean and how they are used.
what i’ve said all along: the code you have now it’s like the code for development. i do some additional work to cut its size down by using a technique known as minify, and to simulate what a compiler does for you: it renames variable names, class names, function names etc. kinda what jQuery is looking like.
if the process was fully automated, which i have on my mind to do, then yes, in its “compressed” form would make less sense. but all connections would be kept between the three layers: html, css, js, and you’ll have to always use for mods the dev version. any mods.
Link or it didnt’ happen. I just re-read that thread and can’t find that anywhere either… though once again maybe I just failed to understand your broken engrish.
Of course, asking for proof or examples is instantly being childish – right. Gah, feel like I’m dealing with a theist. “I have my proof I don’t have to show it to you…”
you must remember, i asked you’re permission to use your code to make my case. you never answered back. and it was also because you were acting the same childish way
some automation to show classes that you are currently working with?
I think that would be brilliant!
so far I just scroll to the css file section of interest depending on where firebug points me
again, i want to be clear: it’s for the sake of argument, i have no intention painting wrong colours
what if that element after the floats doesn’t have a class or id name, and the css selector possible for it, without using class or id attributes, is not cross-browser possible? would something like this force you to add a class?
is adding a class name a semantic must always? what if i need to put an id name in there somewhere that has nothing to do with either content or presentation but information: stored, transmitted, received, that it’s not “real” content yet?
that’s why i really liked what Sp included as a supplementary reading in the post above: things need to work first! correctly!
speaking of semantics is approaching natural language barriers of (mis)understandings (angrish :)) that have no place in developing. developing is not painting or sculpture or belletristic: strict rules you have to play by should help reading code without resorting to semantic names.
What, asking for PROOF of your wild nonsensical claims?
Tense man, learn how to use tense.
Oddly, I thought I was the one who said that – since you NEVER actually produced working code for it! I was still waiting for you to produce something that actually involved code and worked! Until then, there was nothing to even respond TO.
You talk the talk, but without once EVER providing code examples to actually back up your claims your not walking the walk! In fact, if that was the thread in question I believe I called you out on that one as well for the exact same reason. “Oh I could do it better” – ok hotshot, then DO IT and SHOW US IT!
