Lately, I have taken interest in discussing methods of creating sexy stylesheets. While CSS can be used to create sexy websites, writing CSS can actually be an artform by itself. The way in which CSS is created, structured, and maintained can be a thing of beauty.
So how does one create sexy stylesheets? What characteristics would your stylesheets have?
A few months ago, I had the opportunity to present on this very topic at Web Visions 2007 conference in Portland, Oregon. In preparing my presentation, I surveyed twelve people who work in web design and development. The results of this survey, combined with my own work experiences helped me to compile a list of essentials to remember when creating stylesheets.
01. Keep CSS out of the markup.
Linking and/or importing stylesheets would seem to be a no-brainer to the intermediate or advanced CSS developer, but I want to stress why this is so important. I’ve seen many sites start out with clean, well-organized CSS files but then get littered as time goes by, with embedded or even inline styles (due to fast updates needed on short deadlines, or possibly sometimes even pure laziness).
Imagine that you are working on an extremely large-scale website with hundreds of ways content can appear. You have fast deadlines, so you opt for making “quick fixes” or updates by using embedded or inline CSS. Years go by, and this habit continues… Until one day you’re told the site is being completely redesigned (but all the content is to remain the same), and you only have a week to build it (including testing).
Normally, this would have been a fairly simple task of updating the stylesheet(s). Except you have years worth of “quick fixes” scattered throughout the site — and no way to remember where they all are. So now you have to either a) find a way to clean everything up and get everything styled for the redesign in one week (Good luck!), or b) find a new job.
Don’t make your job harder than it really has to be. Linking and/or importing your stylesheets is not optional. Create it clean, keep it clean, and you’ll be much happier.
NOTE: Be careful of adding too many linked and/or imported stylesheets in your markup. If you’re tempted to create a new stylesheet every time you make an update or add new content, you’re not doing yourself any favors. Excessive linking and/or importing can make bug-fixing difficult, and make your styles harder to maintain. It is understandable to want separate stylesheets for different sections or components for larger websites (I’ll go more into that later). Just be careful that you don’t go overboard.
It is worth mentioning that linking too many stylesheets requires additional HTTP requests, which can add up, and potentially hinder performance. Also, Microsoft Internet Explorer 6 has a limit of 32 linked stylesheets.
02. Semantics is not just a buzz word.
You know I have to bring it up; semantics are your best friend. Beyond choosing the most appropriate, meaningful elements to describe your content, make sure also that you’re choosing semantic class and ID attribute values. Besides being the “right thing to do,” it really does make your life easier (and it makes the lives of your fellow team members easier too– if you working as part of a team). Take a look at the following rule:
.l13k { color: #369; }If you were new to the job, and you saw that in the CSS file, are you going to know right away what that class is for? Most likely not. This class name could be an abbreviation for something, but there’s no real way you can tell right off the bat. Alternatively, maybe you put it there, so you know what it means, right? Today. But will you know what it means three years from now?
Now, let’s take a look at this rule:
.left-blue { color: #369; }You might immediately know what purpose this class selector serves as you know exactly where the left-side blue module appears. So it would appear that this works. Until along comes that redesign you have to build in a week, as I mentioned earlier. In the redesign, this module is now to be positioned on the right, and colored red. The class attribute values no longer makes any sense, so now you have to either change all your attribute values, or leave it as it is (which could lead to mass confusion).
It is always best to refrain from using colors (either the color name or its hex value) or width/height dimensions in your class attribute values. You should also avoid any attribute values that are presentational (such as “box”).Presentational attributes defeat the purpose of separating presentation from content.
Finally, let’s look at this more appropriately named rule:
.product-description { color: #369; }Here you can see that the rule styles product descriptions, no matter how many times your design changes. Clarity is a beautiful, beautiful thing.
03. Take advantage of commenting.
Commenting your CSS files can be a great deal of help to you and others during development if you use comments in creative and meaningful ways. At the most basic level comments provide little reminders why a certain rule is used. But you can use comments to really help improve organization and efficiency.
Reminders and notes
The common approach for commenting, leaving reminders and notes for yourself and other developers can help avoid confusion later. Keep these brief and simple. For example:
/* Turn off borders for linked images */
img { border: 0; }
Time stamp and signature
Some designers and developers also note the date and time that the CSS file was last updated, along with their name or initials. This information can provide a quick indicator of who to contact, as well as how up-to-date the file is.
/* Sushimonster Typography Styles
Updated: Thu 10.18.07 @ 5:15 p.m.
Author: Jina Bolton
----------------------------------------------------*/
Depending on the project, this can be a good idea, particularly if you are working on a team. Keep in mind that some organizations require leaving this type of information out (some companies prefer to keep names and dates out of files), so it is best to find out if there is a mandate on this sort of thing.
Organization
It’s a good idea to use comments to indicate the different sections within a CSS file. For example, if all header styles are grouped together, you can use a comment to section these styles off from the next section’s styles:
/* HEADER
----------------------------------------------------*/
I’ll go more into this a little later, when discussing “Separating style types.”
Comment flagging
If you have your CSS file organized into sections as I described above, comment flagging can also be useful to make it easier using FIND to skip down or up to the parts of the file you want to see. You can use a character (such as an equal sign [=]), along with a keyword (typically the name of the section, such as “HEADER”) to provide “anchors” in your CSS file:
/* =HEADER
----------------------------------------------------*/
This is particularly useful in long and complex stylesheets. You can read more about this at Stop Design.
Reference
A less common, but nonetheless useful approach is to use comments as reference guide. One example of this might be to include a color guide as you can see in Steve Smith’s CSS file:
/* COLORS
Body Background: #2F2C22
Main Text: #B3A576
Links: #9C6D25
Dark Brown Border: #222019
Green Headline: #958944
*/
You should place this guide at the top of your CSS file to help you remember what color values you use throughout your site. Another example is of an index-like approach. Here you can define different sections so that you can jump down to them (perhaps by using comment flagging). Here’s one example:
/* GENERIC
HEADER
SIDEBAR
FORMS
TABLES
FOOTER
*/
/* =GENERIC
----------------------------------------------------*/
04. Know when to use conditional comments or hacks.
There are many articles regarding the problem with hacks, and why Conditional Comments are a better way to handle Internet Explorer issues. Then there are articles that say otherwise. While I agree that Conditional Comments can be a much better solution than littering your CSS file with hacks, only recently have I come to realize there are instances where they are actually not the most appropriate solution.
Imagine that you want to set a minimum height for an element. The IE6 developers did not implement min-height, so you know that you can use height, which will be treated the same way. Does it make sense to create a whole new stylesheet, and inject it by way of Conditional Comments in your markup, when all you need is this one rule? Would it make better sense to keep the min-height and height rules together, and opt for a small “hack” within the same CSS file? In this case, I would consider it less efficient to use Conditional Comments.
Another thing to consider: if you have multiple places that your styles are located, using multiple CSS files and Conditional Comments can make your debugging process more difficult. Also, if you need to alter something (perhaps the min-height value in the above-mentioned scenario), you have to open more than one file to make this change. In many cases, this may not be such a big deal for you, but imagine if you have something defined in your main CSS file, and then redefined in 3 different IE stylesheets. That could turn out to be a hassle later down the road, especially if another developer making the edit doesn’t realize that these overrides exist.
If you do use Conditional Comments, I recommend leaving a comment in your main stylesheet letting you or a fellow developer know that an IE-specific rule exists. That way when you have to edit a height or something of that nature, you know that you have more than one file to open.
As always, if you do use hack, remember that browser updates can change what works later down the road, and the hack you use now may not work later versions.
05. Organizing selectors and declarations
Always, always keep your CSS clean and organized. I prefer organizing my selectors by style groups:
- reset styles
- typography styles
- layout styles (header, content, footer, etc.)
- module or widget styles
- etc.
Then, within each of those groups, I organize selectors by DOM hierarchy (working down the page, from the outside in):
- any parent styles (containing elements, working outside-in)
- block-level element styles (paragraphs, lists, etc.)
- inline element styles (links, abbreviations, etc.)
- etc.
Then within those, I work by element types:
- paragraphs
- blockquotes
- addresses
- lists
- forms
- tables
- etc.
Finally, I prefer to organize my CSS declarations by style type:
- positioning (with coordinates) styles
- float/clear styles
- display/visibility styles
- spacing (margin, padding, border) styles
- dimensions (width, height) styles
- typography-related (line-height, color, etc.) styles
- miscellaneous (list-style, cursors, etc.) styles
Some people like to organize declarations alphabetically. It doesn’t make sense to me, but it might make perfect sense to you. Whichever method you choose, stick with it, and be consistent.
06. Creating a framework
When it comes to developing CSS, If you find yourself doing the same things repeatedly, it is a good idea to consider creating a library or framework. A framework can be made up of a group of stylesheets that act as a foundation for your site, and help speed up your development time. Typical stylesheets you may find in your framework might include:
- screen.css - A screen CSS file can either have all your styles you want to be used for on screen, and/or can import additional styles, such as the following:
- reset.css - A reset CSS file can be used to “reset” all the default browser styling, which can help make it easier to achieve cross-browser compatibility.
- typography.css - A typography CSS file can define your typefaces, sizes, leading, kerning, and possibly even color.
- grid.css - A grid CSS file can have your layout structure (and act as the wireframe of your site, by defining the basic header, footer, and column set up).
- print.css - A print CSS file would include your styles you want to be used when the page is printed.
One example of a framework is the Blueprint framework put together by Olav Bjørkøy (which based itself off of work developed by authors including Jeff Croft and Eric Meyer). Another popular framework can be found at the Yahoo! User Interface Library. Many developers do feel that these pre-built frameworks contain markup and CSS that are a bit “bloated” and also that they contain presentational class attribute names.
NOTE: As I was writing this article in its draft stages, Jeff Croft released the post What’s not to love about CSS frameworks?, in which he mentions in the comments he was told that people think I am strongly against frameworks. I’m not sure where this came from, but as I stated in my response, I am not against CSS frameworks, and am very much for them.
For the best results, I recommend that you create your own framework that works best for you or your organization.
07. Balance readability and optimization.
Styles in formatting vary from developer to developer. Some developers use formatting styles that offer great readability, and then optimize the files (removing comments, spaces, tabs, carriage returns, etc.) before pushing the file live. This is a great technique and one I would recommend (done carefully). However, if you are somehow in a situation where you can’t really go through those steps, try to find a style that balances readability and optimization. Steve Smith has a great suggestion that offers a little bit of both.
Also, consider using hyphens instead of underscores. Microformats use hyphens as a standard separator, and certain older browsers have a hard time with them. You can read more about this at Underscores in class and ID Names.
08. Master your text editor.
Just as an artist has proper tools they know well, it’s important for a designer/developer to know the tools they use well. For CSS, that would be the editor you are using.
There are many text editors to choose from: TextMate, Coda, BB Edit, TextPad, DreamWeaver, etc. I’m not here to tell you which one to pick; they all have their pros and cons, and the right editor for you is up for you to decide. However, once you have decided on a text editor, make sure you learn everything you can about it. Find out what the shortcuts are, and learn all the tips and tricks you can.
Mastering your text editor is the best way to speed up your development time, and help you be more much more efficient when creating sexy stylesheets.
09. Use version control.
Smoother maintainability is also an important part of creating sexy stylesheets. This is where version control can be your best friend. It’s not only helpful for teams, but it can be a lifesaver even for the sole designer/developer.
Some applications have built-in mechanisms for source control. DreamWeaver uses a check-in/check-out system (that can help make sure that a developer doesn’t edit a file that is already currently being edited), as well as synching capabilities (which lets you sync and merge your local files with your remote files, or vice versa). This can be very handy, but are somewhat limited.
Subversion (SVN) or Concurrent Versions System (CVS) are great tools to use for more robust management, with additional options, like being able to revert, view changes (which is extremely helpful for teams — you can track who added/edited/removed code and when they did it), and resolving conflicts. There’s a great article by Jonathan Snook, called “Hosted Subversion” you can read for more information on how to set this up quickly and easily.
10. Create and maintain a style guide.
While in some cases, a style guide is an author’s guide with grammar rules and writing standards, it can also be used to outline standards for design, development, and content. A style guide is a great way to have a reference manual that can clarify rules on typography, grid, color, image sizes, etc.
When creating a style guide, it is a great idea to provide reference for the markup and CSS. This reference can be used as a handbook for the development team and future developers. It can include defined layouts, in which you can list the different layouts that can be used, and provide the associated markup and styles.
Finally, you can also leave steps for quality assurance for developers, (such as checking validation and accessibility) to ensure the highest quality.
Conclusion
Being an expert in CSS is so much more than having advanced CSS skills (i.e.: fully understanding the cascade, the box model, and how browsers work). I encourage you to think about ways you can constantly and consistently improve maintainability and efficiency. Think beyond what is designed in the comp, even if that is all that you have been provided. Make the CSS intelligent and plan for the future. Overall elegance in workflow is essential to master.
Great article.
One thing I’ve found that helps readability of stylesheets and maintenance is to indent certain blocks to indicate that a group is related to one another. Its very similar to HTML.
So for example:
#messages {
float: left;
width: 920px;
font-size: 120%;
}
#messages h2 {
margin-bottom: 10px;
color: #999;
}
That way I can scan down the stylesheet and start recognizing chunks of code instead of trying to read line by line.
Crap it didn’t indent.
So basically that “#messages h2″ would be indented once to show that it belonged to “#messages”.
Great article. I wholeheartedly agree.
I do think that a suitable analysis of designs, wireframes and functional specs should be done before putting down a line of CSS (I’ve written about CSS system analysis here). I find that rarely do you get the chance to spend the day or so (or week!) that’s really required on very large projects.
I’ve had that chance on the latest project I’m working on and have created a document showing all the types of ‘module’ that have been included in the design. That should go on to form the style guide for future developers.
Thanks again for the article.
Fantastic article Jina, I agree with pretty much everything you have in this article. Lots of good reminders about CSS. I do have a question, however. What did you mean “avoid presentational values such as ‘box’?” I’m assuming you are just talking about naming schemes but I’m still not sure why that applies.
Also what is your opinion of line-by-line CSS vs one line CSS. I prefer the later but curious what other people are using and prefer.
A solution that I have used with conditional comments is:
instead of using conditional comments to add a complete stylesheet, use them to add a wrapper div around your whole page with and ID of ieFix. This way you can just add #ieFix in front of a copy of the class that has the problem. The article is here if you are interested.
@Jason
I think the idea is pretty cool but you’ll have some people blasting it for the extra div. When you use it, do you mind having that extra div in all your layouts?
All great advice, except I somewhat disagree on the
.left-blue { color: #369; }part.Absolutely, do not use cryptic identifiers, however, I try to refrain from putting any visual cues in my ID or class names, because
left-bluemight not always be blue. Andtop-linksmight not be on the top someday.Nice article!
This is genius, yet so obvious, I can’t believe I never thought about doing it before. I’m all the time scrolling down through my stylesheet to see what color I made my nav links or other colors.
WOW. Perfectly said … this has to be one of the best posts of the year.
Dennis - Yep. I have seen some people do that as well. I haven’t found a way to make it work for me, but it is a very good suggestion.
Beth — did you actually read that section? You’re basically saying exactly what I said and yet you disagree? :)
Jason, thanks for the tip, though I have to agree with Dennis in that I would prefer not to have that extra div ID (which serves a purely presentational purpose).
Everybody, thank you for the wonderful comments. :)
Hey Dustin - I basically meant that it is best not to call something like blue-box or box-280 or even just box, because it’s presentational thinking. It’s better to use names that make more sense to the content that is within that box.
This is a very useful, and very timely article, thanks Jina, as I think that amongst all the recent discussions about frameworks, that you have outlined many of the areas that can can both save time and promote best practice. This is essential reading.
Very nice collection of tips. Thanks Jina.
Tom Klingenberg put together a first draft of how to use docblocks to document your styles. There is no parser yet to generate your styleguide out of that documentation, but it would be a nice step forward.
http://cssdoc.net
Great piece, Jina. I’ve often thought that organization and elegance of the style files themselves was a topic overlooked by many CSS books and article (we dedicated a chapter to in in Pro CSS Techniques, basically recommending the same stuff you’re talking about here). Glad to see it get it’s due!
As to the bit about the frameworks: clearly, the two people that told me you were against the idea of frameworks were mistaken, and I’m glad you cleared that up. That is, after all, exactly why I wrote that blog post: to let those who had been quoted as being against frameworks set the record straight (either by explaining why, or letting the community know that they were being misquoted).
Nice work!
[…] I wrote an article that was based off of my presentation I gave at Web Visions 2007, called “Creating Sexy Stylesheets“. It talks about ways to be more efficient and have better maintainability when writing CSS. Check it out. I also have a domain by the same name, that I use for a collection of CSS-related articles. […]
Lots of good ideas in this list. Over time I’ve come to appreciate including IE hacks in a separate stylesheet (via conditional comments) and now I try to keep all hacks in one sheet. I use comment blocks to organize this stylesheet in the same order that I import my proper stylesheets. For example, if I’m importing layout.css, typography.css, and modules.css, my hack file will have three blocks labeled
/* typography */,/* layout */, and/* modules */. The order of rules in the hack stylesheet mirrors the order of the other stylesheets. This makes hacks easy to find and avoids the confusion of many hack files.[…] I read a great article today on Vitamin called Creating Sexy Stylesheets. Its a great little 10 part list of ways to really make your stylesheets come out looking beautiful. I have been striving to create better code, not only for myself, but also for other developers who may end up seeing my code. Recently, I have started with a better naming convention for elements on the page. I think using a text editor helps keep your code clean and organized and trying to keep the amount of styles to a minimum. I have seen some stylesheets where the developers have obviously gotten lazy and just added in style after style for quick-fixes, the article points this out as a flaw. […]
@ Jason
That is a great technique and one that HAML/SASS for ror is based on.
The first time I used HAML/SASS I was giddy. It just made sense.
Creating Sexy Stylesheets…
[…]Being a CSS expert is more than just memorizing selectors. It’s also working to improve the maintainability and efficiency of your stylesheets, planning for the future and mastering your workflow. In this article Jina Bolton gives 10 CSS tips cull…
[…] Enterprise class. Here’s another buzzword for you: CSS frameworks. I bumped into that a while back, and for all the obvious reasons, didn’t chase the link down. Do I really need another overbearing framework to manage my CSS? Then I came across Blueprint CSS, a clean template that takes care of the basics, like typography, grid placement and prettier buttons. And it fancies itself a “CSS framework”. So there you have it. The label is obviously attractive to some people, and a “stay away!” sign for others. Apply with care. […]
[…] Vitamin just posted a great article on creating sexy (clean/organized/efficient/maintainable) CSS. It’s a great read from a great website. I am always looking to sexy up my styles and have been considering many of these concepts in a scattered sort of way. I figure to look to this post for a while when developing until some of this becomes habit. […]
wow Jina looks hot :) if that’s her real picture
Congrats :) This is very cool and useful article! *Bookmarked*
When I had similar questions a while back, I was pointed in the direction of this page on the Css-discuss wiki - http://css-discuss.incutio.com/?page=MaintainableCss which I found had some good ideas on the same topic.
“Over time I’ve come to appreciate including IE hacks in a separate stylesheet (via conditional comments) and now I try to keep all hacks in one sheet.”
That’s what I do too. Just use one CC to call in a single IE-only stylesheet and then use the various hacks to specify rules for different versions if need be.
Produire des feuilles de styles élégantes…
Le premier point de désaccord concerne son point 4 : 04. Know when to use conditional comments or hacks (Sachez quand utiliser les commentaires conditionnels).
L’idée est de dire que si votre feuille de style comporte quelques règles CSS qui……
[…] Vitamin Features » Creating Sexy Stylesheets (tags: css webdesign tips code web xhtml webdevelopment) […]
In addition to several of the sated suggestions, I also put a Table of Contents at the top of my style sheets to so I can see where I put something at a glance.
[…] Me ha gustado mucho el artículo Creating sexy stylesheets publicado en Think Vitamin donde Jina Bolton da una lista de 10 consejos esenciales a seguir para obtener hojas de estilos sexys, lo que viene a ser lo mismo que unas css con mayor grado de calidad y por tanto profesionalidad. Son los siguientes: […]
In point 6 you want to avoid using @import to include reset.css, typography.css and fonts.css as it generates additional HTTP requests which will negatively impact performance. It would be better to roll everything into one file before deployment. This can be made part of a build process or if you don’t want that overhead you could write a script to merge files on the fly (setting appropriate HTTP headers to ensure the combined file is cached by the browser).
Great article - tips for anyone of any level there.
Great article.
Teemow - Thanks for the link.
Ed - Great comment, though not everyone is able to roll everything into one file. Especially for extremely large-scale sites, where some stylesheets are managed by completely different teams (for example: one team makes the main framework, but another team might handle localization-specific styles) — sometimes you just have to have separate stylesheets.
But I don’t disagree with you that it’s better to have fewer HTTP requests. But sometimes they are unavoidable. :)
Great tips, thanks
Jina - I think I’d have to disagree - it’s particularly important for extremely large scale sites which is why Yahoo! is so busy stressing the importance of minimising HTTP requests as part of its 14 performance rules as well as releasing tools such as YSlow.
There’s no reason why you can’t work with different files in development (even using @import if required) and merge into a single file as part of the build process. If done well that should be transparent to the various teams.
I think with conditional styles people should not be lasy and copy and paste whole selectors over. Just add the elements you need to change in that selector. It saves a little space too.
Vitamin Features » Creating Sexy Stylesheets…
[…][…]…
Hi Jina, Thanks - I wish I’d read this at the start of the year.
A suggestion which I’d be interested to hear opinions on; if your CSS selectors are mixed with code, not just static HTML, I would avoid using CSS selector names that match used (or likely to be used) variable names in the code.
For example, if you use “comment” as a variable name and also use “comment” as a CSS selector, searching for everywhere you use that selector is very difficult. This is also a reason to use hyphens rather than underscores, variable name “blog_response” could be CSS selector “blog-response”. Unfortunately I’m learning the hard way :)
Thanks again.
Thanks for this very clear approach, Jina. I just wrote (what I though was) a very clean CSS with heaps of comments for organisational purposes whilst working for developers in a different branch of my large Australian government department on one of Australian governments most used websites. Unfortunately I had to work with “text goes here” and “editable text” in the wireframe mock up, making it hard to try to figure out what possible content might be, so had to resort to the “boxstyle” approach, so not as semantic as I would have hoped.
Anyway after all my commenting with the intention of making it very clear what was being styled and why, the application developers have told me that due to this particular site being on a https secure server they were going to rip all my comments out to save bandwidth! Aggghhh!!!
All great intentions are so hard to control when too many chefs are in the kitchen. Educating developers is part of the trouble when they think that design can be brought in at the end and whacked on top of everything. Sure but then we have no semantic mark up. My difficulty is being brought in early enough to get the mark up correct.
Thanks for this article. It’s great, and spoken in my language.
it’s very great advise for me. thanks
Great Article… sometimes is very dificult make a mindset to the team about these simple rules…
[…] C’è inoltre quest’altro sito che permette di avere una panoramica di quelle che saranno le nuove futures dei CSS3. Altrettanto utili sono questi 10 consigli su come rendere i vostri fogli di stile “sexy” in verità sono consigli per rendere la gestione di CSS più facile, professionale e performante. « Nomi stupidi per risorse fantastiche […]
[…] Creating sexy stylesheets […]
[…] This is a great article by Jina Bolton on writing well structured stylesheets. making them more efficient and reusable for future projects. If you’re one for messy CSS and you need to clean up your act, check out Creating Sexy Stylesheets. leave a reply […]
Great article. I found it very useful for all levels of CSS creation.
Really super article - I found it very helpful. Logical and common sense approach to CSS. I agree with you that alphabetical ordering doesn’t seem to make much sense, at least to me… but guess I could see it making some sense to someone else..it would drive me batty :)
I love the idea of “table of contents”-type comments at the top of the stylesheets. Brilliant.
[…] Vitamin Features » Creating Sexy Stylesheets (tags: css tips code) […]
One thing that greatly improves readability within a style sheet is to capitalize X/HTML tag names that are referenced. I know that it is a requirement within a valid XHTML document for tags to be in lowercase but it is not a requirement within a CSS document. Everybody seems to think it is though.
Hey do you have links to any examples of a style guide as you mention in part 10 or could you provide a ‘dummy’ one? Just to give a more concrete example; not necessarily as a template to follow.
All great points, thanks for putting together such a thorough yet concise set of “Top Ten” things to think about BEFORE you start your next new project or redesign.
I’m not big on using extensive commenting or tabbing because it adds to scrolling, which ultimately slows you down.
The biggest hurdle for me is trying to get other team members to actually consider and adopt consistent, efficient, and “team oriented” methods and processes. Ultimately, this of course slows everyone down, and limits innovation and the sheer joy of practicing the craft.
Great post, thanks! Dugg,
[…] إنشأ stylesheet بطريقة جذابة .. […]
[…] Creating Sexy Stylesheets […]
[…] I just read a good article by Jina Bolton called “Creating Sexy Stylesheets.” I knew a lot of what she covered ’cause I think I know a few things, but I did learn some great new tips. […]
[…] Finally to sum it all up I read a fantastic article over at think vitamin from Jina Bolton about creating sexy stylesheets. It lists out some fantastic ways to ensure that you are coding your CSS stylesheets as clean and well formed as possible. I enjoy and strive to make use of everyone of these basic princples in my CSS. You should also, at least once you know them from reading her article. […]
[…] Jina Bolton at Vitamin.com has an excellent post for all CSS developers. She described how you can write well structured stylesheets which are more efficient and easy to maintain. Some of the tips may look intuitive but many times we all need reminder to get the basics right. In my experience lot of developers do not give enough importance to structured and well written CSS. I recommend that you read this article. By following her tips you can be a more productive CSS expert. SHARETHIS.addEntry({ title: “Make your stylesheet a work of art.”, url: “http://www.zparacha.com/css_best_practices/” }); […]
Excellent article. I totally agree with you. I think the tip about scemantics is very important. Often the developers are in a rush to get the task done and do not spend much time thinking and implementing the design. I wish all my colleagues read and follow your tips. I’ll put this article on my blog and share it with my friend.
Thanks for such wonderful tips.
[…] איך לעשות סטייל שיט סקסי לא התכוונתי לאסוציאציה האפלה שחשבתם עליה אלא למשהו הרבה יותר נחמד: קוד שגם אחרים יהנו להשתמש בו. […]
Isn’t that best left to your source control system? This sounds like extra manual work that your computer (i.e. your source control system) should be doing for you.
If that’s the only rule you need to deal with IE 6, you’re doing pretty well :)
This is essential, I think. Otherwise the conditional comment approach is pretty opaque to anyone who doesn’t know about conditional comments.
[…] Creating Sexy Stylesheets […]
[…] con diez aspectos esenciales a tener en cuenta a la hora de la creación de una hojas de estilo. →() […]
What a great article, I couldn’t agree more. It is very important to keep things organized and to comment your code. I don’t even make it to years I forget things 3 days later. Now I’m going to go make my style sheets sexy. Thanks for the great article.
[…] Finally to sum it all up I read a fantastic article over at think vitamin from Jina Bolton about creating sexy stylesheets. It lists out some fantastic ways to ensure that you are coding your CSS stylesheets as clean and well formed as possible. I enjoy and strive to make use of everyone of these basic princples in my CSS. You should also, at least once you know them from reading her article. […]
[…] Creating Sexy Stylesheets […]
[…] Questo è il titolo di un interessante articolo di Jina Bolton nel quale ci consiglia 10 trucchi per scrivere css : “diventare esperti di css non vuol dire solo imparare a memoria i selettori, ma anche sapere realizzare fogli di stile efficenti”. Vi riporto un riassunto (cercando di tradurre al meglio) : […]
[…] Vitamin - Creating Sexy Stylesheets […]
Great article, I really admire the beauty, efficiency and usability of your style. It does feel a bit like beating a dead horse, but we do need more developers to write semantic code. This served as a great refresher and an insightful look into why it’s all worth it
it seems as if anyone with web experience knows these things correct? anyone with ability to use organization methods implied in their brains does this already?
keeping people informed and reminded of such ideas is great and i respect the method placed so that it is unbiased
i use notepad2 for all webpage editing
it may not be the preferred model editor for all but we each have our own creative methods open for debate
mention of w3.org is only appropriate!
@Jason, @Denis, @Jina
Perhaps a better approach to the conditional commenting is to apply a class attribute to the body tag via the magic of unobtrusive javascript. eg.<body class=”isIE”>
<!–[if IE]>
<script type=”text/javascript”>
window.onload = function isIE() {
document.getElementById(’body’).className = “isIE”;
};
</script>
<![endif]–>
[…] Creating Sexy stylesheets […]
This is a great article. I’m going to put these into practice immediately
Great article Jina! Some wonderful advanced tips and helpful reminders.
This article was particularly useful to me as I was putting together my Continued CSS… talk for BarCamp Phoenix this last weekend and for my three part series on my site as well.
[…] CSS’in avantajları. Bağlantı […]
[…] Creating Sexy Stylesheets Being a CSS expert is more than just memorizing selectors. It’s also working to improve the maintainability and efficiency of your stylesheets, planning for the future and mastering your workflow. […]
[…] Vitamin Features > Creating Sexy Stylesheets […]
[…] The first is an article on Vitamin called Creating Sexy Stylesheets. Here Jina Bolton gives 10 CSS tips she created by talking with top designers. The tips are centered around clean and easy to follow and update CSS. Anyone who works on a large, dynamic site knows that the CSS can very easily get out of hand. Jina has some great advice on how to keep it manageable and scalable. […]
[…] Vitamin Features » Creating Sexy Stylesheets (tags: css webdesign code accessibility development dhtml guide howto html optimization organisation productivity programming reference resources tip tutorial usability XHTML) […]
[…] Vitamin offers 10 rules for sexy stylesheets. […]
Yes very good tool!!
I really should stop using Notepad and get a good web piece of software for my css and html etc
I do agree that starting from a limited basic style sheet is best, nothing worst than having to delete rubbish from a starting off CSS file.
[…] Creating Sexy Stylesheets Being a CSS expert is more than just memorizing selectors. It’s also working to improve the maintainability and efficiency of your stylesheets, planning for the future and mastering your workflow. In this article Jina Bolton gives 10 CSS tips culled from surveys with 12 top designers. […]
I put this article on my best bookmarks of the 07
:)
Thanks for all of this Jina
Bye.
[…] Jina Bolton’s Creating Sexy Stylesheets is simply good (but common-sense to advanced CSS developers) tips for using, coding, and commenting CSS. Good reminders. Tags: CSS […]
Impressive article and one I’ve certainly bookmarked for reference. While I work hard to keep my page code tidy, efficient CSS formatting is definitely something that’s easy to overlook (given that I end up spending far more time tweaking CSS in any case).
Have definitely heard conflicting advice on the desirability of seperate style sheets for layout/colours/fonts etc. .net had seperate CSS files listed as an example of best practice in their latest (January) issue.
[…] On Think Vitamin this week, Jina Bolton shows us how we can create ’sexy’ style sheets by improving the maintainability and efficiency of our CSS style sheets. Link:Sexy Style Sheets […]
[…] Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. « Bible Stories forChildren […]
[…] Creating Sexy Stylesheets […]
Thank you for posting such a nice article. It is very helpful to those who really want to improve their skills. I m very beginner in this field and trying to my best.. There are some websites that I have created so please have a look at them and tell me your true and precious comments on that. Thank you !
Thank you for posting such a nice article. It is very helpful to those who really want to improve their skills. I m very beginner in this field and trying to my best.. There are some websites that I have created so please have a look at them and tell me your true and precious comments on that.
www.luxmipackaging.com
www.skpulveriser.com
www.yuvagroup.com
www.royalexmind.com
Thank you !
[…] Vitamin Features » Creating Sexy Stylesheets (tags: css webdesign tips) […]
[…] Vitamin explain how to create sexy stylesheets - some great advanced stuff on creating the best CSS code, and laying it out in a way thats easy to update. […]
[…] http://www.thinkvitamin.com/features/design/creating-sexy-stylesheets […]
[…] Dec 18 Creating Sexy Stylesheets By Chad RitchieAdd commentsHome Being a CSS expert is more than just memorizing selectors. It’s also working to improve the maintainability and efficiency of your stylesheets, planning for the future and mastering your workflow. In this article Jina Bolton gives 10 CSS tips culled from surveys with 12 top designers.read more | digg story This entry was posted on Tuesday, December 18th, 2007 at 4:40 pm and is filed under Home. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. […]
[…] Vitamin Features » Creating Sexy Stylesheets - In this article Jina Bolton gives 10 CSS tips culled from surveys with 12 top designers. 12-20-2007 | 5:31 pm […]
Yes very good tool!! Thanks! I wish you a Merry Christmas and a Happy New Year !
[…] read more | digg story […]
[…] Vitamin Features » Creating Sexy Stylesheets (tags: css web_design) […]
Two questions:
1. Do you have any suggestions on using one line for all the rules of a certain css selector or is it one line per rule?
2. Different css files: I find it increases amount of work when having to deal with multiple css file for different purposes. Such as typography, layout, etc. There is almost allways more code involved and more switching between files necessary.
Sounds like I have to clean up some of my codes! As a wedding photographer, my time is spent more in editing than in coding. Sometimes it’s not so fun *glum
Yes very good tool!! Thanks! I wish you a Merry Christmas and a Happy New Year !
@ Christian (see above comment)
You said:
One thing that greatly improves readability within a style sheet is to capitalize X/HTML tag names that are referenced
This is a good idea if you are serving documents with the text/html MIME type, but true XHTML documents served as application/xhtml+xml will not apply CSS element selectors written in uppercase.
Gina: excellent article, by the way. I’ve bookmarked this for future reference!
Great article, bookmarked! I once found this article when I was thinking about how to structure large CSS files. I still think it is an interesting way but I’m wondering what others think about it.
rulez