CSS file size increasing curve | Andol
CSS file size increasing curve | Andol
|
|
These days i am doing some CSS&HTML work, editing the css file to make the html content displaying correctly. At the first start, the css file size
Similar Posts
- Documents
- Client files
- Copy
- Proofs
- Staged/Development area (folder for a “clone of the site” where you can make changes and get sign off)
- Downloads
- reset.css
- main.css
- structure.css
- typography.css
- print.css
- helpers.css
- More consistant rendering due to reusing ideal CSS techniques
- Easier editing and maintenance as you can better recall what names mean
- The start of code that can be saved and reused every time
- A class that floats an image left / right and gives it some margin
- The structure for an unordered list navigation
- The structure for a form
- external link, pdf and download icons
- clearfix
- png fix
- Typeography baselines and hierarchies
- etc…
- Font sizing (all normal text is 12px, featured text is 14px bold)
- Margin’s (normal margin is 10px between elements, margin between two content blocks is 40px, etc…)
- All navigation tabs will have 15px height and 13px font
- etc…
File Size Optimizing – CSS Standards FAQ
File Size Optimizing. From CSS Standards FAQ. Jump to: navigation, search … using CSS and semantic HTML, you’ve probably optimized your file size much …8 methods to bring your front end coding to rockstar levels
There are a lot of good front end developers out their right now. If you fancy yourself as a front end editor then you really should be looking at how you can differentiate yourself from the rest. Yes there are lots of “good” front end developers, but there are not a whole lot of excellent front end developers.
1. Improve Your Semantic Names
If you work in a team or ever revisit your code and need to update it then you should think about the quality of your class and ID names. It is not uncommon for developers to use class names like “box”, “wrapper”, or “container.” While you may think that these naming conventions or “semanitc enough” none of them describe the content that is inside them. Instead consider using HTML5 spec’s such as “content-sub”, “section”, “content-aside” or “content-sup.”
You and your team will have a much easier time sorting through code that describes the content than trying to remember the details of “box.”
Read more about semantic naming from Andy Clarke and A List Apart.
2. Improve the Organization of Your Files
I think it is reasonable safe to assume that most developers have at least started to organize their files by type (ie: a folder for images, css, javascript, etc…). You can go a step further and improve the organization even more, particularly any folder that is going to have a lot of files (such as Images in particular and CSS as a secondary.)
I find it best to create sub folders with in images and separate images based on design structure, buttons, headlines, photos, etc…
There are plenty of other folders you may want to create to keep the updating and growth of a site easy and efficient, including:
The Elements CSS Framework does a great job of organizing files based on the normal client/provider workflow.
3. Use Commenting in Your XHTML
Any time you end up developing complex layouts you are bound to use a lot of <div>s in your markup. This can be particularly confusing to go back and edit as it becomes hard to figure out which div is being closed where. You may see three </div>s all in a row.
To combat this simply add some coments at each </div> (or any other closing element if you find that it will be helpful) to let you know what element was just closed.
<div id="header" class="section">
<div id="header-logo">
<h1>HTMLiZER</h1>
</div><!--/#header-logo-->
</div><!--/#header-->
If you find it useful you can take it one step further and comment the primary area you would be editing (such as the main content area, sidebar, etc…)
4. Segment Your CSS
For small 4 – 5 page brochure sites your CSS will be pretty manageable even if you don’t spend the time and effort you should into organizing and commenting. Once you start developing web applications or large sites with a vast array of design “modules” you should make sure that you organize your CSS in way that is easy to manage.
I recommend splitting your css into logical different files for better organization, such as:
This way you don’t have to sort through all of the typography styling to find the area where you defined the size of the header. Likewise if you want to adjust the headings it is pretty simple to find it through a small typography.css file rather than a huge file that has everything.
5. Create a TOC With Comments in Your CSS
Every CSS file you plan on editing and extending over time should have a table of contents at the begining and a headline seperator at every section. This will allow you to easily jump to a section using “find” rather than scrolling for that one area that had the CSS you are hoping to modify.
EX
/***********
TOC:
=1: Header
=2: Content
=3: Footer
=4: Navigation
=5: Portfolio
****************/
/* ********* =1: HEADER *********** */
#header { … }
6. Compress and Combine Your CSS files
Even though it is easier to work on a site when you segment and organize your css into several different file names, it actually causes your site to load slower. The more calls the browser has to make to the server for additional files the slower it will load.
Before deploying your css files you should combine and compress them. Compressing them removes any uncessary whitespace, comments, etc… that is unnecissary when the site is live.
There are several handy tools to do this including this online version.
7. Create your own framework (or improve on another one)
As you get more experience under your belt you will find that you use the same methods and naming conventions over and over. This is helpful for several reasons and it should be encouraged. It has lots of benefits including:
Chances are that you end up rewriting the same type of code over and over again, simply because you don’t have it stored somewhere. Some examples may be:
Rather than reusing these bits of codes write modules into your own CSS framework (or you could imrpove on another one). This way you can streamline the development process so it takes less time and improve the consistancy of your work.
8. Develop your CSS to be modular or “object oriented”
You could assign every bit of code an unique ID or adjust the margins and padding per instance. Lots of coders do this to try and get the CSS as close to the designers comp as possible. However this is inefficient in development time and file size. Establish a set rule for differnt types of content and how they should be styled, this should include basic things such as:
This way you don’t have to rewrite the code for every new item added to the site. Additionally it will keep the site feeling consistant and well balanced visually. If all elements and every page follows the same rhythm it will feel more unified as a whole.
Some call this object oriented css, it is worth looking into for rockstar like front end coding.
css Zen Garden: The Beauty in CSS Design
A demonstration of what can be accomplished visually through CSS-based design. … Download the sample html file and css file to work on a copy locally. …Godbit Discussion Forum / Simple Newbie Question…CSS Absolute Div not …
Simple Newbie Question…CSS Absolute Div not displaying correctly. Hi All, First post here… one of the divs with absolute positioning on it…and can’t …Fixing a Bad Feedburner Subscriber Count
Google’s Feedburner is a fantastic service for managing RSS feeds and delivering useful statistics on those feeds, and they have a great API (application programming interface) for pulling those statistics and displaying them on your site. But lately, I’ve run into occasional problems getting at the information that Feedburner collects. Here’s the solution that I’ve developed for dealing with Feedburner’s flops.
I’m using Francesco Mapelli’s Feed Count WordPress plugin to display the number of feed subscribers I’ve accrued. It’s a great little plugin that allows you to generate a custom message associated with your feed stats. For example, in the subscribe section of my sidebar, there’s a little message that, as I write this, reads, “Join 2449 other happy readers!” That’s the Feed Count plugin at work. I find it preferable to those little Feedburner “chicklets” that are scattered around the web these days.
But here’s the problem: when Feed Count makes a call to Feedburner to grab my latest subscriber stats, sometimes Feedburner drops the ball when it returns the number. Instead of returning the number of subscribers, it will sometimes return a “N/A” instead, suggesting Feedburner couldn’t find my stats, and resulting in a sentence that reads “Join N/A other happy readers!” Not quite the message I intended. And worse, sometimes Feedburner will return a big fat zero if it can’t find my stats — and “Join 0 happy readers!” is definitely not the impression I’m hoping to make on first-time visitors.
So what’s my solution? When in doubt, turn to JavaScript.
A JavaScript Solution
I first wrote this JavaScript solution in the last iteration of CSS Newbie when I finally got sick of being greeted every morning with my “not available” subscriber count:
$spans = document.getElementById('subbox').getElementsByTagName('span');
if($spans[4].innerHTML=="N/A" || $spans[4].innerHTML=="0") {
$spans[4].innerHTML = "thousands of";
}
This solution relies heavily on the XHTML structure generated by the Feed Count plugin, but the concept could be edited to work with most any solution. Basically, I’m using JavaScript to find the 5th span (counting starts at 0) inside the #subbox id, which is the span generated by Feed Count that holds my subscriber count. The code checks the contents of that span, and if it finds one of the two dreaded values — N/A or 0 — it replaces that content with the phrase “thousands of” instead. It’s not as specific as I’d like, but it certainly gets the point across.
A jQuery Option
When I rebuilt CSS Newbie recently, I decided to upgrade this script to work with jQuery. I was already using jQuery for a few other effects on the page, so it made sense to cut down on the size of my code where available. Here’s the much smaller jQuery solution:
if($(".subscribers").html() == "N/A" || $(".subscribers").html() == "0") {
$(".subscribers").html("thousands of");
}
This code does essentially the same as the JavaScript above but in fewer lines and, I personally think, with greater clarity. It looks for the contents of the element with the “.subscribers” class (which would have been an absolute bear to do with JavaScript due to the lack of a getElementsByClass function) and replaces it if it’s on our no-go list.
This is how I’ve gotten around the inconsistencies of the Feedburner API. If you have other solutions or ideas you’d like to share, I’d love to hear them in the comments!
CSS Overflow Property Explained " DivitoDesign
CSS overflow. When your div specified height gets filled with too much content, … The CSS property Overflow can be used when displaying content. It regulates …Learn HTML and CSS – Use our free tutorials – Build your own website …
Provides guides and help for … Start learning HTML. Learn CSS … Use our tutorials on HTML and CSS and start building your own website in about an hour. …How to Position Your Photos and Images Using CSS | bluejar.com – the …
It doesn’t take much CSS to get your images displaying exactly how and where you … Lets start with the quickest way to position your images using CSS: …How to Position Your Photos and Images Using CSS | bluejar.com – the …
It doesn’t take much CSS to get your images displaying exactly how and where you … Lets start with the quickest way to position your images using CSS: …The Importance of Complementary Skills
If you’ve been a reader of CSS Newbie for any length of time, I’m sure you’ve noticed that not all of my articles are directly related to CSS. I also talk about HTML, JavaScript, content management systems, ecommerce solutions, and other related skill sets and areas of expertise.
This is for many reasons (for starters, I’d get bored otherwise!), but the main overarching rationale is that these areas of expertise are all complementary. Without HTML, CSS is useless. Without JavaScript, CSS can’t realize its full potential.
This means these skills are just as important as the CSS my site’s name suggests you’ll learn.
However, there’s only so much I can teach. I’m not an expert in everything related to web development, nor will I ever be. And while I consider myself pretty decent at writing these tutorials (which means my English degree wasn’t a total waste!), I consider myself to be a complete newbie when it comes to the art of “selling” my knowledge and authority. If there is such a thing as a natural marketer, I am not he.
Earlier this year, I came across Brian Clark’s (of Copyblogger fame) online course called Teaching Sells. I was immediately intrigued. Here was a guy with a complementary skill set who was willing to teach me what he knew. Brian’s expertise is not in building web sites, but in writing and teaching: the other half of what I do.
So I signed up for the Teaching Sells mailing list and downloaded their free report with the great title, “Forget Everything You Know About Making Money Online… And Start Making Some.” And that report was pretty motivating for me. So when the class opened up in February, I signed up right away.
I started out very excited and motivated. The course is full of detailed information, and comes with a lot of worksheets and planning guides you can download and fill out to map what you’re learning to your own personal projects (I have a manila folder full of those worksheets). But then… well, I’ll admit it: I didn’t make it all the way through the course!
I got busy with work, with freelancing, with planning my wedding (only 17 days to go now!). But here’s one benefit of the program that I don’t think Brian and his crew tout loudly enough: Once you’re a member of Teaching Sells, you’re a member for life.
What does that mean? That means I can go back whenever I want, and I’ll still have access to the dozens of learning modules, the forums, the downloads, the interviews… and anything new they decide to add to the mix down the road. So my new and revised goal is to take up the class again this fall, start back up with a whole new group of motivated, excited students, and see if I can make it all the way through this time.
So if you’ve got a few minutes, take my advice: head over to Teaching Sells and watch the new video they have up that explains what it is they do better than I ever could (they’re the marketers, after all).
And if you think their pitch sounds plausible, sign up for their email list. You’ll get the free report, some case studies in your inbox to get you started, and once they open the doors to their class, you’ll be the first to know.
And if all goes well, I’ll see you in the forums.
(Note: Yes, the links above are affiliate links — past members of the program are given the option to be affiliates for future offerings. This means if you click one of those links and sign up, you’re helping CSS Newbie. However, even if there weren’t an affiliate program, I’d still recommend this course to anyone and everyone looking to learn the art of teaching online! So check it out.)
