3

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%;
}
Shane
  • 71
  • 4
  • Great question. This might help you: https://stackoverflow.com/a/1065476/10768127 – Aniket G Mar 17 '19 at 04:04
  • You've exactly identified my primary issue with most CSS frameworks like Bootstrap: You end up filling up the classes with a whole bunch of classes that define layout and behavior. I tend to prefer hand-carved code - frameworks are meant to speed development and provide a consistent look / feel, but I think a much lighter (both in HTML *AND* in CSS) site can be built with smart, hand-written CSS. – random_user_name Mar 29 '19 at 18:19
  • What you're looking for is [@apply](https://tabatkins.github.io/specs/css-apply-rule/) - a proposal for a CSS native mixin that was abandoned because it caused too many problems. Tab Atkins explains [why @apply was abandoned](https://www.xanthir.com/b4o00) – Alohci Mar 31 '19 at 01:53
  • Thank you for all your answers. I apologise for my delayed response (life took over). In short - I am hearing that it would be a good idea but without using less or similar to preparse the css, there is no way to do this. Mayube I'll head over to the css dev pages and look at discussions - as the main reason for css was to remove markup from code and now we have gone backwards - which is a pitn for those with disability etc – Shane May 17 '19 at 23:14

2 Answers2

1

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

SachinPatil4991
  • 774
  • 6
  • 13
  • If possible, could you create an example – Aniket G Mar 29 '19 at 03:43
  • 1
    So - the problem with this is that it duplicates the CSS rules, which will result in a larger CSS file.... and I would STRONGLY recommend compiling the LESS / SCSS _before_ use, rather than using a JS compiler. – random_user_name Mar 29 '19 at 18:22
  • ....and at some point you need to alter slightly class `.rounded_corners` and then you must parse all classes to either remove it, or add override properties... – scooterlord Apr 02 '19 at 06:15
0

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.

scooterlord
  • 15,124
  • 11
  • 49
  • 68
  • What if you had 5 h1's and you wanted all those styles to be the same. Each of those styles contained 7 premade classes. It would be more efficient to put those premade classes into **one** class and use that one class in those 5 h1's – Aniket G Mar 30 '19 at 00:37
  • Indeed! But you would write one new custom class, without importing or extending currently existing ones. There are no rules you must obey, depending on the occasion act accordingly. – scooterlord Mar 30 '19 at 09:52
  • You may want to use `col-12` and some other classes. You can't currently use those – Aniket G Mar 31 '19 at 05:32
  • A ‘col-12’ class might not be needed at all since ‘h1’ are usually block elements... but this also depends on the usecase. – scooterlord Mar 31 '19 at 07:50
  • That isn't the point. There might be other bootstrap classes they want included – Aniket G Apr 01 '19 at 04:37
  • It all comes down to what you mean efficient. Efficient might be ugly. As a last note, there isn't any specific ruleset you can follow. Either use them or not. And who's 'they'? If yo are referring to the customer, then sure, use what they like! – scooterlord Apr 01 '19 at 06:03
  • I'm looking into the BEM methodology and looking for / writing a parser that goes through all pages, pulls out only the used CSS and turns that into a preparsed css file. Naming all divs with an id and then addin 1 - 2 classes. Dropping out 90% of the css. Even small pages now regullary have 5 or more style sheets (bootstrap, fonts, fotn awesome, lightbox, owl, site styles ..) – Shane Aug 23 '21 at 06:28