I realized that when copying a page in webflow it is not possible to choose whether the CSS file that comes with it should be copied either or not.
The CSS file stays the same and is just referenced to the new page which should work fine for some users, but not all I guess. So in the end when you make changes on certain elements on the new page it affects the original page too which is not what you would usually want (for that purpose there are Symbols).
Using combo classes is what I tried already and it usually works kind of OK but just imagine if you want to change an element where you already applied two or three combo classes.
That is a mess and you loose all kind of order and overview, and just think about you copy a third page…
This is the definition of how CSS works. And you should embrace it, instead of fighting it (because one CSS file per page isn’t going to happen, I can swear or bet a million on it).
Say you have two pages: Home and Jobs, and you want the buttons to have a different look on each. Well define the shared properties under the class .button and add a class for each page to add specific visual properties. .button.jobs will be big and yello, .button.home will be thin and blue. But they all will have 2px round corner defined by .button.
So once your page duplicated, and you want to add visual properties , do the following:
select element
look at its classes and read the message underneath the lcasses names, where it says how many of these elements will be affected on how many pages, if you modify it
add a class to make the element specific, unique, now the message states that only 1 element of this sort exists
style it to give it a unique look
And if you click on this button, you can go and select an upper class to modify this level:
I understand the theory and comfort of having one CSS for all pages.
And I also understand cascading and using combo classes as a benefit, but I can guarantee to any webdesigner, that after the third or forth page you will ran into big problems.
First it gets harder to find unique class-names and second the number of already used classes or errors will explode!
And one last and very important notice:
Webflow is a tool which promises to deliver website production for non-programmers.
The target group of Webflow are not HTML/CSS experts who think like a code-guy but more like a designer.
Thinking over all kind of classes and ids and page structure is not going to happen especially because for that you need to lay out the design in Photoshop first to get the idea.
But Webflow promises to save you that time and make you ditch PS.
I’m a webdesigner and have a 100 pages website with not a single CSS conflict, never, ever. (: And it’s not even a hard work to keep it this way.
I try to ease your pain, saying that unique css file per page will never happen so you can work on improving your workflow to avoid generating conflicts.
While this is true, the opposite is not. Compared to other tools like Macaw, Welfow did a tremendous job keeping its tool in total phase with CSS. On the entired visual settings panel, the one affecting the css, there is only ONE shortcut tool that isn’t directly linked to a css property (the horizontal centering that make an object display:box + margin 0, Auto.) All the rest is pure CSS. So people skilled in CSS and HTML evolve like happy fishes in Webflow: this tool is also made for them.
In photoshop, on paper, in mockup tools like balsamiq, wether you hand code a site or use webflow, you should always prototype and mockup a design, always, and once done, draft the structure you need, block, hierarchy. This is how design works. Working right away in a design tool with the goal of publishing it as is isn’t at all a good practice. You end up facing all te trouble you’re describing here and can’t cope with.
All I am asking for is to for a minor change how pages are cloned which will not hurt anybody
and which is absolutely easy to implement for the Webflow team.
People who want to keep a single CSS file could still do so, but this is not a religious
commandmend.
And as you will know better than many other people, the HTML standard leaves the option to
connect multiple CSS files with a single webpage.
This is how HTML works and not my personal opinion!
Especially if Webflow takes pride in their clean code and keeping HTML/CSS standards up
high, they should finally accept the very rudimental HTML standard of adding
multiple CSS files into a single webpage.
I don’t understand your problem with that and why you try to convince me how working the
other way around is better.
Usually I do mockups in Photoshop first, but who does 50 pages mockups?
Maybe you do, but for what do I need Webflow then (as a person who knows how to code)?
If you do the hard work before you even open up Webflow, then for example as a Creative
Cloud Member you can fire up Dreamweaver, skip Webflow and achieve the same
result.
You and me like Webflow because of it’s flexibility of making changes and design websites
without fiddling hours manually in CSS files.
That safes designers a ton of time and that is maybe the biggest reason why Designers who do know
how to code should try Webflow.
Otherwise they can stick with Coda, DW or whatever.
Design only people have other tools too which don’t generate clean code, but then they don’t
need to care anyway because they simply don’t have a clue about it.
Just want to add to this that not all websites are the same. In my case for example, I am building a site where there are unlikely to be any commonalities between pages, as it is closer to art than business. I still however wish to host everything off the same domain. It is very unhelpful for me to have the same CSS file for everything, as I do still like to use some common descriptors.
I would at least like to see something that gives you a more prominent alert when you first reuse a class on a different page, as when I am working fast I don’t necessarily notice the ‘1 on other pages’ line, and this can lead to me breaking things unintentionally. I’ve got to the point of having to prefix every class with the page name to avoid mistakes.
Ideally, I agree that it would be preferable to have a choice about whether or not you want to use the same CSS, just as you would if you were coding.