What is the best way to use CSS? (NOT *learn* but really *use*) -
i know css , i'm learning more , more common pattern. however, feel i'm hacking instead of doing right way.
for instance, people respect tell me using css reset unnecessary while others live it. also, there many great css framework (for grids, etc.) thought understand them, never know when use them.
so, basically, question is: once understand how css work, there recognized "best" approach used excellent web developer? in python, 1 should try use common pattern , read pep 8. or, in c++, after understanding syntax, reading effective serie meyer excellent "second" read.
sorry taking long explain.. didn't want have answer like: read "beginning css" explain how change background or how set font. i'm looking standard approach.
- should use reset?
- should use 1 file per site? 1 homepage , 1 rest? 1 basic file , once different every big sections?
- is bad have 2k+ css files? mean should have been refactored , contain duplicate?
- should define parent @ top normal font, color, h1, etc., , then, when it's different change per sections.. or instead use standard 1 , redefine each , every section.
- should use .class , #id little bit everywhere, or should try minimize them , instead use long descriptor such as:
.content .main tr td span or span.classname
thank you!
tl/dr:
what's best "second" read once understand css use in clean/professional way?
[edit]
thanks answer. know asked quite lot of questions.. examples real question is: best "second" read once understand css use in clean/professional way. i.e., hoping read book explaining examples proposed.. explain lots of other things aren't css-syntax more css-best-professional-use.
people have range of answers these questions, here approaches take:
resetting
if you're working on fragile layout -- 1 break if few pixels aren't expect them -- consider using reset. normalize.css. instead of overwriting browser defaults, smooths out differences between browsers.
you consider resetting specific elements if find adding lot of margin: 0;
stylesheets.
splitting css documents
- google recommends splitting them up individual pages aren't forcing users download lots , lots of stylesheet rules aren't used on page they're visiting.
- yahoo recommends combining files minimize number of http requestion
- obviously, finding balance important, , this question weighs of pros , cons.
classes , ids or long chains of selectors?
i try keep classes , ids minimum (in both html , css). tend more fragile when you're building pages others update wysiwyg editors. add few ids or classes large blocks of page, use css target specific elements within blocks. easier if avoid deep nesting in html as possible.
working css preprocessor such less or sass can write more readable stylesheets. ability nest style rules in both less , sass has helped me avoid lot of specificity-related issues.
still, specificity css topic familiar with:
- css-tricks has a article covering specificity
- the w3c's own documentation worth reading.
additional resources
as far additional reading concerned...
- sitepoint's collection of articles , tutorials on css great resource more advanced css tutorials, , feature articles covering css issues more advanced you'd find in many beginner-level books.
Comments
Post a Comment