2 ms·
CSS is the easiest part of the design cycle. (The hard part is actually mocking something to look great.. implementing it is the fun part.) Creating CSS which
by richardv 14y ago
CSS is the easiest part of the design cycle. (The hard part is actually mocking something to look great.. implementing it is the fun part.)
Creating CSS which matches your design should not really be an issue, and as others have pointed out, if you see something on another website that you like, then you can just use chrome inspector which would always work by an order of magnitude better than using a main.max.css sheet as you suggest.
I'm not going to be elitist and say that learning CSS is a non-issue, but maintaining a commented CSS would be ridiculous. Especially when all of my CSS is automatically compliled (lessCSS) and comments are stripped.
What would your main.max.css look like?
.container {
border: 1px solid black; // This adds a solid black border
float: left; // Remove element from doc flow, and align left
padding: 10px; // This adds a 10px padding
background: white; // This sets the background white
}
When I read the title of this post, I thought that you might of been suggesting that developers maintain two sheets, a
[1] main.min.css
[2] main.max.css
Inside of the min CSS, you might use all of your layouting styles and lightweight background styles. However, inside of the max you would add all of your complementary styles.
Such as all of the background gradients. All of your vendor specific box shadows, border-radius', box-sizing, opacitys, etc. Getting background gradients compatible accross different browser vendors totally bloats my CSS (by about a 100-140kb (since I use alot of high quality gradients instead of png).
I could perhaps get behind the idea to seperate two sheets. One min.css for pure templating and layout, and a max.css for all that awesomeness.
The only benefit this would give is being able to detect a user agent and serve up the more lightweight version.
Anyway, big NO NO, for your suggestion. I can't get behind that idea.
- alttab 14y agoOf course this seems like a bad idea, especially since most developers don't bother to: 1) Fully think through what they are doing (clearly they are experts) 2) Comment their code, regardless of where it is in the stack Generally, when I comment code, I dont do things like "this adds a solid black border". Ya-don't-fucking-say? What should be done, is comment on how this piece of code relates to the larger system at hand, how it interacts with other portions of code, or what else it relies on to work, an example of where it is used, and what not to expect from it. If developers thought this way, we would: 1) Overall have better software in this world, as it requires that the developer think through what he is writing thoroughly instead of rapid-browser iterations and "it works I'm done." 2) Help other developers in our own project, and anyone else who is trying to learn from the source without the benefit of the context the code was written in. As time goes on I see developers getting comfortable with Ruby, Coffeescript, and the like. They don't comment at all because "the code is readable." Well, if it was readable, they wouldn't fucking call it code! All this really tells me is they don't respect their craft or anyone else who needs to interface or change that code after they've moved on. As professionals we should take pride in our work. If engineers built bridges like we do software many many people would die and software would be illegal. Now of course development is a little different as most software crashes don't kill people (although some certainly could), but don't use that argument as a way to get comfortable and not do your job with pride.
- Hovertruck 14y agoThat's not a very fair example. That would be like commenting Python like this: def foo(): # This defines a function a = 5 # This defines a variable, a = 5 return a + 5 # The function returns the value of a + 5 Not to argue in favor of or against max.css, but nobody comments their code like that. It's more about things like this: .ribbon-edge { /** * By setting the width and height to 0 * and having a really large border, we * can use the way the borders intersect * to create a ribbon edge for our header/ * This results in three angled red borders, * and one transparent, right-facing triangle * on the left side. */ width: 0; height: 0; border: 50px solid transparent; border-left-color: red; }