Slashdot Mirror
CSS Selectors as Superpowers
An anonymous reader writes "Simon St. Laurent writes in praise of CSS selectors: 'After years of complaints about Cascading Style Sheets, many stemming from their deliberately declarative nature, it's time to recognize their power. For developers coming from imperative programming styles, it might seem hard to lose the ability to specify more complex logical flow. That loss, though, is discipline leading toward the ability to create vastly more flexible systems, a first step toward the pattern matching model common to functional programming.'"
Anyone who has used JQuery will know how their power exceeds the original intention
Bollocks. CSS was designed to separate styling from structure in web pages. It does this admirably, and only needs to be a declarative language to do so. This prevents a lot of "clever" hacks that including conditional or flow statements would have encouraged. It's the same reason why statically typed languages are better than dynamic ones - since the tooling and compile time checks can be much more comprehensive and optimisation is easier - but clueless twats prefer the dynamic ones, since they don't understand the downsides or foolishly think they are so good they wont screw up. Improved programmer productivity claims for including flow statements in CSS (or using dynamic languages) are crap as well, since while a programmer might find it easier to cobble together something that just about works, chances are very high that it will be harder to maintain.
CSS is a DSL for styles primarily. It could be used for other stuff as well. There are libraries available in Java. However, I do not know of any C++ library. But google returns just a lot on the topic for "CSS c++ library"
CSS alongside 2 basic layers, regular code and HTML document itself, only creates additional unnecessary third layer of shit that eventually may introduce problems, as soon as someone starts playing with it
That's like saying MVC is unnecessary, and not just putting all your code in a single class/module/namespace may introduce problems. There are people that say that, but they are novices.
HTML5/CSS/JS is equivalent to MVC. The "VisualBasic" type people would tend towards trying to put everything in their HTML rather than the other way around.
Yes. Qt will let you style the GUI with what is effectively CSS.
You have no idea what you're talking about. CSS (and HTML for that matter) have *nothing* to do with programming. CSS is merely a way for designers to code a layout, nothing more, nothing less.
I do agree CSS could have been a lot better and there are definitely some errors which needs fixing, but the general idea of separating mark up and layout is a sound one and selectors is one of CSS' best features.
Pretty good is actually pretty bad.
If that's what you think, then you don't understand why CSS and HTML are separate languages. The implementation is by no means perfect, but its a very good example of Separation of Concerns (separating content from presentation, and in javascript's case, both of those from application logic), something that all too many 'programmers' don't seem to have any idea about. Then again if you're one of those programmers who see SOLID principles as over-engineering then I can understand why you might think that its an 'additional unnecessary third layer'.
All non progammatical web code has to do is describe a page. There is no reason on earth for requiring 2 completely different formatting languages - HTML and CSS - to do this. CSS is just a nasty hack on top of HTML which was already a hack anyway and along with embedded javascript its turned web coding into a total dogs dinner.
Why has functional - which is only midly declarative anyway but we'll let that slide - taken over the world like its proponents constantly tell us it will?
Don't you mean "why *hasn't* functional programming taken over the world"?
Anyway, it has. It's called Javascript and it's *huge*.
Pretty good is actually pretty bad.
I don't think so. The fact that it's code doesn't make it programming.
Pretty good is actually pretty bad.
It sounds like your'e confused. And I can't blame you, because there are *a lot* of different languages and syntaxes involved in creating a web application these days and it can be challenging to grasp it all. It helps to separate things in your mind. Even though the syntax of e.g. a JSON file may look a bit like a CSS file, they are completely unrelated. Make sure you know what you're working on (structure, style, client side logic, server side logic) and only concern yourself with the things that are related to that, nothing else. PHP for example has nothing to do with anything on the client, so don't even realize it exists when you're working on something in the client :-)
Pretty good is actually pretty bad.
It has the "function" keyword duh!
Javascript is much more a functional programming language than a procedural one. It's by no means as pure as Haskell, but this also allows it to be useful.
I suggest you read up on some of the articles by Douglas Crockford, who does an awesome job of explaining the true nature of Javascript to the world. This is a good starting point.
If you don't believe Javascript is indeed a functional programming, here is a Google Talk by the same Douglas Crockford explaining how to do monads in Javascript: http://www.youtube.com/watch?v=b0EF0VTs9Dc
Pretty good is actually pretty bad.
Um, no. MVC is a design pattern (i.e. a set of concepts for programming) that can apply to any language, CSS is declarative style markup (that apparently some people think should be the next programming language) that depends upon another markup language (HTML, XML).
I'm happy that you know that. It's a shame you don't have the comprehension ability to see that nothing in my post said otherwise.
I think you should look up MVC.
I thing you should try teaching your grandmother to suck eggs.
Bollocks. CSS was designed to separate styling from structure in web pages. It does this admirably, and only needs to be a declarative language to do so.
Bollocks. Every configuration file should be Turing complete. -- The Sendmail Authors.
I guess you're right. I was thinking of things like Turing-completeness, but I agree that is not actually necessary to make something a programming language. A player piano isn't a computer, but making a piano roll still is a form of programming.
Pretty good is actually pretty bad.
I think you missed the point of what BasilBrush was saying. Also, HTML/CSS/JS fit the MVC design pattern surprisingly well - the HTML is your data (model), the CSS is your view (in the sense that it controls presentation) and the Javascript is your controller (in the sense that it controls the application logic). It's just an analogy but surprisingly not far of the truth.
I know you're mocking, but in Javascript a function is a first class citizen. You can pass functions as parameters, return functions, keep them in a variable, create them at run-time. The fact Javascript has a curly braces syntax doesn't mean it can't be a functional programming language.
Pretty good is actually pretty bad.
The fact that it is interpreted by the browser and applied to the web page layout does.
No, it doesn't. CSS is a description language, not a programming language. It just maps elements to the layout of said elements. Calling CSS a programming language would be akin to claiming, the mapping of numbers to colors in a paint-by-numbers would "program" the picture.
No, a JSON file looks nothing like a CSS file, it looks a lot like a chunk of javascript though....
Think about it. It's practically worthless. We might as well be compiling CSS + HTML + JS into an interactive PDF format for all the times we actually reskin entire sites. Even mobile stuff is suspect -- I mean, yeah, I can have 10 different images to serve depending on the size of the display, and I automate that image asset generation... Then what? I make the images be CSS backgrounds? Isn't that defeating the point of separating the style from the content? Go the other way: Actually put the content wholly in the HTML, and only use CSS to style everything. Yeah, great, I can sort of reskin for printers and mobiles, but where's the detection mechanism? It's on the server side... Thus conflating the whole model, view, controller and the presentation, content, style, etc. I mean, JS to manipulate the view -- So, what, a segmented controller? CSS3 Animation instead? Oh, so that's a style thing now. Bah, whatever. A rose by any other name...
The problem is that designers would love to think these problems can be isolated and are separable. The reality is that they are not. Concentrating on making your CSS super flexible with selectors is merely mental masturbation. If it weren't then folks would be making CSS libraries for pulling off common styles and effects. Go to the "poster child" of CSS: CSS Zen Garden, and see for yourself. Tons of #id tags, tons of different designs, no one really taking any two designs and combining them with ease...
The reality of the situation is that the next person who comes along will just scrap the whole thing and re-make the design again anyway (yes, even if that person is you). Might as well be compiling it all down into a low level colored shape display system, that way we can implement CSS and HTML and even new markups atop it, instead of waiting for OVER HALF the age of the web just to move from HTML4.01 to HTML5...
if it only included a #define....
world was created 5 seconds before this post as it is.
CSS is great when used properly (although, somewhat hereticly, I would kill for definable constants a-la 'color: PRIMARY_WEBSITE_COLOR;' without resorting to dynamically writing the CSS ).
Unfortunately graphic (website) designers are completely shit at using it. Even simply understanding when they should use an ID and when they should use a class seems to a'splode their brain, "huh, what is wrong with using this same id a bajillion times in the page". Don't even try telling them that "redtext" is not a good classname. Heck half of the time it's ".span1"!
They don't even know (even after telling them half the time) that you can use multiple classes on a single element, let alone combine selectors, everything is a single ID or classname to them. The amount of copy-paste in most web designer's stylesheets is simply offensive, all because their brains don't allow them to modularise their desires into useful reusable CSS classes. Cascade? Inheritance? These are foreign words to the average website designer.
There is no point telling a designer how they should can make their CSS better, they just won't understand. Worse, if the programmer, who does know how to use CSS as it was intended, attempts to fix their stylesheets (or worse, cut up their photoshops into proper HTML and CSS), the original designer just won't understand how to do anything in the stylesheet anymore.
NZ Electronics Enthusiasts: Check out my Trade Me Listings
Intellectually, I know that if it were more complex, there's no way it would have seen widespread adoption, and that markup is actually still complicated for many people. I can even look back at the early days of the web, when Marc Andreessen butted heads with Tim Berners-Lee about the media tag meant to display images, sounds, video and anything else and said, 'Screw it, you guys take too long to decide anything and it's over complicated, here's an img tag, done.' - and I can see how simple beats theoretically perfect and well designed.
However, we're already at the point of widespread adoption now, and it's a good time to have a new css that actually is a programming language, with flow control, dynamic calculations of element values, and so on. This is what we need to provide real separation between the document and how it looks. Anyone experienced enough to write non-trivial web applications that are meant to be run on a browser, tablets of varying sizes (including accounting for reorientation), and even cell phones knows that it's unrealistic to use a single page - you get sent to the 'mobile' variant of the page or elsewhere.
Css has been around for 16 years and it still lacks the ability to easily declare a completely separate layout based on display height or width, something like "If width is less than _x_, use this css, else this" or "set width equal to - 30". If you want those things now, you have to use javascript, and it's sometimes pretty awkward - like calculating the width of an element filled with content prior to displaying it.
To you folks who cite javascript to fix this, realize that css no longer manages the document display at that point, the javascript does. That means that css is missing something required to manage a display. It can only do some of it's job.
- side thought; I'd be happy if css allowed javascript within the css. Assign values based on closures or predefined functions. Simple fix -
You can't deny there's a very similar syntax going on (blocks of key:value pairs encapsulated by curly braces). I believe Crockford himself even said he came up with JSON after staring at a CSS file and realizing it looks a lot like a Javascript object.
Pretty good is actually pretty bad.
Um, no. MVC is a design pattern (i.e. a set of concepts for programming) that can apply to any language, CSS is declarative style markup (that apparently some people think should be the next programming language) that depends upon another markup language (HTML, XML).
No. He got it right.
Done properly, HTML is semantic. Its data. Its not a neat paralllel to a model , but its in the ballpark.
CSS is the layout, its a view. It takes the model and presents it.
And Guess what Javascript is?!
Now your getting it!
Excuse the Unicode crap in my posts. That's an apostrophe, and slashdot is busted.
You're going on like the only alternative to MVC is stuffing everything in a single file. While those of us who have been doing web development long before the idea of MVC have been separating out the business logic from the web page for a long time. There was stuff like N-Tier architectures which did a pretty good job of separating out the data storage from the business logic from the presentation layer. Personally I find this to be a lot better than MVC, because I find that MVC links the presentation too much to the underlying structure of the data.
Anthropic principle: We see the universe the way it is because if it were different we would not be here to see it.
First, you lose credibility for linking w3schools.com. Professional web developers wouldn't be caught dead referencing them. Second, you're referencing a tag that's deprecated because of CSS. Professional web developers wouldn't be caught dead using a font tag (or any other stylistic tags for that matter).
You are confusing structure with layout. Tables are a used to define document structure, when the data to display is tabular. to use tables to layout the document when the contents of the table is not tabular data is plain wrong!
Yes, I am using it for an internal XML dialect that need styling and for which HTML is not appropriate. We use the Apache Batik internal CSS processor (because we are using Batik for their SVG support, no need for a duplicate CSS processor independent of Batik)
The fact Javascript has a curly braces syntax doesn't mean it can't be a functional programming language.
Actually the thing that makes a functional language a functional language has nothing to do with curly braces. The defining principle of functional languages is that you have to have special hacks built into the language that technically violate it's functionality in order to make it do anything -- eh -- functional -- due to the fact that side effects are the only useful way to get anything done.
Someone had to do it.
There are other JavaScript frameworks, beside jQuery, that support CSS selectors. i.e. Prototype
interactive hologram, or it didn't happen.
Unfortunately graphic (website) designers are completely shit at using it. Even simply understanding when they should use an ID and when they should use a class seems to a'splode their brain, "huh, what is wrong with using this same id a bajillion times in the page".
If CSS did what it said on the tin - separated content from style and layout - then graphic designers wouldn't have to bother their little heads about this sort of thing because they wouldn't need to touch the semantically-marked-up HTML.
Unfortunately, (a) CSS doesn't do what it says in the tin - changing the layout inevitably needs including exactly the right permutation of DIVs in the markup because CSS doesn't have any way of doing what every half-decent DTP package since PagerMaker 1.0 can do: defining a series of frames and specifying how text should flow between them - and (b) anybody who thinks style can be completely separated from content has spent too long reading & writing rigidly structured technical documents.
Don't even try telling them that "redtext" is not a good classname.
Hell no! Any idiot knows that a classname should be something semantic, like "rubric". ;-)
In a survey of 100 programmers, 111111 thought that duck-typing was a good idea.
Wtf are you smoking? HTML used to do presentation. And there's no reason it still can't. Please feel free to give the exact reason for CSS having an entirely different syntax and structure to HTML when XML which can store far more complicated data than CSS manages to have a pretty similar one.
While that has nothing to do with the original point the person was trying to make, keep in mind MVC is a very specific pattern, and the fact you have a model, a view and a controller is only a part of it. How you use them is also part of the pattern.
You can have a model, a view, and a "controller" and end up with a MVP, an MVVM, or a variety of other patterns that have these 3 components in one form or another.
I think MVC more like Model = JSON Data View = HTML+CSS Controller = JavaScript
Why not leverage people's existing SQL knowledge and create a relational-friendly DOM? There will still be tree-oriented nesting, but special functions and views can assist with that.
Table-ized A.I.
That CSS is not programming at all. It's layout design.
If javascript is a functional language (because you can do monads?), then I guess C is also a functional language.
I think the definition of functional programming languages is more about what you can't do than what you can do - since they're all turing complete...
Hell, javascript functions don't even return a value by default. To me that screams *not a functional language*.
The CSS property you're looking for is box-sizing. If you want modern browsers to use IE's box model where the width includes border and padding, use the value 'border-box'.
Yes - but is it supported by IE7...
If you want to yell at someone, yell at those folks still XP and IE8 (or earlier).
Unfortunately, such folks fall into categories like "clients", "customers" or "target audience" and its not such a good idea to tell them "piss off and come back when you've got a decent web browser".
This does all get better the further IE6/7/8 fade into history - if I were starting a site today I could at least ignore IE6/7 - but I'm still seeing significant hits from IE8.
Then new things come along: I was having trouble with 'background-size' recently (handy if you want to use 2x res images to look good on 'retina'-type displays) and I've yet to find a browser that properly supports page-break controls on printouts (yes, I know people who like to print out web pages to read later).
In a survey of 100 programmers, 111111 thought that duck-typing was a good idea.
Every few years I crawl out of my sandbox and absorb any useful changes in the browser scene.
The last time I tried CSS selectors every one I wanted to use either didn't work at all or worked great until I tried the same thing in a different browser.
The CSS property you're looking for is box-sizing. If you want modern browsers to use IE's box model where the width includes border and padding, use the value 'border-box'.
Yes - but is it supported by IE7...
Does IE7 support the IE box model? I'm not sure, I'll have to get back to you on that one.
Unfortunately, such folks fall into categories like "clients", "customers" or "target audience" and its not such a good idea to tell them "piss off and come back when you've got a decent web browser".
That's true, it wouldn't be a good idea to tell them to "piss off". It would be better to just tell them that they are using an unsupported browser that no longer receives testing, and they can either upgrade their browser or pay extra to test on legacy software. That sounds a little better than "piss off".
"Our two-party system is like a bowl of shit looking at itself in a mirror." - Lewis Black
Forget about IE7. Apart from some corporate environments with which you don't want to have to deal with anyway, nobody is using that browser anymore. IE8 is the absolute minimum these days. Just another year and non-HTML5 compliant browsers will be a thing of the past. Finally.
Pretty good is actually pretty bad.
If you think CSS interferes with structure, you don't understand what structure is. CSS is only about how things look, nothing more. HTML used to do style too in a distant past and there are a few remains of that still in there (some form elements for example have their own style which can't really be changed through CSS). But the other way around? No way.
Pretty good is actually pretty bad.
Adobe's Flex platform uses (or used?) it for styling Flash GUI elements.
Unfortunately, such folks fall into categories like "clients", "customers" or "target audience" and its not such a good idea to tell them "piss off and come back when you've got a decent web browser".
A few years ago, I'd agree with you. Now? You can let those 3 clients go, you won't miss them that much. If you tell them to go piss off, they'll come back, no one else is going to support them either.
IF your business depends on old IE users for survival, you're fucked anyway, by definition.
Persistent Volume manager for Kubernetes - https://github.com/dwimsey/openshift-pvmanager
You're confusing the point.
The point is to get a job done. You're just adding unneeded semantics based on a broken philosophy. CSS is not better in several instances. Table based layouts are the proof of that. Instead of recognizing shortcomings, you're ignorance shows through as you just keep parroting the same old tired line ... which just goes to illustrate that you are having a religious debate about your preferred language rather than a discussion of technical merits.
Persistent Volume manager for Kubernetes - https://github.com/dwimsey/openshift-pvmanager
And that really shows that while you understand the concepts of MVC, you don't understand what HTML actually is or how MVC exists in the real world.
HTML is both data and view. CSS is just sorta view. and javascript is just control (usually coupled with a backend component to complete this part of MVC).
The real world and the theoretical/ideal are entirely different.
Persistent Volume manager for Kubernetes - https://github.com/dwimsey/openshift-pvmanager
getting the job done, the wrong way. Looks like you never cared about assistive technology and people that need it. A table is a table, a definition for tabular data, using tables for other things break the correct dictation/help the assistive technology provides. Content and presentation should be separated, period.
To allow specifying a RECTangular section of the source image, so that one can place or stretch pieces of a single image that has a zillion different style elements in rectangular tiles like corners, line segments, icons etc. One image to load, one palette to manage, and all the clipped regions appear instantly, magically! Need to swap 'styles'? Change the whole image! Need to extend the style? Build out tiles within the image in the X and Y directions! Use evil tables for everything without apology.
Only joking! I wanted this in 1995. But instead of joining a standards committee I went and did other things for awhile. Well, I'm back.
Only joking! Instead of improving the IMG tag, why don't we create whole hidden empty html layers whose background images are the source image and make them invisible by default and slide them off the page.
Only joking! How about a web page that loads with a pile of layer:visible crap in the middle of it, menus open and obliterating the content, and load an external Javascript routine from another domain to make it invisible or skitter it out of the way? Eventually.
Only joking! How 'bout dem web pages that dynamically resize themselves so that the rightmost or bottom portion of text is always hidden at every possible window size or display resolution? Select all, paste into Notepad to read it. Or better yet, paste it into a Java code development window and read it with all the colored blinking syntax violations.
Only joking! I designed my whole site in Flash because with flash you can make round beeping web pages that have no volume controls.
I run NoScript by default. More than half of the Internet is just missing. I run WebDeveloper and turn off CSS to view pages as Jesus would.
Now awaiting the new specification for CCSS (Cascading Cascading Style Sheets). Under this progressive regime (CSS, CCSS, CCCSS etc) style is expected to overtake content by 2015, with content completely defecated by 2020.
<blink>down the rabbit hole</blink>
Wish I had mod points for your last sentence, but since I don't, I'll just let you know that I got the joke.
Yup. Welcome to the future :(
To an extent, but as another poster replied, it's more down to simply how the designer's brain works, can't blame them for that, but it doesn't make life easy.
I think at the bottom of it is the common problem that CSS was developed by programmers, not designers, and the programmers didn't understand that the designers don't think like they do, and that they can't think like they do.
As a result, it's just not a good fit for designers, so they use it badly.
NZ Electronics Enthusiasts: Check out my Trade Me Listings
Does IE7 support the IE box model? I'm not sure, I'll have to get back to you on that one.
I did stop and think about that question a bit. Its not silly. IE7 can run in standards-compliant mode (CSS box-model) or legacy mode (IE box-model), depending on the doctype. The question is whether IE7 supports the "box-sizing" property in standards compliant mode, to enable the IE7 box model (which some people find more logical) without all the other IE quirks.
In a survey of 100 programmers, 111111 thought that duck-typing was a good idea.
On that basis, it shows you don't understand metaphor.
Though I'm sure you do, and just like to pick holes. Oops that was another metaphor.
The job is not done when the site looks OK on your screen. The job is done when the Google bot can figure out your content so people will actually find your website.
Putting everything inside a big table so it looks OK to humans won't help Google's robot (and the wrath of the blind will be upon you).
Pretty good is actually pretty bad.