CODEWITHSUNDEEP
cssoopinheritanceinterfacemultiple-inheritance
Oneezy
Oneezy

Reputation: 5013

(OOP Technique) Inheritance vs. Interface --- same concept?--- (CSS Technique) styling tags vs. styling classes?

Forgive that crazy title...

I'm trying to understand the concept of Inheritance vs Interface in object oriented programming. So I'm trying to relate it to something I know already, which is CSS.

In CSS, you can choose to style in a hierarchy that allows elements to "inherit" a style:

(Like inheritance in OOP?)

    a   { color:red; text-decoration:underline; }
    p   { background:black; color:white; padding:20px; } 
    img { background:silver; padding:2px;  }

or, style with .class (which is a better practice):

    .main-links      { color:red; text-decoration:underline; } 
    .main-paragraphs { background:black; color:white; padding:20px; }
    .main-images     { background:silver; padding:2px;  }

(Like interface in OOP?)

My question is:

Is this same concept in CSS similar to Inheritance vs. Interface (for OOP)? Or do I have the complete wrong idea.

Upvotes: 0

Views: 340

Answers (2)

Guffa
Guffa

Reputation: 700312

If you compare OOP to CSS, you will find that you can compare interfaces to styles, but there is nothing like inheritance in CSS.

Interfaces in OOP works pretty much as applying classes to an element. In the same way that you can add several classes to an element to combine different looks, you can add several interfaces to a class to combine different behaviours.

If you would have inheritance in CSS, it would be something like this:

.main-links { color: red; }

.info-links { @inherits: .main-links; font-weight: bold; }

Here one rule would inherit another, so that you could apply only the class info-links to an element to also get the implementation for main-links.

(Of course this wouldn't work in CSS, as the rules doesn't have names but selectors, and the selectors doesn't even have to be unique so they can't be used to identify a rule.)

Upvotes: 1

Ayush
Ayush

Reputation: 42450

Short answer: You have the completely wrong idea. There is absolutely no way one can explain OOP inheritance / interface to you using CSS.

Inheritance and interfaces are programming concepts (very fundamental design patterns) while CSS is not a programming language (not turing complete).

There are plenty of very easy-to-follow tutorials / articles online that will give you a good understanding of both concepts. I recommend you read them.

EDIT: Well, on second thoughts, maybe, just maybe, inheritance could sort of be explained using CSS. Just as style properties cascade in CSS, class methods and properties 'cascade' down to derived classes. However, you'd be much better off reading an introductory tutorial than attempting to understand these concepts via CSS.

Upvotes: 1

Related Questions