Jump to content

grouping css styles for future use

Recommended Posts

I am just wandering if there is any way in css file to created something like groups or objects of css styles that can be applied to particular class/element/id later.
For example I want to have few different background styling (bg1, bg2, bg3) and border styling (brd1, ,brd2, brd3) and I want an element .class to have bg2 and bdr1 styles. I just dont want to duplicate css styles and trying to avoid giving too many classes to an element.
Hope it make sense.

Link to post
Share on other sites

CSS doesn't have a mechanism to do that, but you could look into CSS precompilers like LESS or SASS which include a lot of functionality to organize CSS development.


I would not suggest littering your HTML with class names that describe what the element should look like. You should use the class names to describe what the element is or what kind of content it contains.

  • Like 1
Link to post
Share on other sites

You might want to re-think putting in a lot of styling that you are not using. There is no way for the parsers to kinow what will actually be used by the page so they must parse and serialize all declarations and properties. That will add a small additional time to the page load and make the display slightly less responsive because the re-paint cycles take longer and you end up with fewer paint cycles per second because the rendering engine has to work with a larger amount of data then is actually needed.


The degradation is not big unless you create a really big mess, but from a maintenance standpoint you may be creating more work for yourself instead of less when you look at how simple it is to add, remove of change CSS rules.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...