moonpixel Separating semantic and presentational code is a great idea, however sometimes it’s worth not going 100% by the book.
For content like text and images I am finding, that a bit more HTML (XHTML) markup can save lots of time in the long run.
For example a floated image and some text:
XHTML which is short and sweet:
<div id="main-content"> <h1>Header <span>(some additional words)</span></h1> <p>Some text...</p> <img src="..." /> <p>Some more text...</p> </div>
and CSS using descendant selectors:
/*style for all h1 specifying text color, font size, font type, margins*/ h1 {color:#F00;font:25px "Times New Roman", Times, serif;margin:20px 0;} /*using descendant selector for additional text within h1*/ h1 span {font-size:14px;} /*using descendant selector for image within main content column*/ #main-content img {float:right;margin:0 0 20px 20px;border:1px solid #666;}
When I consider updating the content, changes for marketing purposes and fulfilling all client’s wishes, I always end up making same kind of changes, heading bigger for page 1, text within heading even smaller for page2 and no margin below the heading on that page as well, image full column width and no border (here the left margin is causing me problems and I need to remove the border), etc…
Therefore I am benefiting in the long run more from a markup which is slightly longer, but more flexible. Creating predefined classes which I can reuse in other sites and also can combine with each other to get the same outcome:
slightly longer XHTML but allowing much more flexibility:
<div id="main-content"> <h1 class="color01 serif margin-top margin-bottom">Header <span class="small">(some additional words)</span></h1> <p>Some text...</p> <img src="..." class="content-image-right margin-left margin-bottom border" /> <p>Some more text...</p> </div>
and CSS with predefined classes which can be reused on other sites:
/*reusable styles for all headings specifying only font size*/ h1 {font-size: 25px;} h2 {font-size: 23px;} h3 {font-size: 21px;} h4 {font-size: 19px;} h5 {font-size: 17px;} h6 {font-size: 15px;} /*reusable styles for any text - font sizes*/ .xxsmall {font-size: 10px;} .xsmall {font-size: 12px;} .small {font-size: 14px;} .medium {font-size: 16px;} .large {font-size: 22px;} .xlarge {font-size: 26px;} .xxlarge {font-size: 32px;} /*reusable margin styles*/ .margin-left {margin-left:20px;} .margin-right {margin-right:20px;} .margin-top {margin-top:20px;} .margin-bottom {margin-bottom:20px;} /*reusable float styles*/ .content-image-left {float:left;} .content-image-right {float:right;} /*text styles which I am creating specificly for each site*/ .border {border:1px solid #666;} .serif {font-family:"Times New Roman", Times, serif;} .color01 /*RED*/ {color:#C00;}
- Gradient Not Smooth - Photoshop CS4 Banding I had recently an issue with a black to dark gray gradient created in Photoshop CS4. This gradient was used for a website background, repeated along the y-axis, where it produced some annoying vertical blocks of solid color, example below: In order to get rid of this "banding" issue I......
- Why Install Wordpress3 or What's New in WP3? WOW!!! The long expected Wordpress 3.0 came out few days ago, instead of the planned 1st May release it was delivered almost together with the Football World Cup. All excited I did install it on my local server to see what's new in WP3. I must say I was very......
- CSS / HTML Template - Download I have been using the 960 Grid System CSS Framework , 960px frame divided into 12 or 16 columns, as for the kind of websites I work on (large graphics, less text) the pixel based layout is suitable. After I did about 10-20 sites using this framework I started realising......
- Custom Facebook Fan Page - Simple Steps Creating a custom designed facebook fan page using the Static FBML app: Log into your FB account and go to http://www.facebook.com/pages/manage/. Click + Create Page Select category, give it a name, create the page Go to http://www.facebook.com/apps/application.php?id=4949752878 Click Add to my page Select the page you have just created Click......
- Flash AS3 Links Made Easy - AS3 Link Class - Download Many times when creating banners with multiple clickable areas, it's a pain to do an event listener for each and a function to navigate to that particular URL. I needed something faster and created a "dead simple" as3 link class, which allows creating as3 links in 1 line. You can......
- PPC Free Recommendations Find Repeat Customers PPC Revenue When it comes to building customers, there are clients who buy once—and clients who buy lots of times. It’s the latter that you want to pack into your customer list; they’re worth their weight in gold. Big companies are good places to prospect for repeat......
- Top 7 Fundamentals For Google Optimization! Google SEO Tips And Techniques By Expert! Who doesn’t want to get Top Ranking Positions in Google? 1st Page Placement in Google is NOT difficult, you need to follow Google Optimization Guidelines, and this Article has Summary of the Seven Fundamentals for Google Optimization. Google optimization is about following Google guidelines, Google likes ethical SEO practices, those......
- Google Android News Product Description Latest tips, updates, opinions, and advice on Google Android & the T-Mobile G1 phone from Michael Martin.Kindle blogs are fully downloaded onto your Kindle so you can read them even when you're not wirelessly connected. And unlike RSS readers which often only provide headlines, blogs on Kindle give......
- Professional Blogging Roundup: All Saints Day Edition Happy All Saints Day, one day late, from Buildify. We hope your weekend has been productive and if it hasn't been yet, well we have another list of links for you to read through for some blogging ideas to help you get started. Corporate Blog Medium Shifting in Large Way......
- 4 Ways to Keep People at Your Blog The longer you keep someone at your blog, the more they read, the more they see your message. If you're selling something on your blog, your readers are more likely to purchase if they stay and read more. They're also more likely to simply keep coming back if they were......