As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
If yes, which one? Why?
If no, why? How do you fix cross browser CSS rendering?
I currently use blueprint css, and I wonder if it's a good choice. Thanks!
:)
No, I'm not using any framework, just a well thought out naming system that I reuse over and over and a basic css with a few resets and some base styles.
Why am I not using a css framework?
The use of a framework usually assumes that the designer is familiar with its conventions which is quite often not the case - you're not the one designing the page or the client has his own designer. And even if this is not the case, there will always be designs that won't fit into 960 pixels or simply have an even size so you can't use your magical .span-4 class.
Which leads me to the next point. The naming is not semantic. In theory you would expect a framework to ease maintaining a large site. However, suppose you have to make a slight design change. This basically means changing the html across all the template views involved. This is hard and risky even with a versioning system, because it's one thing having to rollback to a single css file, and another to 100 views. All because input.span-19 should have 5pixels less. CSS frameworks - the new inline css.
What about cross browser issues? Either you're using a framework or not this is not going to change. There are browsers or operating systems that have certain particularities. Bottom line - Internet Explorer will still suck as much.
CSS Frameworks stand out for discipline and I have to give them credit for that, but in the end it's all about the one writing the code.
I've noticed two major misconceptions about css frameworks.
Firstly, there tends to a lot of confusion between the concept of a framework used in software development, as a tool and a type of a framework such as 960gs.
Wikipedia defines a framework as "an abstraction in which software providing generic functionality can be selectively changed by user code, thus providing application specific software".
#vise says "I'm not using any framework, just a well thought out naming system that I reuse over and over and a basic css with a few resets and some base styles." This is akin to saying "I'm not using any framework, just a framework." This is probably some kind of semantic irony. No offence intended :)
Blueprint, 960, compass etc are all types of frameworks. Because some css frameworks may not be semantic or are lacking certain desirable qualities, this does not mean css frameworks are a bad idea.
The second misconception is that css and css frameworks are mutually exclusive. You either code css by hand or you use a framework (with some custom stuff). But... wait a minute... isn't CSS a set of default elements that we can alter or extend to suit our specific requirements? CSS looks suspiciously like a framework according to Wikipedia's definition.
Of course, this second point is debatable. But often I find that people are using some kind of framework without knowing it.
To answer your question, I tend to use something like sass and make my own framework. On my latest project, I am using a combination of this and Bourbon which is looking good so far. The main reason I use frameworks is because I'm tired of the redundancy in CSS. It's really boring having to repeat the same values over and over. There are other concepts in design that CSS doesn't do very well which I won't go into here (see here). But by using a framework, it's possible to abstract all your problems away and just work on getting things done.
I hope this helps!
I like the yui css tools. Those guys have definitely spent more time dealing with cross browser css than I would care to. I haven't tried others.
I use yahoo's yui-css framework. That's the first one I came across and it was easy to understand. I just saw the video and cheatsheet and got it working.Also, Yahoo uses it on some of their sites.
I use Blueprint along with the Compass framework. Coding CSS has become enjoyable again. :-)
The Compass/Sass combination is fantastic, and offers several plugins for using the framework of your choice without the non-semantic class names. Outside of Compass, I always found frameworks to be too restrictive and use too much markup.
I'm not a fan of the Blueprint, 960gs and YUI plugins for Compass either: they were originally built for use with extra markup and don't take full advantage of Compass/Sass for extra flexibility. So I built 'Susy' - a flexible framework built native to Compass/Sass.
Whatever plugin you use (or write your own), I highly recommend Compass/Sass as a better option than extra markup.
I created my own subset of classes from which i found myself use very frequently, this makes me work faster and create html layouts much easier, without repeating same properties under a lot of classes.
For example for inline divs i have fl and fr classes to represent float right and left, for fluid widths i have 20 width classes. Here are some classes from my generic stylesheet i mentioned. It works out for me.
.fl { display:inline; float:left;}
.fll { display:inline!important; float:left!important;}
.fr { display:inline; float:right}
.frr { display:inline!important; float:right!important;}
.ib { display: -moz-inline-block; display:inline-block;}
.clear { clear: both}
.none {display:none;}
.noni {display: none!important;}
.block {display:block;}
.blocki {display: block!important;}
.pointer {cursor: pointer !important;}
...
.w10 { width: 10% !important; }
.w15 { width: 15% !important; }
.w20 { width: 20% !important; }
.w25 { width: 25% !important; }
...
So this technique can't be a framework replacement of course, but this works well enough if you don't want to have any other thing in between your styles and you:)
Sinan.
P.S. In IE6 and below multiple classes work buggy this is to use in modern browsers. see the table at Quirksmode
I have used Blueprint-css at some places and found it quite useful.
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
I prefer fluid version of 960.gs: Fluid 960 Grid System
Just started a project using 960 grid. The designer bought into this early on, and let it guide his designs.
I must say, it's much much faster. Spend much less time measuring pixels on mockups, asking the designer the intent, and futzing with CSS to build "page templates". Spend much more time just implementing the designs.
I use a few on a regular basis and I would recommend checking them out.
heymuscle is a responsive css framework that fits 1140px/960px/ipad/iphone similar to 960gs
960 grid is one of the most popular grid's out there and provides easy to use classes for laying out your page
1140 grid is a fluid layout
Hope this helps
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I realize this question has most likely been beaten to death, and that it's more a matter of personal preference than anything, but I was curious to see if anyone had any suggestions.
I have a terrible habit of not reusing code. (most likely due to the fact that I somehow always seem to end up losing any snippets I collect in the continuously growing labyrinth that is my "Development" folder) That being said, I decided a couple of months back to start trying to find an existing CSS framework that I could use to make my life easier as I take on new projects. I've tried a number of them now, and while I've found some great ones, none of quite fit what I'm looking for.
In order of importance, here's what I'm hoping to find:
Flexibility - I'm way too erratic to ever conform to a single design/development pattern for long. That being said, I'd prefer it if I didn't have to spend most of my time overriding various rules from the framework I'm using. I understand, of course, that I'll need to occasionally do this, regardless of what framework I use, but the less I need to, the better.
Lightweight - I'm not really looking for a framework to base my entire project around. I'm looking for more of a collection of helper classes, and possibly some utility rules for bringing sanity to things like Internet Explorer, etc. Basically, I'm looking for something that'll make my life easier.
Cross-Browser Compatible - I could care less if the framework doesn't conform to the current standards, so long as it looks relatively the same in any browser I go into. Unfortunately, I have clients still using Internet Explorer 7 who I have to accommodate. At this point, though, I could care less about whether it remains compatible with Internet Explorer 6.
Modular - While it's not a deal breaker, I was hoping to find a framework that while lightweight, still managed a modular approach to the design. By this I mean, numerous stylesheets, all based on "purpose". For instance, it'd collect all commonly used classes for dealing with forms (.error, .info, .alert, .text, .required, etc) in a folder/stylesheet called forms/forms.css, while keeping rules for tasks such as layout in another file/folder. I really actually liked the way that YAML did this - Unfortunately, YAML just has a bit too much extra stuff that I'm not using, and probably won't need to for some time. (Though to be honest, if I cant find any other framework, I may just see what I can do about just trimming down what I'm not using in YAML, and building a base from there)
As far as content goes, I'm really just looking for some barebones, common-use stuff. Things like:
.text-center { text-align: left; }
.text-right { text-align: right; }
.centered { margin-left: auto; margin-right: auto; }
.left { float: left; display: block; }
.right { float: right; display: block; }
And of course, the usual clearfix stuff. Classes for dealing with rounded corners, shadows, etc would be nice, too.
I don't really care too much about accessibility, rtl support, microformats, etc at the moment, since I'd be using this framework mostly for work dealing with my clients, and I've yet to run into the need so far.
Lastly, I'm a developer first and foremost, (I just happen to be getting a lot of things lately that require me to do more design work than I'm comfortable with) so I'll often run into the need to build the markup dynamically on either the client or server side, so the simpler the markup for the framework, the better.
Try 960 Grid system. It's my favorite :)
If you need to do your research, here's a good guide.
The best framework is which I am using, this is responsive and lightweight, you will get all the features of Bootstrap at 12KB (zipped), and it is easy to understand. You will get page speed of 100 on mobiles too.
Check this: http://skhost.in/one
Click below to check the speed: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fskhost.in%2Fone&tab=desktop
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
I know CSS and I'm learning more and more common pattern. However, I always feel like I'm hacking instead of doing it the right way.
For instance, some people I respect tell me that using css reset is unnecessary while others live for it. Also, there are so many great css framework (for grids, etc.) that even thought I understand them, I never really know when to use them.
So, basically, my question is: Once you understand how CSS work, is there a recognized "best" approach used by excellent web developer? As in python, one should try to use the common pattern and read PEP 8. Or, in C++, after understanding the syntax, reading the effective serie by Meyer is an excellent "second" read.
Sorry for taking that long to explain.. I just didn't want to have answer like: Read "Beginning CSS" which explain how to change the background or how to set font. I'm really looking for a good standard approach.
Should we use reset?
Should we use only one file per site? One for homepage and one for the rest? One basic file and once different for every big sections?
Is it bad to have a 2k+ css files? Does it mean it should have been refactored and that it contain to much duplicate?
Should I define parent at the top for normal font, color, h1, etc., and then, when it's different change it per sections.. or instead always use the standard one and redefine each and every section.
Should I use .class and #id a little bit everywhere, or should I try to minimize them and instead use long descriptor such as:
.content .main tr td span a
or
span.classname a
Thank you!
tl/dr:
What's the best "second" read once you already understand CSS but would like to use it in a clean/professional way?
[EDIT]
Thanks all for your answer. I know I asked quite a lot of questions.. but they were only examples for the real question which is: What is the best "second" read once you already understand CSS but would like to use it in a clean/professional way. I.e., I was hoping to read a book explaining the examples I proposed.. but also would explain lots of other things that aren't css-syntax but more css-best-professional-use.
People will have a range of answers for these questions, but here are the approaches I would take:
Resetting
If you're working on a fragile layout -- one that could easily break if a few pixels aren't where you expect them to be -- consider using a reset. I would look into normalize.css. Instead of completely overwriting browser defaults, it smooths out the differences between browsers.
You could also consider resetting specific elements if you find yourself adding a lot of margin: 0; to your stylesheets.
Splitting up CSS documents
Google recommends splitting them up so that individual pages aren't forcing users to download lots and lots of stylesheet rules that aren't actually used on the page that they're visiting.
Yahoo recommends combining files to minimize the number of HTTP requestion
Obviously, finding a balance is important, and this SO question weighs some of the pros and cons.
Classes and IDs or long chains of selectors?
I try to keep classes and IDs to a minimum (in both my HTML and my CSS). They tend to be more fragile when you're building pages that others will update with WYSIWYG editors. I add a few IDs or classes to large blocks of the page, then use CSS to target specific elements within those blocks. This is easier if you avoid deep nesting in your HTML as much as possible.
Working with a CSS preprocessor such as LESS or SASS can help you write more readable stylesheets. The ability to nest style rules in both LESS and SASS has helped me avoid a lot of specificity-related issues.
Still, specificity is a good CSS topic to be familiar with:
CSS-tricks has a good article covering specificity
The W3C's own documentation is worth reading.
Additional Resources
As far as additional reading is concerned...
SitePoint's collection of articles and tutorials on CSS is a great resource for more advanced CSS tutorials, and they also feature some good articles covering CSS issues that are more advanced than what you'd find in many beginner-level books.
Resets: I think yes, some dislike them, so it's up to you to figure out which one you like
Split vs. Unified files: Depends. There are advantages to both (chorus: advantages, advantages!) One CSS file is easier to browse, and you can clearly find relationships in a single file. Then again, if you have planned the structure of your site, are developing compartmentalized widgets, or have lots of people working on the CSS committing files, a decentralized method might benefit you. With multiple CSS files, you can always use a compressor to serve them to the client as a single file, so it's more of a maintenence question.
Large Files / Line Count: Are you saying you have 2,000 CSS files (holy crap!) or 2,000 line CSS files? Both aren't great, although the latter can be managed quite easily in an IDE that provides outlines and handles inheritance for you.The former...well, at least you have job security.
Parent Definitions: Again, no right answer. The CSS rules for a small site will vary greatly from an enterprise level site. A good starting point might be checking out how jQueryUI handles styles and then forming your own opinion from there.
Correct Selectors: Steve Souders talked about optimizing CSS selectors, coming to the conclusion that's it not worth it for your average site. So ignoring CSS optimization and based on your example, I'd say the second one is waaaay easier to maintain and ultimately far more predictable. If you HTML changes even slightly, the first one will break quickly. The second won't, and is far more portable.
There are things you can do in CSS to make your life easier. I highly recommend using a grid system for layout (blueprint, 960GS, etc). I personally like using a reset since it makes pixel perfect designs easier to manage. Other than that, research what people like Eric Meyers or site likes alistapart.com or smashingmagazine.com have to say on the topic.
tl;dr - there is no right answer, but definitely some good options
I can answer your questions based on my own experience, not necessarily the best practices out there.
I reset certain tags, but not all the tags like the "CSS purists" do. Keep in mind that if you are using certain CSS libraries, like JQuery UI, Superfish menu, etc.. resetting the tags can really mess up these libraries UIs.
I usually have one general layout/configuration CSS file and every complicated page has its own CSS file. So, every page includes these 2 CSS files plus my UI library files (JQuery UI, etc). This makes it easier for me to pin point and maintain it.
2K+?? Yes, very bad in fact. If you have file that big, you should really use YSlow to see how long it takes to load that file. The longer you page takes to load, the faster you users leave your webpage, unless they are forced to use it. :D
I always like to "scope" my CSS, by prefixing with say #app. This ensures my global setting only affects my page content and layout, and they do not override the UI libraries.
Use .class and #id in whatever way it makes sense to you. If you know this tag exists only one time, then use #id. If you know it might occur more than one time in the page, then the only option is to use .class.
As with many things there aren't really rights and wrongs, it's more about prefernce and manageability.
I use CSS Reset on some elements, I prefer the blank canvas start instead of finding a load of unknown defaults.
I don't think file size is really an issue, again what is easiest to manage is really more important. Split the file if it logical to do so.
Give some thought to optimisation and try to avoid unnecessary duplication. I like to define a parent font/styles as you call it for the most commonly used style, then just define the others as required.
Personally I like to define some common classes, i'm not sure if it's optimal but it's very usable, such as:
.bold {font-weight: bold}
.clear {clear: both}
.red {color: red}
If you do this for common requirements you can then simply use code like
<p class="bold red"></p>
<h2 class="red"></h2>
<br class="clear" />
Simples!
Use tabs. Makes it easier to see. Also i rather use .classname than #id. Example of a piece of css of one of my websites:
body {
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
background-color: #99D9EA;
}
.lcategorie {
background-image: url('http://images.alphenweer.nl/i/gradient-menu-left.png');
background-repeat: no-repeat;
padding-left: 2px;
text-align: left;
color: #FFFF00;
font-weight:bold;
width:200px;
height:20px;
display:block;
cursor:pointer;
}
.rcategorie {
background-image: url('http://images.alphenweer.nl/i/gradient-menu-right.png');
background-repeat: no-repeat;
padding-right: 2px;
text-align: right;
font-weight:bold;
color: #FFFF00;
width:200px;
height:20px;
display:block;
cursor:pointer
}
In addition to the good answers above, what you just described in your question is also otherwise called as Learning Curve.
We all go through it. It is inevitable, according to me.
The best approach probably is to make the best use of the vast resources available and then filter them out. Which is a knack developed only over time.
I don't think there are shortcuts. Although, I do agree, it would be nice to have a guiding hand to help us avoid pitfalls and time-wasters and tell us about all the best-practices.
But even those are available out there thanks to some really passionate, expert-in-their-field bloggers.
So explore-away is what I'd suggest.
If your lucky enough to have a Mac or a Hackintosh... then I highly recommend CSSEDIT (unfortunately only available on Macs). It will allow you to rapidly develop your understanding of CSS. I realize this doesn't answer your question, but if you try it, you'll understand why it is so important to the learning curve. Sadly, nothing else on windows comes close. I use windows 99% of the time and switch to my mac for CSSEDIT.
Ok, so Less.js has come along, and it seems that my dreams of creating a CSS framework (especially a 'grid' system), with an 'abstracted' CSS language might be about to come true.
That is, 960 and Blueprint are great and all... but it so irked me to put style information in HTML markup, such as:
class="article grid_4 pull_2"
or whatever the syntax was :)
So, now it seems that we can do it this way:
.article {
.grid_container();
.grid_four();
.pull_two();
.last();
}
Weeeeeee!
So, I'm about to get stuck into developing this for myself -- but I'm sure there are some brainiacs out there that have already done it -- so before I get into any heavy lifting...?
Any leads?
Kindly
Daryl.
This is the CSS framework you're looking for - http://semantic.gs/
The Semantic Grid System - Page layout for tomorrow.
Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.
All without any ugly .grid_x classes in your markup. Oh, and did we mention it's responsive?
Brought to you by LESS.js and the creator of 1KB Grid.
I checked out less , it was a push between that and the new sass (scss) syntax, but what made me choose sass is that it has a way to turn css into scss code.
The round trip was something I definitely wanted. Once that happened, then Compass presented itself. I was going to try using something to code everything in python, but it makes perfect sense to me to preprocess the css, especially since I'd like to use HTML5, and if the spec changes, then I can tweak the generation.
BTW folks, I've started that framework I was talking about.
http://github.com/DarylAntony/lesser
I'm having fun with it.
Is it worth adapting to a css framework or just use the css we all know?
How to get started with Blueprint [CSS Framework]?
Any other css frameworks which is really worth a try?
If not Blueprint, I recommend at least using a CSS reset file, which standardizes many default browser settings that differ across browsers; such as the Yahoo "YUI Reset CSS".
Otherwise, if I were you I guess I would just start in the Blueprint wiki and look through the tutorials. Then make something of your own!
To determine if it's best to use a css framework or not, you need to look at your overall web design and see how easily you can break it down into elements. If you find yourself using a lot of container divs and floating them all left or right, a CSS framework may be a good idea.
Another reason it may be beneficial to use Blueprint is that you can decrease the amount of CSS you need. Rather than creating a div id for every column or container and putting in a width and height in your CSS file, you can just use the framework and quickly assign a class.
I built Intronis.com using the Blueprint CSS framework. It worked well because it is a very clean site with common elements and it's based on a grid.
I'd use a CSS framework on a case by case basis. Let the design dictate if you use it or not. For some sites it's a good fit. For others it's not.
To get started, download it here, then just unzip the file and put it in a local test environment to try it out.
Also, make sure you take a look at the IE6 CSS included with Blueprint and take note of the .clearfix class that you can use when working with container divs and floating objects.
I've just written a brief tutorial on how to get started with Blueprint CSS, you might like it. http://flowdev.tumblr.com/post/1187039740/blueprint-css-to-grid-or-not-to-grid
This question already has answers here:
Closed 13 years ago.
Possible Duplicate:
What is the best CSS Framework and are they worth the effort?
Would you recommend using a CSS framework for ASP.NET like the Blueprint CSS Framework vs building your own css styles? What are the benefits of using such a framework?
Abstraction is the keyword.
Like every framework it delivers you a code basis you can build on. You don't have to "reinvent the wheel".
Ever considered using CSS resets? They're much simpler and allow you to start from the ground up.
I have heard of CSS frameworks but don't really understand the level of complexity they introduce.
That said, I do tend to write standard CSS and expect browsers to conform to it. If not perfectly, then similarly across them all.
I think the benefits are:
1.Easier to follow web standards.
2.You code will be consistent across the projects, and for that reason much easier for maintenance.
And definatelly give a look to reset and fonts-reset
I don't see why using CSS Frameworks.
I always do my CSS from scratch, sometimes to remember sometimes i go back to my older CSS styles and look around. And sometimes i just do some testing until I've obtained what i wanted.
EDIT: Just read some of the web standards guidelines and do some experiment and you will get the hand of it..
I did the same and at my first times.. I had some cross-browser issues and other small stuff.
now i'm pretty happy to say that i do cross-browser css, with no big problem.
But if you just need CSS for a project, and you wont be needing CSS again, using a Framework might not be a bad idea.
In my opinion a CSS framework:
PROS
Aims at cutting down development
time.
Standardization and consistency.
Solid foundation to build upon.
Guidance\guidelines to follow. Avoid white screen of death effect.
Proven "good looking" UI.
CONS
Extra complexity
Steep learning curve
...
PROS: Anyone can take it and produce a result
CONS: Not everybody will be able to fix what comes out of it...
I would defenitely use a CSS framework, simply because you can assume it has been tested in a lot of browsers. I you use something like 960.gs and it looks correct in one browser, you can be quite sure it will do so in all the others.
And like Omega notes I would at least use a CSS reset file, like YUI Reset CSS.
I like to use CSS frameworks because it ensures that it looks (quite) the same in many different browsers. e.g. I'm sick of writing hacks for internet explorer 6. The framework take this part for me.
The con is that you have to learn how to use the framework of your choise, but once learned it makes fun to write new sites.
I'm using YAML btw.