-1

I got a lot of repeating CSS conditions (with only numerical differences) in my CSS file. I'm wondering how I can make it have less conditions?

ps. I know LESS or SASS can make it easier, but it will still generate the same amount of CSS in the end.

FIND CSS HERE

Any other feedback is also welcome!

Ullas
  • 11,450
  • 4
  • 33
  • 50
pascalvgemert
  • 1,247
  • 1
  • 13
  • 28

3 Answers3

2

There isn't really much you can do. In the end the browser will interpret the css as it is looking in your file.

You could do the following though:

1.Group selectors together. This may affect the readability and structure of your css. 

.row div.gutter-lg-10,.row div.gutter-md-10 { padding-right: 10px; }

2.You can minify your css for production which will save you some bandwidth.

Varun Nath
  • 5,570
  • 3
  • 23
  • 39
  • Thanks for the tip, I will adjust the part of the `.row div.gutter-lg-10 ..`. And of course I will minify it. (check github project) – pascalvgemert Jul 29 '14 at 08:46
2

What you're doing is the absolute opposite of Good CSS(tm).

The point of having CSS next to HTML is the separation of semantics and presentation. This is achieved through anchoring CSS rules to generic markup so the HTML is not polluted by presentational concerns. This of course only works if you use generic classes and IDs that are relevant to semantics. So for example:

<p class="red-background-with-bold-font">This is extremely wrong</p>

<strong class="error">This is extremely right</strong>

The second example is good because it does not imply anything about presentation, and you might change it to italic green one day without breaking semantics, or touching HTML.

Now have a look at your CSS:

.row div.gutter-xs-60 { padding-right: 60px; }
div[class*="col-"][class*="-x-10"] { width: 10px; }
div[class*="col-"][class*="-p-35"] { width: 35%; }

What you're essentially doing here is making a huge-ass CSS monster to avoid having to use inline styles. There is however absolutely no added value in that, since the HTML is still hardcoded in the end: you cannot change the meaning of -x-10 to have a width of 20px one day without causing major obfuscation, meaning there was never separation of concerns to begin with.

So in the end - inline styles are not always wrong as is sometimes taught. If you are rendering some custom elements, just use them, it's what they're there for:

<div style="width:20px;padding-right:60px">This is far better and clearer...</div>

<div class="row-x-20 gutter-xs-60">...than this draconic invention</div>

And it renders a lot faster too, avoiding the hundreds of partial-classname selectors, and saves tons of bandwidth in mostly unused CSS.

Niels Keurentjes
  • 41,402
  • 9
  • 98
  • 136
  • You are forgetting it's a grid CSS, so where in your example are the media queries? Also the re-use of styles I don't see in your example. The second thing is, that this is just an idea I've got and I'm trying to find out what works best. – pascalvgemert Jul 29 '14 at 08:51
  • Another thing is that you can do the following thing in your css: `

    This is better and has more re-use

    `     – pascalvgemert Jul 29 '14 at 08:53
  • 1
    No, that's just as bad, you're still storing presentational information (`red`, `background` and `bold`) in your HTML. Semantics *describe* content, they don't *style* it. The grid doesn't matter in this. Always think of how your HTML is going to render in a braille browser, or a speech browser. The classes still have to be relevant without a screen medium. – Niels Keurentjes Jul 29 '14 at 09:12
  • But than the only way is to use a column-grid like bootstrap, but this will restrict you in the flexibility of course. Or you can choose for no grid at all and just plain css. I agree with you that presentational info in classes need to be discourages. But in this idea I can't get passed it. (unless you have an idea). And still the media queries are not being solved with inline css. – pascalvgemert Jul 29 '14 at 09:19
0

I would like to add something. As I can see there many repeating styles in your CSS which can be generated by a javascript code using simple loops and conditions, this way you can achieve much smaller CSS file (just in case you want to save bandwidth).

You can see here how you can do that here : How to dynamically create CSS class in JavaScript and apply?

Ofcourse this may lead to a performance issue(because you will generate that script every time you load that page) but that will be negligible to notice. Give it a try :)

This can be one of ways of having "less conditions in you CSS file".

Community
  • 1
  • 1
Rohit Rawat
  • 144
  • 2
  • 11