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.