Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Is there a professional way to share class selectors across multiplie pages?

Posted on 2014-09-18
5
106 Views
Last Modified: 2014-09-19
When one class is used on multiple pages and I want to make a change to that class, I don't know how that will effect the other pages, how many pages, which pages, it becomes complicated. I have to search painstakingly through every page looking for the same class name.

I would prefer to just share a class selector across one page only and have a different class name for each page even if there is duplicate css code, at leased I can find the elements in just one page and be certain I did not mess up another page.

I only have one css page and I group my css selectors by the page they refer to so they are easier to find, I don't have to scroll up and down the css page as much. For example,

account.php -  all class names start with a.
center.php -  all class names start with c.
upload.php -  all class names start with u.

.a-form-outer {
	font-weight: bold;
	margin: 100px auto 0px auto;
}

.a-wall-inner {
	margin: 100px auto 0px auto;
}

.c-page-lock {
	margin-left: 20px;
}

.c-no-nav {
	margin-left: 10px;
	width: 602px;
}

.u-logo {
	display: block;
	margin: 10px 0px 30px 10px;
	width: 170px;
}
	
.u-logo:hover {
	background-color: #FFF;
}

Open in new window


Does someone know if there is only one professional way to do this?
Do you know how google, yahoo or any major site handles this?
Thanks.
0
Comment
Question by:kadin
  • 2
  • 2
5 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40332756
Add another class to the element on the page where the changes should be and add the new css for that element.
There is no way to say only apply this class on this page.
0
 

Author Comment

by:kadin
ID: 40333461
Thanks for your response.

I am not sure we are understanding each other. What I am trying to find out is not what is a fix for one element with a shared CSS. Because that fix would be after the fact and would require me to search through every page of the site looking for any and all classes using that same class name to determine if and how my change to that CSS is going to effect the other elements sharing that class.

I am trying to find out what strategy the pros at google, yahoo, facebook etc. use when designing their code. Do they share their classes with the whole website or do they share classes by website region, or by page.

From my perspective it seems to be a trade off between (having some duplicated code in my CSS file [same code, different class names], but easier to maintain with greater certainty that I don't break another part of my site)  vs. (keeping my CSS file as short as possible [I guess for efficiency] by using a one class fits all strategy).

I try to follow Google's style guide but I could not find anything pertaining to an overall strategy.
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 250 total points
ID: 40333490
When you code a class it is website wide, if you need to style something differently on one page etc then you add another class
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 250 total points
ID: 40333597
A class represents a particular presentation format that should apply site wide.  If you are concerned about a change causing problems on other pages, it is because you have some kind of non-consistent design format where chaos reigns.

Either use another class or use an id.  As for how big sites and other professionals do things.  They don't just declare properties for a class.  The document the use of the class so there should not be a conflict. creating new classes for each page and keeping a monolithic stylesheet across the whole site will just bloat the pages and eventually it will end up a collection of chaotic junk.

If you are not interested in doing it right with documentation that defines the role of a given class, then create a file or DB table to keep track of where you are using classes.

Cd&
0
 

Author Closing Comment

by:kadin
ID: 40333780
Thanks for your help.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
ebay style="image-orientation: 90deg;" 2 52
Problem to refer to value 8 62
Help to align the buttons in a row 2 43
Css regex 6 38
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question