Styling - a big challenge these days

You don’t need to be a condescending jerk about it. You clearly don’t have the experience with large front end work, and you certainly have shown you don’t have the history with this that I do. I’ve learned from these kind of mistakes.

Your example is a disaster! You have a complex class handling just a button. What happens when you wrap that button into something larger, and then wrap that into something larger still. Finally, the page this component is on needs all of it’s buttons to be green, but other pages that it’s on want them blue. How the hell do you do that?

  • You now have to have a property for color starting at the top of the component tree. That is totally wrong, and defies reusability and extensibility!
  • You make two versions of the parent component to handle both cases.

In either case you have significantly reduced the reusability of the component. This lesson has been learned by the front end world 15 years ago, and as such they created CSS. Now, admittedly CSS isn’t perfect. There are things that could be better, but that can be said of javascript as well! When you are a hammer, every problem looks like a nail! Having javascript handle all of your styling is ludicrous. We have better tools!

You’re partially right, I should keep an open mind (no irony intended). I just can’t wrap my head around this, why people would want this over-engineered stuff. What’s the point really. There will be so much stuff that will bite you later on (in my opinion). It’s for a reason “nobody” is (really) using Famo.us (and why it’t completely bust as a company). Engineer solutions are great, but only if they fix real problems. Otherwise it’s just burning time, effort and money (in Famo.us’ case).

Through React, I see an urge to push the “web” into languages like .Net/Java were before. And even Flex (Flash). My experience is, that it will need a lot of added value to push out HTML/CSS.

But let’s see what the future brings :slight_smile: I don’t know for sure, that’s true. I’ll just leave this opinion here, for future readers -> There is a reason HTML/CSS morphed from everything inline, to external cascading stylesheets. Let’s not go backwards unless we’re really sure :wink:

3 Likes

I’m not being a condescending jerk, you’re making something up. I’m genuinely interested in hearing how other people create reusable code, and open to hearing about techniques, but I will have to see real examples of good CSS code to convince me.

I’m willing to believe you that there are cases where CSS is better. I’ve never dealt with a very complex designs (and I have no desire to), I like keeping things simple.

All I can say is I’ve tried to understand Bootstrap code, I’ve considered using it as a starting point and then tweaking it (because why reinvent the wheel?) and it’s completely unintelligible to me, whereas something like Rebass is easy to understand. Why do we have huge frameworks like Bootstrap that are unintelligible? Why is there no better way to start an app without becoming a CSS expert? The problem is clearly CSS!

1 Like

I agree, famo.us was an interesting project but not really useful. But React is a different story.

As I said in the other message above: I’ve tried to understand Bootstrap code, I’ve considered using it as a starting point and customizing it (why reinvent the wheel?) and it’s unintelligible to me. Rebass on the other hand is easy for me to understand. So, I think I’m actually on your side, I hate complicated, over-engineered stuff.

I’ll leave that as my interpretation then and focus on the points.

I would love to offer you examples from my recent work, but unfortunately it is closed source and I am not permitted to share it.[quote=“vonwao, post:63, topic:16697”]
I’m willing to believe you that there are cases where CSS is better. I’ve never dealt with a very complex designs (and I have no desire to), I like keeping things simple.
[/quote]
The problem is that unless you are designing for mobile only, in today’s world every design is by necessity complex.

The problem is clearly that you don’t know CSS! Bootstrap is very intelligible. I don’t agree with all of their design decisions, but I would not begin to suggest that the problem with Bootstrap is CSS. [quote=“vonwao, post:64, topic:16697”]
Rebass on the other hand is easy for me to understand. So, I think I’m actually on your side, I hate complicated, over-engineered stuff.
[/quote]
I also comprehend rebass. What I don’t comprehend is why rebass. It is itself an over engineered piece of shit that couples UI and UX together very tightly. Developers have been decoupling their architectures for decades for a reason, and yet you are here fighting tooth and nail for a tightly coupled architecture. What. The. Hell? Unless you are designing extremely simple apps for mobile only, you are going to run into limitations doing things this way. Take the word of people here who have already learned this lesson, often the hard way.

If you can’t understand CSS, taking the shortcut of inline style is not going to save you. When you can’t figure out that one layout issue, you are going to go through hell sorting through inline styles.

This argument is getting out of hand, so I’ve decided to look for some outside input. http://jamesknelson.com/why-you-shouldnt-style-with-javascript/ this blog post breaks down the arguments for inline style and provides counter arguments for each one, in a much clearer fashion than this back and forth can accomplish. Please, for the love of rand() go check this out!

2 Likes

that’s kind of what i meant by saying a lot of backend dev’s (assumption) come in and think they need something as rebass. it’s just more in their comfort zone. I get that, but trust me that css is css for a reason. there is no good reason to do it in js, except ‘comfort zone’ and very far fetched maybe something like maintainabilty. but that’s it. Rebass is truly reinventing the wheel :slight_smile:

1 Like

Have you seen this presentation? React: CSS in JS - Speaker Deck Also the video.

That presentation doesn’t provide a good reason. Isolation is unimportant as long as you are handling things in an intelligent and scoped manner and especially if you always use class names to prefix your styles (which less and sass both make super easy).
Non-deterministic resolution is already solved by meteor. There is only one style sheet. Either it breaks or it doesn’t. There is no non-deterministic issues.

The first part of the presentation made an argument for a modules system for css, and that I’m totally in support of. They literally added inline styles to solve two percieved problems, not the real problems.

[Edit]I so so so wish I could show you my main project. When you look at it you would be able to see how inline styles could never work for it. We have styles adjusted for different window sizes all over the place. We have components with different widths in different situations, with literally everything else being the same. To manage all of that in javascript would be literally madness. I’ve seriously considered where you are coming from, but I know for a fact it can’t be applied well to large apps without significant developer overhead, and I’m not just talking more man hours, I’m talking more mental capacity consumed when working with each component, as now truly distinct content is right there inline with your view and behavior. You on the other hand, have not really considered where those of use who have felt this pain before are coming from. Do us all a favor. Build an app with more than a couple dozen components (I’d say about 30 would be a good start) and where some of the components are reused 3 or more times in different scenarios. When you have done that, make an informed opinion with experience backing you. Right now all you have is laziness informing your opinions.[/edit]

1 Like

Already outdated material, IMO. :slight_smile: The React landscape is constantly changing. CSS Modules appear to be where things are headed next. Meteor just needs a way to easily support that out of the box, and it will make lots of people happy!

2 Likes

Haven’t seen it, and was nice to look at it. But it didn’t change my mind though :slight_smile: And although I appreciated the trouble and ultimate goal of the author, I still think all these “frameworks” are just stop-gap measures. The web moves slowly (although faster lately) and it will take some time before better (native) solutions popup. It might be that this time everything will be different and that React and CSS will be the dominant factor in web from now on. But as I see, it’s just another toy of people with too much spare time :wink: We’ve had this happen so many times already and every time we come back to the web itself. Throwing my hat in the corner of “it will be absolete in a couple of years”.

Now GraphQL on the other hand, I was sceptic about that in the beginning too. But that is really something different and a huge improvement. So I’m not totally an old man yet, still keeping my mind open :wink:

1 Like

According to this article React Native demands inline styling (see quote below). That would be an incentive for me to start inline styling with my current coding so to make re-use of code and knowledge easier.

Is that a good way to go or do the CSS proponents still prefer styling through CSS?

nb This article also refers to the video suggested by vonwao.

====
From Writing Cross-Platform Apps with React Native

Stylesheets

In order to make rendering simpler and more effective, as well as to
encourage maintainable styling code, React Native implements a strict
subset of CSS. This means that you don’t need to learn a
platform-specific way of designing your views, but it’ll take you some
time to learn how to use React Native’s styles.

The biggest difference is that you don’t have to worry about
specificity rules, since style inheritance is severely curtailed and
React Native uses inline style syntax.

React native is not html. Say it with me now, “React native not html.”

React Native is a different beast entirely. Additionally, React was smart enough to provide a style sheet abstraction for react native. So while it uses inline style by force, you have an external style sheet. What React Native doesn’t have that is important is the cascade of CSS.

This means that for an app of any kind of complexity, you will need a cascade library of some sort. There are a few out there that can handle it. The React Native people chose inline style for a technical reason (not the reasons in that slide show). The underlying platform when being told to place a view element, takes the style at that moment. To fully implement CSS would have been cost. React Native breaks all the paradigms because it pretends to be HTML/JS when it really is just JS. And that distinction is important. React DOM at the end of the day is actually HTML.

Do I wish they would have figured out supporting at least the cascade part of CSS? Yes. That would make transitioning my very complex app feasible without having to duplicate content or create hundreds of props. For that reason, my app will stay a webapp.

2 Likes

I’m not at all convinced that cascading is a good idea. You say cascading is necessary for any big app, but I’m not convinced. You mention about needing to support different device sizes, etc.

It seems your main issues are layout. Isn’t this what Flexbox was invented for? Are you using it? Your dislike for javascript seems irrational.

The trend towards components (whether react, polymer, web components, etc.) seems to be point towards more encapsulation and less cascading behavior. Cascading is hard to keep track of, and hard to know how one change will affect everything else in your app.

CSS grows over time. Smart people on great teams cede to the fact that they are afraid of their own CSS. You can’t just delete things as it’s so hard to know if it’s absolutely safe to do that. So, they don’t, they only add. I’ve seen a graph charting the size of production CSS over five years show that size grow steadily, despite the company’s focus on performance.

(from https://css-tricks.com/the-debate-around-do-we-even-need-css-anymore/)

No, everyone’s main issue is layout. Flexbox is great and all, but doesn’t solve every case. What happens when you want different layouts on different device sizes. This is what the web is. React Native is a different game as you only have a couple sizes to contend with, and can usually use just one layout, so it is really not relevant to this statement.

Which is exactly why almost everyone on this thread who has worked with components at scale is advocating for scoped class definitions, and even one css file per component. The moment you use unique class names (and there are tools to guarantee this) you have well scoped behavior. You can cascade where that makes sense, such as button colors for a particular view. Then, your button defines things that are all of the defaults. Parent components (compositionally wrapping components) can override that behavior. That kind of override and wrapping is what Higher Order Components is all about, but it doesn’t work well when the style is inline as the higher order component becomes tightly coupled in code to the lower component. Instead of just overrides, which will automatically cascade, you have to manually cascade those styles.[quote=“vonwao, post:73, topic:16697”]
I’m not at all convinced that cascading is a good idea
[/quote]
Thing is you are already cascading the moment you expose a property to define the color. That is a form of cascading. CSS does that for you! Once you understand it, it is literally less work.

And that is utter BS. I am the principal developer on a currently 13k line code base. Our CSS is not in that line count, that’s just javascript (and not even JSX, just the javascript portion). I don’t have a dislike for javascript. I love javascript. But I have a big toolbox and I know what tools work for what. My experience tells me that javascript is not the right answer here. Your lack of experience tells you it is. I’m also not the only one telling you from a voice of experience, yet you continue to fight this.

That is also BS. This is an anecdotal anti-example out of one company. Scoped (modular) CSS just doesn’t have this problem. Where I work, we don’t have this problem. We aren’t scared of our CSS. We cascade where we need to, and don’t where it doesn’t make sense. We are careful about our design. We have all of the problems you mentioned anywhere in this thread solved by simply designing it well!

While we agree on most architecture and design pattern choices, and I have a lot of respect for what you’re saying in this thread, I feel the need to correct this point: inline styles CAN be overridden by any style sheet, as long as it incorporates !important into the rule. That said, this is not recommended (sort of “going nuclear” on your CSS), as it short-circuits the normal cascade. Of course, using entirely inline styles is truly going nuclear, so really !important is just a predictable escalation toward a CSS holocaust.

@vonwao: Rebass is pre-emptive CSS holocaust, because learning the four rules of specificity is hard. Say goodbye to skinning or theming. (Separation of concerns? That’s so twelve minutes ago…) Say goodbye to reusable components outside of a single site or project. Say goodbye to DRY. Say goodbye to ever handling an enterprise site or app at scale or anything maintained by a team any larger than one person.

If you hear others getting impassioned about this, it’s not because we are talking about flavors of ice cream or favorite color, in which case there is no objective, measurable definition of better vs worse. There are architectural design patterns, SOLID principles, etc. that came out of some very painful battle scars with previous generations of technology. Some of us have needlessly lost sleep and sanity trying to rip out ill-advised implementations which ignored this wisdom after it had already been solved – 15+ years ago.

I think this same faulty logic is used to support Intelligent Design™ over evolution: I can’t understand how a fully-functioning eye could have evolved over millions/billions of years, therefore it must be the work of a Higher Power™. Now I have to dredge out some Scully to rebut:

Just because you don’t understand what’s going on in Bootstrap doesn’t mean it’s unintelligible. It means you need to revise your understanding of what CSS does, what it gets right, and why current designs have evolved to where they are.

Wow. Just, wow. I happen to work alongside @lassombra in enterprise Meteor development, full-time, all day, every day – for the past few years – and each of us has quite a few years of professional experience and working on projects at scale. I won’t bore you with the details, but suffice it to say that @lassombra is easily one of the most skilled Javascript/front-end/full-stack developers I’ve ever worked with, which is why I worked so hard to recruit him to our team. He wrote an elegant and complete Javascript-based ORM (that anyone with a clue would drool over, after picking their jaw up off the floor) in one freakin weekend. Despite our vastly different experiences, we tend to agree on a lot of architectural and design decisions, including using the right tool for the job.

I find it telling that the experienced professionals chiming in on this forum seem to all have arrived at the same conclusion as to what the current “best practice” is for working with this technology, having already run several laps around the track. The dissenter seems to be stuck at the starting block, complaining about the length and shape of the track, the narrow width of the chalk lines, and how loud the starting gun was when it fired off… quite a while ago.

1 Like

Dear all, this thread is turning nasty :slight_smile:

Let me share what we do, but first, we have not yet jumped on the React bandwagon (we subscribe to the MVP model, so need faster development cycles to test, rinse and repeat). However, it’s relatively easy for a good dev to follow this approach.

We use Meteor, with the Semantic UI toolkit. Not the CSS, but the actual LESS build kit. This is the way the original designer intended it, you have a pre-defined place to create your LESS overrides and it compiles into your CSS. I am personally no CSS expert, but Semantic UI is so well designed, it’s a matter of overriding a few things here and there to get our own look and feel (e.g. font, default size, background etc.).

Now a word about Bootstrap. I have used it for many years. I think it is / was great. Bootstrap is amazing to build your own theme out of it. Especially for websites. However, I am starting to believe we no longer have the need for complex themes any more. You look at many apps / websites and they look so similar in terms of UI, it’s a matter of basic colors, fonts and images (and maybe some cool UI features, like animations and backgrounds etc.). And all this is a matter of basic CSS overrides.

Now there you have it, my peaceful (and hopefully constructive) way to get this thread to a good conclusion :grinning:

1 Like

Yep, and for my part in it, I would like to formally apologize. I get really bent out of shape about stuff like this when I see someone pushing something that I’ve tried and rejected, when I have experience in the space, it’s frustrating.

@vonwao I probably haven’t treated you very well or with the respect you deserve. I certainly had some points where I read things into your statements that weren’t there and was definitely aggressive about my opinions, so I would like to apologize for that.

A couple of closing remarks.

Yes, I left out that available override because it does not itself use cascade. Instead, !important is an example of exactly the biggest problem that CSS exists to solve, as in the last !important in the file rules the day, not the most specific. It really shouldn’t exist, and if anything is the exception that proves the rule.

Props for using a quality framework. We use Sass, but I have all sorts of respect for LESS users as well.[quote=“ramez, post:76, topic:16697”]
Now a word about Bootstrap. I have used it for many years. I think it is / was great. Bootstrap is amazing to build your own theme out of it. Especially for websites. However, I am starting to believe we no longer have the need for complex themes any more.
[/quote]

I would say that trend is certainly coming true. The biggest thing that bootstrap does well now (as in v4) is building in automatic changes in layout for different screen sizes. Bootstrap is also important for people who want to (or have to) support ancient pieces of shit (aka Internet Explorer).

A top notch website with a dedicated designer doesn’t have to. It can really look different. The problem with that of course is that it can quickly look old.

I’m going to leave this off with my final thoughts and then I would really like to remove this conversation from here.

Inline style is not going to destroy the world. It has it’s place, and React has made inline style super easy to use since it is just javascript. I love that aspect in certain areas and have used it to great effect. I also have had to work around it using pure javascript style manipulation when React’s batching made some animations choppy (those tied to a drag action for example).

CSS is the better answer for larger more complex sites. Picture for a moment this very real scenario:

I have a button. It’s a special button with some really special behavior that doesn’t change once regardless of where it shows up. The only thing that ever changes is the style. Additionally, the button has no freaking clue where in the application it is, because it shouldn’t know that. That button is nested 4 components deep in a CMS “modal” interface. The interface has different uses, and the button style (specifically in this case background color) changes depending on which view.

How would you implement this? Answer this not very convoluted, but complex example and you will have a little insight into what I’ve been describing. With inline style you have to set a property that tells the component at each level which of the views it’s in. Or you set some kind of application state with redux, and now your button is tightly coupled to your application state. In either case, you are tightly coupling the button with the options for it.

In CSS you solve that simply by having the “smart” component (view container component, or whatever you want to call it) that owns this instance of the component has a style sheet attached. It sets a style scoped to the view, with a nested style attached to the button.

In Scss syntax:

.view_number_1 {
  .important_special_button {
	background-color: blue;
  }
}
.view_number_2 {
  .important_special_button {
	background-color: green;
  }
}
.view_number_3 {
  .important_special_button {
	background-color: orange;
  }
}

This is simple and concise and leaves the door open to easily changing the text color also:

.view_number_3 {
  .important_special_button {
	background-color: orange;
	color: slategrey;
  }
}

all others still use the pre-defined default style.

This is important in maintaining large applications. It is also important if you ever work with a designer who will say, “on this page let’s change it” and you didn’t make the text-color changable. Now you have to modify 4 components to enable your designer’s one line change.

Anything you do to generalize this and allow the styles to be passed and inherited cleanly is truly reinventing the wheel.

3 Likes

Guys, yeah, I guess it was a contentious thread. I think it’s ok, hopefully everyone learned something new, especially myself. I didn’t mean to insult @lassombra, when I said “your dislike for javascript seems irrational”… that is just what seems to me. I hope the word “seems” tells you this: it’s not the truth, it’s a perception.

It’s true that if you only have a hammer everything seems like a nail… and you can build a house out of only wood and nails, or you can build with only concrete and steel. Neither one is necessarily better, but certainly different.

I don’t think there’s a need to fight about the one, right way to do it, we can explore different ideas and possibilities.

I think you nailed it here:

With only a hammer you can build a house. Inline style isn’t going to destroy that house, it works, and is tolerable for a house. I don’t build houses, and those of use on here fighting for CSS aren’t building houses. You can’t build a skyscraper with inline style, it just doesn’t work. If you are building small, proof of concept, or fun apps that are just a house, then yes, you can get away with it.

However, you started this thread by talking about learning style. That means, to drag the analogy out a little further, that you want to learn about construction. Contractors that only build houses can tell you about something they’ve done that worked. Contractors that build sky scrapers though are going to tell you about the only correct way, because when it comes to sky scrapers, doing it wrong is deadly.

Ok, I drug this analogy way farther than I meant to. My point is I saw this thread advocating and actually pushing for inline styles, which with my experience with monolithic apps I know has limits. But I saw someone clinging so tightly to their hammer that they couldn’t see the crane and welding tools I was offering them. Damn it! I’m stretching the metaphor again, what have you done to me?

In short, when it comes to monoliths, there is a right and wrong way. Your micro app may not matter as much, but disregarding decades of battle scars in the industry is how we got the php hammer. If you are building the app for the purpose of learning, please learn the best tools available, and in that subject there is little debate among experienced knowledgeable devs.

[Edit] I told myself I would walk away from this. @vonwao, if you want to continue this, perhaps we can go over PM. Then we can talk about more specific cases as relevant to you and avoid these hypotheticals that are getting us all riled up?[/Edit]

1 Like

CSS Modules still the best if you are using webpack

1 Like