For the past few years, I've been building up a set of class names and ID's to my library that are semantic and reusable.
As websites are made up of web pages, and pages are made up - mostly - of text, websites have taken on many of the semantic names assigned to books, magazines, newspapers and documents. Tag names like "header", "footer," "blockquote", etc. WordPress has followed suit, with content labels like "excerpt", etc.
This is my rationale for some of my class-name choices, and - accordingly - I use a list of class names like:
excerpt - for excerpts of text from articles or pages
callout - for text callouts
strapline - for the company's/website's slogan (I also use slogan)
earpiece - for an ad or box either side of the masthead / page (only recently started using this)
banner - obvious
featured - for any element, be it an image or an article, that is featured
column - for any div or paragraph that is a column
The list goes on...
Then there's a list of class names I used that are perhaps more "reusable" than they are "semantic". For example:
group - given to the containing (parent) block of floated (children) elements
button - for any link or submit input that is styled to look like a button
alt - for any alternating element or alternate style
first and last - for the first element and last element (usually children) in a group
Again, the list goes on...
But what about some layouts or elements that don't fit into the magazine layout names? Take a look at SquareSpace.com's homepage, for example. What would the jargon / technical name be for content lead-ins on a homepage? E.G. Three columns of say 300px wide each, that show a snippet from a section of the site - the "Social Integration", "iPhone & iPad", and "Blog Importing" links/snippets as a reference?
Squarespace.com has 9 of these 'things' on their homepage, that help you find the info you're after...
In journalism, the parent / collective name for this is a "flatplan" - A one-page plan with boxes representing all the pages of the magazine. Each box has a short description of the content of the page. Used to plan the order of the content.
What would you guys call this?
Some suggestions from friends have been to use: excerpt, snippet, preview, trailer and abstract (like a book abstract).
Does anyone else battle with naming some layout elements like this??
I personally think you delving far too deep. It's great that you're putting thought into it, but don't waste time battling over the class name. Just try to answer why this is styled differently as opposed to how it should look - pick a name and move on! :)
This is a forum... ...so I thought I'd post a topic worth discussing?
If you look at how HTML5 has introduced a heap of tag-names like, nav, header, footer, article, aside, etc that are all references to journalistic layout, I thought it would be a relevant topic. With HTML5, we have semantic names for many elements and types of content, but I reckon we might be missing a few? Either that, or we need better, semantic, reusable class names for different types of content.
Anyone can pick a class name and move on. I do it all the time. I'm just trying to avoid a situation where you end up with sites likes MailChimp and SquareSpace, which are brilliant, but use class names like, "one-third", "colthirdthree", and "colRight300". What do those even mean? And how reusable are they?
Check out http://www.w3.org/QA/Tips/goodclassnames. I'm definitely thinking about the why, and not the how... I'm trying to avoid a presentational class name. And I'm also trying to avoid something as bad as "one-third" or "grid-3". And I was actually hoping for some more meaningful discussion...
The most important thing when you choose ids and class names is that if you come back to the code 3 months later, you don't have a hard time identifying which css rules are for which elements.
Essentially, if it works for you, that's all that really matters. We should consider somebody else down the line tampering with the code, however I've learned that it's pretty difficult to write my code to satisfy everybody because everybody has different ideas about how to lay out their CSS.
Semantics is important, but I'd argue it's more important for HTML then CSS, because HTML is structure whereas CSS is styling.
As websites are made up of web pages, and pages are made up - mostly - of text, websites have taken on many of the semantic names assigned to books, magazines, newspapers and documents. Tag names like "header", "footer," "blockquote", etc. WordPress has followed suit, with content labels like "excerpt", etc.
This is my rationale for some of my class-name choices, and - accordingly - I use a list of class names like:
The list goes on...
Then there's a list of class names I used that are perhaps more "reusable" than they are "semantic". For example:
Again, the list goes on...
But what about some layouts or elements that don't fit into the magazine layout names? Take a look at SquareSpace.com's homepage, for example. What would the jargon / technical name be for content lead-ins on a homepage? E.G. Three columns of say 300px wide each, that show a snippet from a section of the site - the "Social Integration", "iPhone & iPad", and "Blog Importing" links/snippets as a reference?
Squarespace.com has 9 of these 'things' on their homepage, that help you find the info you're after...
In journalism, the parent / collective name for this is a "flatplan" - A one-page plan with boxes representing all the pages of the magazine. Each box has a short description of the content of the page. Used to plan the order of the content.
What would you guys call this?
Some suggestions from friends have been to use: excerpt, snippet, preview, trailer and abstract (like a book abstract).
Does anyone else battle with naming some layout elements like this??
Any comments and feedback would be appreciated.
Thanks
Jon
This is a forum... ...so I thought I'd post a topic worth discussing?
If you look at how HTML5 has introduced a heap of tag-names like, nav, header, footer, article, aside, etc that are all references to journalistic layout, I thought it would be a relevant topic. With HTML5, we have semantic names for many elements and types of content, but I reckon we might be missing a few? Either that, or we need better, semantic, reusable class names for different types of content.
Anyone can pick a class name and move on. I do it all the time. I'm just trying to avoid a situation where you end up with sites likes MailChimp and SquareSpace, which are brilliant, but use class names like, "one-third", "colthirdthree", and "colRight300". What do those even mean? And how reusable are they?
Check out http://www.w3.org/QA/Tips/goodclassnames. I'm definitely thinking about the why, and not the how... I'm trying to avoid a presentational class name. And I'm also trying to avoid something as bad as "one-third" or "grid-3". And I was actually hoping for some more meaningful discussion...
Essentially, if it works for you, that's all that really matters. We should consider somebody else down the line tampering with the code, however I've learned that it's pretty difficult to write my code to satisfy everybody because everybody has different ideas about how to lay out their CSS.
Semantics is important, but I'd argue it's more important for HTML then CSS, because HTML is structure whereas CSS is styling.