I do not like CSS

There, I said it. Please go easy on me.

I think it’s an objectively bad technology. It violates pretty much every rule of good language design. You have hundreds of different properties (522 according to Zeal). You don’t seem to be able to isolate anything conceptually. Modify one thing and something else breaks. Fix that and it causes a change in 2 other things. CSS is a giant ball of complexity with very little about it that’s simple, consistent or intuitive.

How many different ways are there to handle layout? position has 5 different values. No wait there’s flex too. Oh and also grid. :sob:

Alan J. Perlis said:

It is better to have 100 functions operate on one data structure than to have 10 functions operate on 10 data structures.

CSS feels like 100 functions operating on 100 data structures.

8 Likes

I fully agree with you and you have my sympathies. I hate it too. But you gotta learn it if you gotta become a web developer. No way around it.

It gets better once you have worked on it a little and gained some experience in it.

But otherwise I totally agree.

1 Like

I agree but you need to remember that CSS is NOT a programming language. As far as I remember it was much less complicated back it the 90’ but it’s growing and evolving. Add a CSS pre-processor and you get a real mess. I understand the need of using variables and being able to perform more complex operations but… it just looks wrong to me. I thing it would be better to start something new from scratch.

6 Likes

Totally agree. We need an alternative to CSS.

1 Like

[In a Grandfather voice: ] I remember back in the wee old days of the information superhighway my young lads, we used to do this:

<font face="verdana" color="green" size="3">This is some text!</font>

and everything was positioned in tables within tables, and boxes within boxes.

And before you can even use all of that, you have to dial a phone number to get on the information superhighway and hear the gremlins scream on the line, then you know you got on successfully. the information superhighway back then was just a series of tubes, lots of tubes going to everywhere.

12 Likes

At least you got to bask in the coldgreen glow of the tubes… Once upon a time I scratched fortran on punchcards and submitted it so quick it was overnight! I got back the continuous but serrated madness of a 20 page answer that said it had an error and you had to rerun it in the speed of the next night.

This is why I love playing Fallout… it really does feel like the future

1 Like

Yeah, I realise it’s not a programming language but it is a language with a syntax and semantics. I’ve been programming for half my life and I think having used well-designed languages just makes using CSS more painful.

1 Like

I guess I am one of the few who actually like it. :smile:

Do you know about this site?

7 Likes

Yeah, I’ve used a couple of articles I found on that site. I think just the fact that the site is called CSS tricks illustrates what I dislike about CSS. There are countless “tricks”, “workarounds” and “hacks” for things that you need to do and lots of these aren’t just really obscure corner cases but things that should just work but don’t and require you to jump through a ton of hoops. Oh you want to center that vertically? Well you’ll need to set these 3 properties on a bunch of completely different elements but that’ll mess with the box of this other element so you need to change the foo property on that but that isn’t fully supported on such and such browser so you’ll need to include this library and blah blah blah. :sob:

10 Likes

A Senator was explaining how the Internet works. --“it’s not a delivery truck, it’s a series of tubes”

5 Likes

@drguildo As bad as you think CSS is, (it’s not actually), it was worse way back when we used tables embedded within table cells, and doing colspan=“x” and valign and align, cellpadding, cellborder and using transparent “clear.gif” with hardcoded image width=“xx” height=“0” to force things to move up or left a certain distance.

CSS solved all of that. It’s so much easier nowadays.

5 Likes

At first it was infuriating, like you said, things that should just work, don’t. And there are a lot of loops to jump through to get something to work.

Before, layout can be easily accomplish by tables which were incredibly easy and yield predicable results. But it does come with a problem that it becomes difficult to read as more nested tables are introduced.

Div kind of solves the problem, but brought in whole new host of problems which is what you describe now. A lot of properties were added just to compensate for what table can do. It made designing unpredictable and time consuming.
For example vertical align content are difficult to accomplish, sometimes don’t work under certain condition, div doesn’t “contain” other elements when floating and position, There are browser issues that some browser can’t understand what the CSS is doing, because the developer somehow separated themselves as well. Now we have add 10 more lines of the same code that does the same thing. LOL

Now it became even more complex with css libraries, SEO, front-end, back-end, sync, responsive.

All of these came in the name of “business”, “competition”, “patent”, “creativity”, “originality”. Everyone secretly wants a stab of becoming “big”, so they make techie name things like SASS, LESS, and many scripting languages and library. But when reality, we only need 1 or 2 language to accomplish all of it.

Its a vicious loop of “business practice”, “competition”, and “ego”. There is no stopping it.

I think I am done venting … LOL

3 Likes

I have not used CSS professionally, yet. But I like how it enables me to add style and depth to what would be some pretty bland webpages. 512, I have been working on FCC AND codecademy for 4 months and I thought I have used almost a thousand different elements, I am glad there are only about 500. But seriously I agree it does seem the problem with CSS is the cascading problem of one property change. This sounds like the makings of a new programming language, a markup language that is more intuitive and functional than trying to combine HTML, CSS, JavaScript, et. al. Any ideas?

@owel Wow you bring me back… The first thing I’d do when creating a site was get my 2px clear.gif image ready cause I used it a hundred times (it seems) on a page to get they layout looking the way I want, the tables were a nightmare and there were so many times I decided, yannow…the text is just going to have to stay bold purple… because every, single, sentence had bold purple font color on it and I didn’t want to spend the rest of my life changing them all lol

I dont hate CSS, dont love it either. It just…is. For sure, much better than the clear gif / table way of formatting…or what I did after that, making a Dreamweaver template to make changes easier…which was better but still rough because of all the extra code it put on the page. I’ve toyed with SaSS and like how it works enough to start using it. I only still use CSS cause im familiar with it, so its faster for me to do in the moment, but really think its worth it for me to get rolling on SaSS.

4 Likes

I do love the tubes quote… it’s a classic…

it’s one in a million

It may be a lot of things but I would definitely not say it’s easier. For a long time people reverted to using tables for layout because it was easier, even though you could do it with CSS. Using tables was simpler, more intuitive and, yeah, easier to get consistent results. Note I’m not saying better (biting my tongue here), but definitely easier. In fact, probably the main reason people don’t do it anymore isn’t because it was so much worse, but simply because it’s so frowned upon.

You mention a bunch of table attributes and seem to be implying (sorry if you’re not) that it’s complicated? But that’s all you had to remember, and those things had very predictable results. You got a lot of bang for your buck in terms of the amount of time and effort you had to expend in relation to what it allowed you to do. As I said before, CSS has over 500 properties and while not all of them are layout related, a good deal of them do at least effect the layout and they have unintuitive and inconsistent results. Think of how long it would take a person to learn to use HTML tables compared with how long it would take a person to do the same thing with CSS and consistently get the same results.

1 Like

I don’t think combining them would improve things and would probably make things worse. Separating the logical structure of a document from it’s visual representation is a fundamentally sound idea, it’s just that CSS is a Gordian Knot of bad ideas.

1 Like

I know a lot of people who dislike CSS and can’t get good at it.
I personally like CSS and find it beautiful. It’s not a programming language, so it may seem strange to learn if you’re a programmer. I learnt it (along with HTML) at the beginning of my web development path and I found it difficult at first, but with practice and a lot (a lot) of tutorials I finally got it.
And yes, you can achieve something in several ways using CSS, but it is what I like most about that language. You can use tables, positions, float, flex and now grid. The fact is that CSS is evolving: new properties to learn but the result is awesome. Several years ago, I assume it would be impossible to make a responsive website (I assume because I’m quite young) and now it’s so easy.

My advice is to read as many tutorials as you can. Start building simple blocks and not entire pages. If you’re confused about that, take a look here: http://bradfrost.com/blog/post/atomic-web-design/
Then you can start to put components together. Try to achieve the same results with different properties.

The real bad thing about CSS in my opinion is that old browsers are not updated to new technologies, and you have to find a way to let your project works everywhere.

4 Likes

No, just that I’m well versed with tables, inside and out… started using tables since 1996 when doing side jobs designing websites. When CSS first came on scene, I’m one of the few holdouts that resisted – because I didn’t understand it or cared for it. Was perfectly content doing my tables for layouts and could do “fluid” and centered layouts using tables.

But I keep on reading about CSS, saw a few tutorials about just styling some text appearances. Started incorporating some CSS styles with my table-based designs. Mainly used CSS just on texts. This cleaned up my code a lot. Gone are the long series of font and /font tags encapsulating my text. Code became a bit cleaner. Styling texts became so much easier. But still using tables.

I think DIVs were the hardest for me to understand. At first, I can’t picture how they fit on a blank page, how they’re supposed to be used on a page. I was so used to the “compartmentalized” structure of tables that given this too much freedom by DIVs, I dont know what to do with it. I want my box. With my box, my table cell, I know where things go, bounded by that box. — think of it as a jail prisoner, that finally got out, and now doesn’t know what to do next given his freedom.

I think the AHA moment for me was realizing those DIVs can be thought of as just individual cells of a table. Margin is the same as the tableborder property, and Padding is the same as the cellpadding property. — but with finer control! I can have different margins or paddings for the top, right, bottom, left sides! Then I can specify the width/height of this individual DIV box… exactly, down to the pixel count. I can move them to an absolute position, or relative to another DIV.

Now, gone are the messy text of table codes, and the tables within a table html code (which you need to be using a WYSIWYG editor like Dreamweaver to make sense of it and really visualize it.) If you’re not using a WYSIWYG editor using tables, well, it’s almost impossible to get the big picture.

The next AHA moment was realizing that you can use CSS not just for simple positioning and styling of page elements. CSS is capable of more than that! I think this is where CSS Tricks come into play. I used to use individually spliced graphics (GIF/JPG) for my menu items, then using javascript, I swap those graphics with a duplicate/identical set (but just a different color) when a mouse is hovering.

But with CSS, gone are those (2) sets of graphic files for each menu option. The mouse hover, and different styling can be purely done in CSS. Shadow effects? I used to use transparent GIF created in photoshop and positioned in it’s own table cell, underneath another table cell. No need for that. I can use CSS to specify a shadow… even on 4 sides if I want to, and vary the appearance of that shadow without going back into photoshop to adjust its opacity. Rounder corner boxes? I used to have (4) different graphics for the “rounded corners”… ur.gif, lr.gif, ll.gif, ul.gif. Then had to place these images inside their own table cells to give the appearance of a rounded box. That’s gone too! CSS can do that with a few lines of code.

Pull down menus? I used to need Javascript to do that kind of stuff. Not anymore… you can do that with pure CSS. Pull down menu with each individual item and sub-items having different mouseover appearance… it’s so easy now… and a whole shadow effect under each pull down menu, and the shadows affecting the appearance of the content at the edges of the pull down menu? Wow. Really nice – and easy to do with just CSS.

I’m still discovering new things (or tricks) pure CSS can do. And yeah, I wouldn’t go back to the old ways of doing things. I wished I’ve embraced CSS sooner.

** sorry for this wall of text, didn’t realize how long this go! :slight_smile:

1 Like

This conversations rings so true to me. I,too, come from the days of table positioning, <blink> and <font color=red>, so in some ways I love what css can do today, and how neatly it is separated from html. One big weakness is that there are no variables, so you can’t declare a color once ($accent = #A4C639) and then use it everywhere else (div { color: $accent; }). But this is only a minor gripe.

My big one is, yes, the “tricks”. It is never a good sign if you need “tricks” (implying esoteric knowledge) to satisfy some fairly common and mundane needs. When I learn and practice css3, things seem very clean and very obvious. then I look at a css file for some neat but simple-looking site, and it’s a dense thicket of 500+ lines of code, with plenty of browser-specific shims and hacks (and typically, unlike in programming code, no comments to explain what’s being done or why). Can’t really understand it or learn from that, and there seems to be this huge divide between what you can do if you just follow the basic rules, and what must be done to get everything just right across different browsers and devices for any non-trivial site. Seems to me that with css you can either stick with the dull basics, or do all the dense hackery, with no ground in-between.

Then again, most of it is not the fault of css itself, but its browser implementations, platform limitations and changing technologies. Not much can be done about any of these.

1 Like