CODEWITHSUNDEEP
csscode-cleanup
SaturnsEye
SaturnsEye

Reputation: 6499

Can I shorten my CSS?

Here is my original CSS to apply different colour backgrounds:

.one-colour {
    background-color:#153a63;
}

.two-colour {
    background-color:#f16c24;
}

.three-colour {
    background-color:#337db9;
}

I know you can do multiple CSS classes such as .one.two.three {...}

But is my CSS condensed down as much as possible? and I don't mean just putting the code onto one line to make it "shorter".

Upvotes: 1

Views: 473

Answers (3)

SW4
SW4

Reputation: 71140

But is my CSS condensed down as much as possible?

Yes(ish)

Each CSS rule is setting the same property style to a different value. As such, you have condensed the ruleset to the minimum number of rules to allow this level of distinction. If anything, you could simply change background-color to just background- if background properties aren't set in other rules which this could override.

*Although my predisposition is that this should be a comment, I guess in essence it is effectively an answer to your question.

Additional Methods Update:

As mentioned in the comments, there are some other (overkill?) methods for condensing:

  1. Put everything in a single line, remove whitespace (minify)

  2. Shorten your class names, e.g (.one-colour -> .c1), as noted below this is a subjective, context sensitive decision

  3. The last style setting in a CSS rule does not require a trailing semi-colon in order for the rule to process, so you can also remove these

  4. Convert your HEX colors to their 3 digit counterparts (approx), #036, #F63 and #36C

Upvotes: 5

Danield
Danield

Reputation: 125433

Depending on how you use these classes, there might be a way to remove one of those classes.

If you use those classes in a particular container - you could apply one of the colors to the container and then override it only on 2 of the inner divs.

Again, it depends on how you use the classes.

Upvotes: 1

Markie
Markie

Reputation: 760

Yes, I would say so. If you wanted to start doing things to all the classes at once (like add a black border to them all) then you could combine that onto one line, as you suggested. Otherwise, it looks as compact as it's going to get at the moment. I can't suggest an improvement.

Upvotes: 0

Related Questions