CSS Naming

DAL · #1 (**permalink**) 01-27-09, 12:15 AM

Every time I start a new project I think to myself "This time, I'm going to make sure I create CSS style names that make sense and are easy to find" then I get half way through and find that everything falls down.

I've read up on the web naming conventions but these sites dont really go deeper into the discussion past 4-5 main areas on page design.

My current problem is that I generally have quite complex layouts which envolve pushing out a little here and a little there for example;

I've just completed a login page which has a short box as the page container then an advert unit that sits on the left (inside) and then some text. To the right is the links for lost your password. Then the login boxes and a submit button. The whole thing is padded out with nice neat lines which dont go all the way to the edges. This meant that I had to have a padding area inside each section and the css list just went crazy. I currenlty use over 15 different classes for this simple looking page.

Whats the best way to name stuff as I get lost in it all, I think it may be down to the problem of actually wanting to just get on with the page. I did wonder if indexing/referencing would be better but I'd have to lookup everytime I wanted to use a style. The problem I constantly face is this;

for a text span option I could have this list (in fact I probably do somewhere)

.txt_lightred_11px_bold_leftaligned
.txt_lightred_11px_bold_italic_leftaligned
.txt_lightred_11px_bold_underline_italic_leftalign ed
.txt_lightred_11px_underline_italic_leftaligned
.txt_lightred_11px_underline_leftaligned
.txt_lightred_11px_normal_leftaligned

.txt_lightred_11px_bold_leftaligned_padded3px
.txt_lightred_11px_bold_italic_leftaligned_padded3 px
.txt_lightred_11px_bold_underline_italic_leftalign ed_padded3px
.txt_lightred_11px_underline_italic_leftaligned_pa dded3px
.txt_lightred_11px_underline_leftaligned_padded3px
.txt_lightred_11px_normal_leftaligned_padded3px

.txt_lightred_11px_bold_rightaligned
.txt_lightred_11px_bold_italic_rightaligned
.txt_lightred_11px_bold_underline_italic_rightalig ned
.txt_lightred_11px_underline_italic_rightaligned
.txt_lightred_11px_underline_rightaligned
.txt_lightred_11px_normal_rightaligned

.txt_lightred_11px_bold_rightaligned_padded3px
.txt_lightred_11px_bold_italic_rightaligned_padded 3px
.txt_lightred_11px_bold_underline_italic_rightalig ned_padded3px
.txt_lightred_11px_underline_italic_rightaligned_p added3px
.txt_lightred_11px_underline_rightaligned_padded3p x
.txt_lightred_11px_normal_rightaligned_padded3px

This doesnt include the different colour and sizes I use across the sites but you get the picture! I love the way this all works as I try to avoid style="" tags but I fear I may need to go back to them if I dont get a logical solution to the problem.

PS: My spans are the least of my worries as correcting these is not too much of an issue, its the whole containter innercontainer innerinnercontainer innerinnerinnercontainer thing that I'm more concerned about, how do I think up good names? Is there a generator or a logic flow to creating them?

Cheers
Dal

wirehopper · #2 (**permalink**) 01-27-09, 10:43 PM

They are all .txt_lightred_11px

I'd start with this:

Code:

<style type="text/css">
body
{
color:lightred;  /* appropriate hex code */
font-size:1em;  /* site visitor can adjust the text size */
}

.right
{
float:right;  /* float or text-align as necessary */
text-align:right;
}

.left
{
float:left;  /* same as right */
text-align:left;
}

.italic
{
font-style:italic;  /* not sure if that's valid, but it's just an example */
}
#id_style
{
color:green;
}
</style>
</head>
<body>
<div class="left italic">
Left floated and aligned, italic content here
</div>
<div class="right" id="id_style">
Right floated and aligned content, green
</div>

You'll end up with too many permutations if you try to create a class for each. Also, if you have styles that only apply to one section, use ids. Then you can bundle all the CSS in that place and it won't affect other parts of the page.

DAL · #3 (**permalink**) 01-27-09, 11:13 PM

Thanks wirehopper

I see you're point but I'm using classes heavily as the site design is quite uniform and I was just using the text as an example as my main issue was harder to explain.

You mention in your script to use the 1em so that users can ajust the size of text. Well unfortunatly the site is not going to allow that as it would push everything out of alignment if the font size changed so I don't think I can get away with using that as an option. I'm a strong beleiver that Accessibility solutions should not come from the developer as the browser and OS's have full capability to help users to read and interact with the screen. I spoke to someone regarding this issue from the RIB (Royal institue for the blind) and they had said that they don't really find the 'guide'lines for Accessibility solutions very helpful and those that can't use the web - dont! full stop.

my problem is this;

I create a page with as many elements that are standard as possible but this always needs extending. I end up wondering what names to call my classes and how descriptive they need to be. I mean if I wanted a label class with padding set to 2px I may want a button in my label so I have to create one without a 2px padding. This also may require a different type of border or border line left or right only. I then have the problem of using alot of padding to line stuff up and create a nice layout but I end up with the battle of naming stuff. Here an example of what I mean; The image is just a mock-up of a login screen which has aprox 950x300 dim, can you imagine what I'm getting at as a full page is all the more complicated.

ps: I started labeling everything but this got stupid so I gave up; See if you can suggest some naming conventions (I may want to reuse these classes elsewhere and I usually use them over and over on the same page hence no ID's possible)

Cheers
Dal