I need suggestions for getting over my CSS block | Ask Metafilter
I need suggestions for getting over my CSS block | Ask Metafilter
|
|
I need suggestions for getting over my CSS block. March 27, 2007 1:46 PM Subscribe. I have found it impossible to grasp the concept of CSS. …
Similar Posts
- It allows you to write fast, maintainable, standards-based front end code.
- It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.
- Separate structure and skin
- Separate container and content
HTML And CSS – Containing Blocks Tutorials
Another important concept when working with CSS positioning is the containing block. … I discussed this a bit in tutorial 7, “Using CSS. …X-Reference: CSS : display : block
block cross reference. (CSS display block block) … CSS : display : block. Context of the notion in the technology: … Related Keywords: CSS display block …5 Ways To Optimize Your CSS
Recently I have been working on a social networking site that was experiencing downtime due to the amount of stress its users were putting on the server. I spent a good amount of time looking for ways to improve the speed of the site, and one of this was through CSS optimization.
Structure your CSS and HTML elegantly
“CSS” Stands for Cascading Style Sheets. Notice the first word, “Cascading”? The power of this language is readily available, and it is up to you, the designer, to maximize its use. It is an interesting concept that is not too difficult to grasp. Try to find instances wherein this can be applied.
For example, the code below:
<p class="someClass">First</p>
<p class="someClass">Second</p>
<p class="someClass">Third</p>
<p class="someClass">Forth</p>
<p class="someClass">Fifth</p>
Can be rewritten this way:
<div class="someClass">
<p>First</p>
<p>Second</p>
<p>Third</p>
<p>Forth</p>
<p>Fifth</p>
</div>
But what if our code looks like this:
<p class="firstClass">First</p>
<p class="someClass">Second</p>
<p class="someClass">Third</p>
<p class="someClass">Forth</p>
<p class="someClass">Fifth</p>
We can take advantage of CSS by rewriting HTML this way:
<div class="someClass">
<p class="firstClass">First</p>
<p>Second</p>
<p>Third</p>
<p>Forth</p>
<p>Fifth</p>
</div>
Then, cascade rules defined in “firstClass” to overwrite styling principles in “someClass”.
This is just one simple example, and I hope you understand what I’m trying to get at. Just keep in mind the concept of cascading rules and it won’t be long before things like this become second nature and automatic.
Re-structure your CSS
I am a huge fan of single line CSS style. Not only does it save up space, it is also more readable. The readability bit is debatable, though. Simply put, I find it easier to locate relevant tags if the tag names are all on the same left-hand side and I do not have to scroll so much to find what I need to change. After all, designers are only concerned with CSS selectors, not the rules that are applied to it.
Optimize Your CSS
Some time ago, I wrote an article about improving website performance using CSS optimizers. I still use CSS Optimiser up to this day. For very large CSS files it is a quick and easy way to rewrite things that may otherwise prove too time-consuming to optimize manuallyt.
Use CSS Shorthand Rules
When I was still learning CSS, I found shorthand rules to be quite daunting and confusing at times. But I strived to learn the shorthand syntax for every rule simply because I am lazy and do not want to bother typing the same thing over and over not to mention having to memorize all the rule names.
Compare the example longhand its equivalent shorthand below.
Original longhand:
#someid {
background-attachment: fixed;
background-color: #000000;
background-image: url(images/image.png);
background-repeat: no-repeat;
background-position: left bottom;
}
Shorthand version:
#someid { background: #000 url(images/image.png) no-repeat fixed left bottom; }
The folks over at SitePoint has a good introduction to the art of CSS Shorthand that I can recommend to anyone who’s willing to learn.
Server-side Compression
Server-side compression techniques have long been put to use by large scale applications for two main reasons. First, bandwidth is precious and expensive. Second, it does not require having to modify code for it to work. What it does require, however, is supported server software (or hardware). Hence the term “server-side”.
One such solution can easily be deployed on Apache servers. Once again SitePoint has written an introduction to server-side compression using Apache and mod_gzip.
The drawback to this is increased CPU load. Indeed, server-side compression is a double-edged sword, but usually the pros far outweigh the cons.
anchors
$description … CSS implementations, presentation suggestions of anchors … different colours is to assign classes to the CSS anchor pseudo-class, such as: …Laying out elements with the CSS box model
The CSS2 specification uses the box model as the basis for describing everything … The box concept is the principle of CSS layout. …Let’s All Get Inline (In a Block, In a Block)
Let’s All Get Inline (In a Block, In a Block) … display-inline:block … So, armed with our new code let’s add it to our existing CSS and see what happens. …Web Training Center – CSS Box Model
… we must understand an important concept of divs, namely the CSS Box Model. A <div> and indeed all box level elements contain many properties, but it is …LVS Associates Online Registration
inline-block is new to CSS 2.1 It causes an element to generate a block box … http://www.webdesignfromscratch.com/css-block-and-inline.cfm. Box Model …Microsoft.com: a failed redesign
Looks like Microsoft is the latest to be guilty of a failed redesign. Their current homepage iteration sports a table-based layout circa 1998.They’ve also released a beta preview of their new new homepage – which you can view only with Internet Explorer. (When I attempted to view the preview site in Firefox, I was simply redirected to the existing homepage.) The preview site appears to use semantic markup, although the source has been compacted down to only a few lines, so it’s nearly impossible to read. And with no Web Developer extension in IE, outlining all block-level elements (or all table cells) isn’t an option.
Funny that with the IE 7 team touting how standards-compliant the new browser will be, the Microsoft homepage flies in the face of standards. (Is that for-real ironic or only Alanis ironic?) Having worked for a few large corporations, I understand that one department’s products can appear to be the antithesis of another department’s, with the worker bees in both departments being none the wiser. Still, this is pretty egregious, given the emphasis Microsoft claims to be placing on web standards.
Although… we’ve been there before with Microsoft, haven’t we? Perhaps these things are cyclical.Read | Permalink | Email this | Linking Blogs | Comments
Object Oriented CSS
“How do you scale CSS for millions of visitors or thousands of pages?” This is the question that Nicole Sullivan tried to answer in her presentation at Web Directions North in Denver. Entitled Object Oriented CSS (OOCSS), the concept has since then garnered overwhelming response from the community.
OOCSS is more than just a tool, it is a way of thinking. There are many advantages to adapting this concept. Primarily:
OOCSS is governed by two main principles:
Take time to check out the Object Oriented CSS presentation. There are 64 slides, but it is definitely worth going through. If the text is hard to read, try viewing in Full Screen mode.
