TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Open Letter to Web Designers and Developers: Max CSS

67 点作者 iSimone将近 13 年前

22 条评论

richardv将近 13 年前
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.)<p>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.<p>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.<p>What would your main.max.css look like?<p><pre><code> .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 } </code></pre> When I read the title of this post, I thought that you might of been suggesting that developers maintain two sheets, a<p>[1] main.min.css<p>[2] main.max.css<p>Inside of the min CSS, you might use all of your layouting styles <i>and lightweight background styles</i>. However, inside of the max you would add all of your complementary styles.<p>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).<p>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.<p>The only benefit this would give is being able to detect a user agent and serve up the more lightweight version.<p>Anyway, big NO NO, for your suggestion. I can't get behind that idea.
评论 #4218324 未加载
评论 #4217924 未加载
5h将近 13 年前
A good command of chromes inspector etc makes this largely a non issue for me ...
评论 #4217944 未加载
Jare将近 13 年前
In general, if you want to make your source code available for others to learn, publish it on github or elsewhere.
评论 #4218319 未加载
krmmalik将近 13 年前
I consider myself both a non-designer and a non-programmer. I'm able to do basic things in Photoshop, and if i was really determined, i could probably replicate a decent design from somewhere else, but it would take some conscious effort. Similarly, I dont consider myself a programmer, but i can read javascript code, and i've done a little bit of programming here and there but never completed a full web app journey from start to finish as part of a team, or even on my own.<p>I finally took the leap a few months ago, and have started out on my own app. The thing that i have found most in my journey is that there seems to be a wealth of information out there for newbies - such as the htmlcss book or the w3schools site - and a wealth of information for people at a more advanced level - though i've noticed conversation between experienced devs is what is helping them. There doesnt however, seem to be much targeted at the intermediate level of developers that kind of get wedged in between a rock and a hard place (like me).<p>Take git or mercurial for example. Lots of information explaining what git is, what the advantages of dvcs are. Also plenty of tips and tricks and cheat sheets for someone already using dvcs, but nothing at someone that's understood the basics but wants to go up a level.<p>People like me are desperately trying to get to the next level in both design and development.<p>So i beg all of you that are at a more advanced level and have been doing design or dev for a considerable length of time, to please think about us intermediate people; us non-designers and non-programmers that want to create something great and have finally plucked up the courage to have a go. Help us out. Please.<p>I'm not saying that many of us, won't still try even if you dont reach out to us. The best way to learn, of course is just to dive in and keep cracking on at it, but if you guys were to think about us, it would make our lives just that little bit easier and more rewarding.
评论 #4218425 未加载
评论 #4218202 未加载
Tarks将近 13 年前
I think this is even more important for Javascript files. So many times I'll look at something to learn and find it's minified, which makes it a lot harder, there are tools to deminify but obviously a lot of semantic information is lost and then I can't step through etc.
评论 #4219263 未加载
fshen将近 13 年前
Try using Chrome developer tools or firebug to inspect css. Its's better.
评论 #4217832 未加载
pdenya将近 13 年前
Is this really a problem with css? javascript I can understand but with firebug or chrome inspector, CSS is basically self documenting.
评论 #4218752 未加载
mikegirouard将近 13 年前
Not a bad idea, though I'd just avoide the .max all together. Perhaps I'm missing the point and/or assuming everyone already does this, but I always make my <i>.min.css files from </i>.css (eg foo.css becomes foo.min.css).
zx2c4将近 13 年前
Better yet, just allow directory indexes on /js and /css, showing the smaller files that the minified one is built from. You can do this, and also minify them using a Makefile.<p><pre><code> zx2c4@albali ~/zx2c4.com $ cat Makefile JS_DIR = js CSS_DIR = css JS_MIN = $(JS_DIR)/scripts.min.js CSS_MIN = $(CSS_DIR)/styles.min.css JS_MIN_FILES := $(patsubst %.js, %.min.js, $(filter-out %.min.js, $(wildcard $(JS_DIR)/*.js))) CSS_MIN_FILES := $(patsubst %.css, %.min.css, $(filter-out %.min.css, $(wildcard $(CSS_DIR)/*.css))) JS_COMPILER = ~/opt/bin/google-compiler --warning_level QUIET CSS_COMPILER = ~/opt/bin/yuicompressor --type css .PHONY: all clean all: $(JS_MIN) $(CSS_MIN) %.min.js: %.js @echo "Compiling javascript" $&#60; @$(JS_COMPILER) --js $&#60; --js_output_file $@ %.min.css: %.css @echo "Compiling stylesheet" $&#60; @$(CSS_COMPILER) -o $@ $&#60; $(JS_MIN): $(JS_MIN_FILES) @echo "Assembling compiled javascripts" @cat $^ &#62; $@ $(CSS_MIN): $(CSS_MIN_FILES) @echo "Assembling compiled stylesheets" @cat $^ &#62; $@ clean: @rm -fv $(JS_MIN) $(JS_MIN_FILES) $(CSS_MIN) $(CSS_MIN_FILES) </code></pre> You prefix the js/css files with an order number.<p>js/000-jquery-1.2.3.js js/001-silly-jquery-plugin.js js/002-another-silly-jquery-plugin.js js/010-something-else.js js/100-fetcher.js<p>or whatever kind of ordered number scheme you like. This way, the Makefile's auto-discovery of the js/<i>.js and css/</i>.css contents will maintain order.
paulirish将近 13 年前
Source maps are the standardized way of defining the original source of CSS, JS and other compiled-to-the-deployed-web languages.<p><a href="https://github.com/h5bp/html5-boilerplate/issues/820" rel="nofollow">https://github.com/h5bp/html5-boilerplate/issues/820</a><p>In this thread I ended up proposing something very much like what Dan is saying here but realized (after Kevin Dangoor, product manager of Firefox's Developer Tools, chimed in) that indeed source maps were designed exactly for this situation, no authoring convention or filename guessing necessary.<p>Source maps not only can point to the original sources, but can translate between minified css and fully formatted Sass with comments, and developer tools can identify the mapping.<p>As for how ready this is, CSS source map plumbing is in both Firefox and WebKit, though they are not totally complete. I believe FF has a Google Summer of Code student working on the feature: <a href="https://wiki.mozilla.org/DevTools/Features/CSSSourceMap" rel="nofollow">https://wiki.mozilla.org/DevTools/Features/CSSSourceMap</a><p>Just because its relevant: all the source map projects: <a href="https://github.com/ryanseddon/source-map/wiki/Source-maps:-languages,-tools-and-other-info" rel="nofollow">https://github.com/ryanseddon/source-map/wiki/Source-maps:-l...</a>
Xion将近 13 年前
While the idea seems decent, it completely forgets about CSS preprocessors (LESS/SASS). When using one, the original 'source' stylesheets usually don't even make it into deployment server, for they are just used to build final CSS. Even if not minified, that CSS file would likely be pretty unreadable, not to mention that it wouldn't really reflect the original patterns and ideas used in source files.
SchizoDuckie将近 13 年前
Call me crazy, but why would you waste a user's bandwidth on this? Also, usually, there is a foo.css, next to a foo.min.css, why introduce a new paradigm?<p>on top of that, there's right click on an element -&#62; inspect, and it will tell you all you need to know, in any proper browser.<p>I really don't see a need for this.
评论 #4219584 未加载
mihok将近 13 年前
This takes out any or all learning curve for beginners. If we did this it would disrupt the web development industry, think of it like natural selection. Half of why web developers are so great is their resourceful. I just see this as a terrible way to teach people to copy and paste. Creating myspace all over again
mnicole将近 13 年前
At the end of the day, I'm not writing my CSS for others to learn from outside of the // hidden comments for my devs that don't get compiled in the final CSS. There are tools out there to reverse engineer/un-minify CSS and JS files if they are so intrigued, and if they want to learn the best way for them to do so is to get down and dirty the same way the rest of us did and just learn what works and how it works outright. Having the Inspectors already gives them a leg up over a lot of us.
drivingmenuts将近 13 年前
I would say Firebug or Inspector is a better tool for poking around in CSS than trying to look at a raw stylesheet. There are hidden settings that you'll never see otherwise (that don't get used much, admittedly) and it gives you the ability to make a change and see how it affects the current page.<p>The CSS you see in those tools is real decompressed CSS (organized a bit better than most stylesheets) and is pretty much exactly what you'd put in a stylesheet.
talmand将近 13 年前
As I've been playing with SASS I had decided that I would place the resulting scss file in with the actual css file. My reasoning being very close to what the article states; my css file is compressed and comments stripped, the scss file is not. Granted, I would probably have to put a link to the file somewhere but it would be nice if this somehow became a thing people just did.
geekfactor将近 13 年前
Beyond Firefug and Inspector, there are also CSS prettifier tools out there like the excellent <a href="http://procssor.com/process" rel="nofollow">http://procssor.com/process</a>. That's about the best you can hope to do, unless you are expecting developers to put extra educational content in their maxified CSS files. Which ain't gonna happen!
EnderMB将近 13 年前
This almost seems like a browser problem for me, rather than a problem that developers should solve.<p>If you use Firebug or the equivalent across the browsers it's very easy to see the "maximised" CSS, but surely a setting to do this when viewing the CSS would be a good thing?
_dte将近 13 年前
Hi all. Thanks for your comments on this. I've addressed a few of the misunderstandings and concerns raised here on HN, Twitter et al over on my blog: <a href="http://daneden.me/2012/07/max-css-in-depth/" rel="nofollow">http://daneden.me/2012/07/max-css-in-depth/</a>
fshen将近 13 年前
Compress/minify everything: HTML, CSS, JS, Images. Less is more. Anyway, There are tools to help you understand the code if you take time to find it.
yuchi将近 13 年前
Actually should we give also the real source? What about SASS/LESS/Stylus? Uncompressed CSS says seriously nothing more than minified one.
taf2将近 13 年前
how about just use: <a href="http://www.codebeautifier.com/" rel="nofollow">http://www.codebeautifier.com/</a> ?