Creating abstraction with CSS

Status
Not open for further replies.
avi

avi

Keymaster
Posted in SO also : http://stackoverflow.com/questions/18301716/creating-abstraction-with-css/18301936

I am not really sure it is the correct title, if not please free to change it. I am not native english speaker, so I will try my best to explain with help a pic :

oRKii.png


Lets assume that, I have a plain HTML file. This file makes use of buttons and use some UI library (like Yahoo Pure). But instead of using classes by Pure, I use my own classes, lets call it myButton , which in tern use Pure CSS (or any other). But how ?

Here I am trying to create an layer of abstraction so that my css file can use some different UI libraries (be it bootstrap, pure or foundation) & the code still would work.

Without this solution, I would be doing like this (my initial code would be) :
HTML: 
<html>
<head>
<link rel="stylesheet"href="http://yahoo-pure.com/pure-min.css">
</head>
<body>
<button class="pure-button"type="button">Some Button</button>
</body>
</html>
Then if I have my change of heart and decide to use bootstrap :

HTML: 
<html>
<head>
<link rel="stylesheet"href="http://twitter-bootstrap.com/bootstrap.css">
</head>
<body>
<button class="btn" type="button">Some Button</button>
</body>
</html>

So I have to make two changes here, one is source css file (not a big problem) and class for button (a very big problem if the code is large). (Imagine the changes I have to make if I am making use of grids & other stuffs)

What if I am able to do something like this :

HTML: 
<html>
<head>
<link rel="stylesheet"href="my-magic-stylesheet.css">
</head>
<body>
<button class="myButton"type="button">Some button</button>
</body>
</html>

So, when I feel like switching from Bootstrap to Pure, I only make changes inside my-magic-stylesheet.css & it should still work. My HTML file refers to my-magic-stylesheet.css and my-magic-stylesheet.css could refer to any library I specify.

One solution that comes to my mind is, which is quite simple, I write a python script. First I make note of different classes and their respective UI library. Then I will write a CSS in which I will use generic class names like myButton. Then I will feed this css to my script with name of UI library as another input. The script will run through the css file & make changes accordingly. (like changing myButton to btn if another input to script is bootstrap)

But is there any better approach to this ? May be without using python script ? Or any solution that comes to your mind ? also I am new to CSS tools like LESS/SASS. Can I use them in anyway to solve my problem ?
 
TL;DR: Forget it. Take your time to pick a good framework and stick to it.

Longer version:

[Element = HTML element, a.k.a. "tag"; Component = Framework-provided stuff - buttons, menus, etc.]

You'll need to use a JavaScript script to translate class names in the browser, or, like you mentioned, a custom-made program that changes classes as needed. While neither of these solutions is ideal, both are quite easy to implement. You'll only need a few lines of code for the class name replacement and a map of class names to change to/from.

But that won't solve the problem. While some components have similar markup in all frameworks (you'll only need to change class names at the most), many have completely different markup - some frameworks might need more or less elements for a component, elements in different configurations, etc. Also, some other components might not be present in one or more frameworks.

Even if you somehow write a smart script that takes care of all these changes for you, a component can have different colors, sizes, behavior, etc. in different frameworks. For instance, your background and foreground colors might not match in all frameworks, or some combinations of components might just look stupid in some frameworks without manual editing. And don't even get me started on the issues you'll face when you start using JS in your pages. So basically, as your web page starts to get complicated, you'll find it almost impossible to make your code framework-independent.
 
ThaBurger said:
Even if you somehow write a smart script that takes care of all these changes for you, a component can have different colors, sizes, behavior, etc. in different frameworks. For instance, your background and foreground colors might not match in all frameworks, or some combinations of components might just look stupid in some frameworks without manual editing. And don't even get me started on the issues you'll face when you start using JS in your pages. So basically, as your web page starts to get complicated, you'll find it almost impossible to make your code framework-independent.
Click to expand...
I agree with you totally here. It becomes out of control with a web page full of CSS elements.

I am working on it ever since and I think I have made some progress (%1). I am working on writing my own language and a compiler for it. The code written in my language would specify requirements. Then based on some hocus-pocus it will produce either LESS or SCSS or CSS itself.

So I am working on that magic 'hocus-pocus' these days. I will post it back here when I have made some significant progress. I will be working on this for next 6 months or so :P
 
  • Like
Reactions: harryneopotter
ThaBurger said:
You'll need to use a JavaScript script to translate class names in the browser, or, like you mentioned, a custom-made program that changes classes as needed. While neither of these solutions is ideal, both are quite easy to implement. You'll only need a few lines of code for the class name replacement and a map of class names to change to/from.
Click to expand...
Yup, Easy to implement ! With HTML5 it is clean :
HTML: 
my_some_div.classList.add('myAwesomeCSSClass');
and remove, toggle functions come in handy.


 
This is a big problem while changing framework. Generally peoples stick to a single framework.

Still if you need this, few idea which I can give are...

#Idea 1
Create a stylesheet say, my_awesome_stylesheet.css and link to it. Use myButton class for your button.

Now copy paste the css of the framework inside myButton class which you desire to use.

Eg, First time myButton would have the code of pure-button when you were using Yahoo Pure, but when you change your mind to use bootstrap you can change the CSS of myButton to that of button of Bootstrap.

I know, this idea is odd and idiotic enough for long code and not also recommended. But if it's about a button then it's fine. But while implementing grid and all, if you think you'd change framework then this can be a problem.

#Idea 2
Or you may download the css file locally and can change the class name to that of existing. This would be far better than that.
 
ThaBurger said:
Can you explain what you're trying to do briefly?
Click to expand...
As far as I understand, he wants to Link CSS files flexibly without depending on the framework.

Eg. Say he's using Yahoo-Pure CSS and then the button class for that will be yahoo-button. So he has linked Yahoo Pure CSS file at HEAD and then used yahoo-button class everywhere in the file where he desired to use that button. Ok?

Now he's bored of that Yahoo Pure CSS and wants to change it to Bootstrap, and for that the button's class will be sat bt-button.

Now here he don't want to go through all the hassle of changing the class of button's from yahoo-button to bt-button. Though this looks simple for a class, but what if he needs to change multiple class.

He want's something dynamic like he'll be using myButton as say for button's class, and dynamically upon his selection of the CSS File, it'd be updated, i.e. his class of myButton would be updated.
 
Too much hassle for little benefit. Just change the CSS code for the class. OR use Js to do it.

But if someone does create a tool/custom version it might be really use full. You know a version of all the frameworks, that have similar names for classes so you can just swap out the css files when ever you want.
 
My solution using PHP. Create a set of variables and set them accordingly to the framework you are using and use these variables in the class names for different UI elements . That way you can easily swap libraries .
 
krishnandu said:
#Idea 1
Create a stylesheet say, my_awesome_stylesheet.css and link to it. Use myButton class for your button.
Now copy paste the css of the framework inside myButton class which you desire to use.
Eg, First time myButton would have the code of pure-button when you were using Yahoo Pure, but when you change your mind to use bootstrap you can change the CSS of myButton to that of button of Bootstrap.
I know, this idea is odd and idiotic enough for long code and not also recommended. But if it's about a button then it's fine. But while implementing grid and all, if you think you'd change framework then this can be a problem.

#Idea 2
Or you may download the css file locally and can change the class name to that of existing. This would be far better than that.
Click to expand...
Idea #1 : I has no problem with this :P and I am working on something similar lines
Idea #2 : bad idea. You have to change class names everytime and also wherever those class names are being used. have to do mapping with names of classes to my names and all stuff.

krishnandu said:
As far as I understand, he wants to Link CSS files flexibly without depending on the framework.
Click to expand...
Explained correctly :)

Party Monger said:
Too much hassle for little benefit. Just change the CSS code for the class. OR use Js to do it.
Click to expand...
Not little benefit. I consider it as a cool problem to solve ;-) with JS, its already discussed, please read old posts.

ThaBurger said:
^ I understand all that. I want to know what solution he is working on.
Click to expand...
I am brainstorming and re-thinking over and over. Nothing concrete yet.

challapradyumna said:
My solution using PHP. Create a set of variables and set them accordingly to the framework you are using and use these variables in the class names for different UI elements . That way you can easily swap libraries .
Click to expand...
Again very bad. Just you to render simple HTML + CSS you have to use PHP. And secondly, I hate PHP, its just disgusting :P and also even with JS also it can be done. btw can you give me some simple example ?
 
Status
Not open for further replies.
Top Bottom