CODEWITHSUNDEEP
cssfuture
Shane
Shane

Reputation: 89

Inheriting a class into an id declaration for css - any discussions on this?

I am not sure where to pitch this question. Here or w3 consortium or ...

One of the main concepts of using css when introduced was to get rid of the extra code in an html page. It allowed the cleaning up of html so the inline styles and other cruft was reduced and html become human readable again, as well as more easily parsed by readers etc.

Over time this concept seems to be getting lost.

Example:

<div id="MainArticle" style="border:0px; margin:10px; width:80%; color:red; align:center;">

became 

<div id="MainArticle">

with a link to the css file dragging the rest of the design in.

However most modern websites you see code more like:

<div id="MainArticle" class="col-md-9 col-sm-12 col-lg-8 MainArticleClass FloatingStyles OtherClass">

Which IMHO is heading back into the cluttered mess css was meant to remove.

One way around this would be to be able to declare a div in css and then import the class into the div leaving only one identifier required in the html e.g

<div id="MainArticle">

style.css
#MainArticle {
 @import col-md-9, col-sm-12, col-lg-8, MainArticleClass, FloatingStyles, OtherClass;

}

I would assume something like this would require the same bandwidth to download, as the css file would remain 99.5% the same, except a change in the #MainArticle declaration but there would be a reduction in the html size as you remove the class declarations there - for a sum total of no extra data used.

There would be some over head looking up the imports in the css, on the fly, but most computers are so fast we aren't talking a lot of pain there. By allowing only div identifiers to import only class identifiers you get rid of circular dependencies.

Maybe there would be an issue of specificity invoked but that's not over likely.

Is there any discussions around on something like this? any pointers to articles etc would be appreciated.

I know you can overload the css declarations e.g you could add #MainArticle to the declarations for all the css classes referenced but that is a nightmare to maintain and breaks external stylesheets pulled in.

e.g. 

.col-md-9, #MainArticle{
width:75%;
}

.col-lg-8, #MainArticle{
width:66.66%;
}

Upvotes: 3

Views: 228

Answers (2)

SachinPatil4991
SachinPatil4991

Reputation: 774

You can use less or sass instead of css

LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for website. LESS is a dynamic style sheet language that extends the capability of CSS.

http://lesscss.org/usage/

e.g.

CSS File

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

Alternative to above CSS

Less File

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

To start off, link your .less stylesheets with the rel attribute set to "stylesheet/less":

<link rel="stylesheet/less" type="text/css" href="styles.less" />

Next, download less.js and include it in a tag in the element of your page:

<script src="less.js" type="text/javascript"></script>

Edit:

Instead of using less file with less.js it is better to compile less file and use genrated css file in webpage You can find usefull examples on

https://www.sitepoint.com/a-comprehensive-introduction-to-less-mixins/

https://mayvendev.com/blog/10-less-css-examples-you-should-steal-for-your-projects

Upvotes: 1

scooterlord
scooterlord

Reputation: 15369

Here are my thoughts on this one.

On one hand, you have a framework - a ready solution, with pre-specified classes down to the point where each property is a class.

On the other hand, you have your own custom written css, especially written for your project's needs.

A framework can never predict what each project's needs would be, so they provide a solution that is easy to learn and can help you immediately develop. In an imaginative scenario, a framework would be specified based on your design's needs.

In your example, it looks like classes are overused, but each one has its purpose. Specifying an id would actually make that element unique.. but would it be really? What would happen if you needed the exact same style in another similar element? You would have to refactor your css. What would happen if you had an almost the same element? You would have to duplicate a class and refactor. Maintaining unique elements is not easy.

Importing, extending would beat the purpose. Why do that? To keep HTML clean? What would happen if you needed to change one class contained in that import? You would have to parse all elements that use it to amend it. If you were to do all those imports, why not write it from scratch?

...however, what you suggest would have no performance impact. Would not even hurt bandwidth, since most servers today serve gzipped files, and gzip uses an algorithm where duplication of code does not lead to bigger file size. Modern devices are also fast enough to do the translation on-the-fly, transparently.

I have been developing for almost 20 years and I have tried multiple ways to keep things organized, with a small footprint, etc. There's no definitive answer to your question. I agree, HTML markup gets ugly, but it's either one of the two.. either messy HTML or messy CSS. I would always go with messy HTML because it's easier to maintain.

Upvotes: 0

Related Questions