9 ms·
Single Line CSS
- treyp 16y agodecent IDEs like Aptana will make browsing stylesheets much easier. like methods in an object, it lists all definitions and allows for alphabetizing and clicking to jump to that specific definition. ...not that there isn't a use for organizing a certain way (like this article describes) in the first place.
- blasdel 16y agoYou don't need an IDE, just a damn browser with a web inspector. You have two independent compatible implementations of hypermedia lisp machines, both open source and installed on hundreds of millions of end-user machines. You can click any live object to inspect it, with tracing debuggers, REPLs, I/O analyzers, multiple domain-specific object browsers, etc. There's not really room for anything between that and a text editor.
- karanbhangui 16y agoI like to indent my CSS to resemble the structure of the DOM it's styling: http://addepar.com/style/style.css http://addepar.com/style/style.css
- lubos 16y agothis is cool, thanks for sharing
- karanbhangui 16y agono problem :)
- blasdel 16y agohttp://sass-lang.com/ http://sass-lang.com/ is YAML-style and uses pure indentation, but is overly sugared. http://github.com/cloudhead/less http://github.com/cloudhead/less is a purer subset of CSS where you just nest rules inside the curly braces.
- raimondious 16y agoSomeone made a LESS plugin for Coda, then turned it into a standalone app: http://incident57.com/coda/ http://incident57.com/coda/.
- deleted 16y ago[deleted]
- nex3 16y agoSass 3 will support a desugared syntax: http://nex-3.com/posts/96-scss-sass-is-a-css-extension http://nex-3.com/posts/96-scss-sass-is-a-css-extension
- JoelSutherland 16y agoThis is really well formatted CSS. It combines the best of both worlds which makes it really easy to understand at a glance.
- lubos 16y agoI'm doing it exactly this way as long as I can remember for compactness.
- wwortiz 16y agoI don't mind compressing css after you have written it but if your only reasoning is finding selectors I must disagree. C-s is for navigating and the more traditional styling leads to easier editing as it is easier to move across lines than across words. -a keyboard editor
- bwh2 16y agoI've tried this method and have three observations: * Navigating to a given style attribute for editing was slower than standard format, presumably because instead of browsing to attributes via up/down arrows, I was now using left/right. The home and end keys also became less useful. Likewise, mouse movements were slower because not all the attributes were left aligned. I also use a 16+ size font, so narrow left-aligned CSS suits me well. * I wasted too much time trying to correctly align/indent my code * I wasn't quickly able to recognize patterns in the CSS. So my id:class ratio was higher than normal because I didn't have that consolidation.
- raimondious 16y agoThere's something to be said for both methods. Multi-line CSS is easier to read/edit when you're actively building something because you are constantly moving properties within and across selectors. You're not likely to need to search for a selector because you probably have most of it in your head since it's all been written recently. In other words, inserts have greater importance than reads. When you're maintaining a site, single-line CSS may be best. You may have forgotten the lay of the CSS, so the structure of it should be understandable at a glance. This is enhanced by the readability of comments, which have more impact when you can see all the CSS they are referring to at once.
- potatolicious 16y agoThis almost calls for some kind of plugin/script that converts this. It'd be insane to have a keyboard shortcut that will take the current selector and single-line/multi-line it.
- sharkbrainguy 16y agocss-tidy does a few different formats. You could alias a couple of different sets of options to e.g. `css-compress` and `css-expand` and just pipe your buffer through them.
- JoelSutherland 16y agoHere is a tool that does just that. http://www.newmediacampaigns.com/page/single-line-vs-multi-line-css-a-tool-to-end-the-debate http://www.newmediacampaigns.com/page/single-line-vs-multi-l...
- jjs 16y agoOr just see if your favorite editor has a folding mode.
- thmz 16y agoOr some navigator (map) like there is in Netbeans. And also question why you have 1000+ lines of CSS. news.ycombinator uses only 31 selectors. And it looks.. well maybe not great , but very readable and very useable (I like it a lot). And I think it's better to have more classes defined in your DOM-object than doing the same stuff multiple times. I mean, most of the time widths, margins and paddings are reusable. So why not create classes for them.
- dimarco 16y agowould a folding mode turn a CSS dec like: .selected { color:white; } into .selected{} or .selected { color:white; }? Most folding modes that I've seen makes the block hidden, which is nothing like what single line CSS is.
- FlemishBeeCycle 16y agoHis main complaint was finding selectors ... so, if we're going by the article that shouldn't work fine. But really, if you plan your CSS instead of applying edge-case band-aid over edge-case band-aid, this becomes a complete non-issue.
- grayrest 16y agoVim's folding shows the first line, so it works fine there.
- tamersalama 16y agoWill try that. I still find myself using Ctrl+F a lot when editing CSS. Sometimes even growing it further than needed as Ctrl+F becomes mundane. Should CSS be approached more like code rather than like markup? Haven't tried that yet.
- mdolon 16y agoI blogged about this a while back at http://devgrow.com/best-bet-css-practices/ http://devgrow.com/best-bet-css-practices/ For practicality I find myself using multi-line CSS during development and use a CSS optimizer before going live, which makes the code look a bit cleaner and reduces overall file size (albeit not by much).
- niyazpk 16y agoI think this is something which you should let your IDE handle. Most decent IDEs have code folding and quick search. Also keep in mind that many elements in your website can have an average of 4-6 attributes. If you are using browser specific enhancements or hacks you can easily have more than 10 attributes for some of the elements. Now think about performing that dreaded horizontal scroll in your editor to find some of the attributes. Let the IDE take care of abstracting away the actual file structure. Let your build process take care of minifying the css files. Conventions are good in programming, but single-line css looks like a bit too extreme trade-off.
- cpetersen 16y agoLove it, I've been using the single line technique for about 6 months now (I used multi-line for years prior). It's definitely easier to scan.
- rohitarondekar 16y agoHow about using a hybrid method? Use single lines for selectors that have at most 2-3 attributes and use multiline for >3 attributes.
- oomkiller 16y agoI don't see a point to this. Textmate can collapse all of the blocks, so you get the same effect, without losing the readability if you want it. Also, who visually searches a css file? I just use CTRL-S in Textmate or Emacs.
- earnubs 16y agoMakes it easier to sort in Vim; 'ggVG!sort' will sort your css alphabetically: .bar .apple {...} .foo .apple {...} .foo .banana {...} .foo .cherry {...} (I also have a wee script that sorts the declarations alphabetically too.) I prefer the style, I find it much easier to write, edit and maintain.
- mattwdelong 16y agoWould you mind sharing this script with HN'ers?
- earnubs 16y ago#!/usr/bin/perl -w use strict; # from selected block in vim: !scriptname.pl while (defined(my $line = <STDIN>)) { $line =~ m/^(.*)\{(.*)\}/; my $element = $1; my @list = split /;/, $2; @list = join ';', sort { $a cmp $b } @list; print STDOUT "$element" . "{@list}\n"; }
- piramida 16y agoHave used single-line since 199x when we saved bytes by writing compressed css, and switched to expanded several years ago just because it is easier to read and modern debuggers/editors use that style. Don't see any reason to revive 'oldskool' practices which are worse in readability.
- jaekwon 16y agoI love sass, a different approach.
- DougBTX 16y agoAnother benefit of this layout is that you can stack similar rules to make their relationships clearer. For example: div.red { background: #f00; border: 3px solid #c00; } div.green { background: #0f0; border: 4px solid #0c0; } div.blue { background: #00f; border: 5px solid #00c; } In multiline mode, it might not be so clear that they are related. We are experimenting with lessCSS here, in theory it might make this go away, in practice lessCSS seems quite buggy, so we are not using it for much yet.
- nex3 16y agoMay I self-promote and suggest Sass (http://sass-lang.org http://sass-lang.org)? It's much older and less buggy than Less, and the currently-in-beta Sass 3 supports a CSS-style syntax (http://nex-3.com/posts/96-scss-sass-is-a-css-extension http://nex-3.com/posts/96-scss-sass-is-a-css-extension).
- gamache 16y ago+1 for Sass. Sass allows me to apply the same modularity and reuse principles to my CSS that I do to my code, so writing it is much faster and editing it is much easier. I played with a few other CSS processors over the last few years (Less, Moonfall, one or two others) but Sass is clearly in the lead. Thanks nex3 for a very useful tool. (Oh, and FWIW, I use it on a Perl website. You don't need to be on Rails to use Sass.)
- shadowsun7 16y agoI usually do single-line inserts for global elements like blockquotes and links. For the rest - no way.
- ocharles 16y agoNo No No. This completely screws up diffs and code revision tools.
- raimondious 16y agoWhile I agree with you, don't you think it's a little screwy to change your writing practice for the benefit of your tools? You should be able to write any way you want, your tools work for you.
- bandushrew 16y agoDoesn't that cut both ways? I write the way I want by spreading the css over multiple lines, and the tools that I use provide a symbol view that lets me find selectors quickly and without fuss....even ignoring the 'Find' panel. Im fascinated by the idea that I should break something as important as effective source control to fix a problem as simple as finding a specific selector in a file.
- raimondious 16y agoRight, I agree that the trade-off of pretty CSS over good source control is a bad deal, but it's the fault of the source control tools for requiring you to write in a certain way. Edit: In my original comment (can't edit it now), I should have said "isn't it screwy to need to change your writing practice..."
- eagleal 16y agoI've used single line CSS for 2+ years now. I find it better at both reading and inserting/edit (I find it weird to read/write Multi-line ones). I used to sort by layout-appearance (important layout first, than appearance), but have now switched to A-Z sort of properties for maintainability (if others have to look at your code, you have to think about them). However ocharles is right about the fact that it screws diffs (as long as they are per-line oriented).