So I'm making a website using Middleman, which I'm trying out for the first time, and just getting my teeth into Susy and Compass, which I plan on using with it. I am not familiar with these tools and was curious if anyone knew whether the reset utilities Compass provides cascade over any of the CSS rules from HTML5 Boilerplate (mainly those from normalize.css). Does anyone know?
You choose whether to use compass/reset or normalize.css. Using both at the same time does not make sense. The reset basically sets the same properties on all elements, then you add your styles on top. What normalize does is that it only sets the properties that vary between browsers to one common set. The difference becomes obvious with elements like <strong>, <em> or <ul>: Using reset, they will just be “plain” text. No list indicators, no paddings, no margins, no bold, no italics. Using normalize, they will look as you would expect them to look: bold, italicized, like a list, etc.
When using normalize.css, you can either use the compass normalize plugin or just download normalize.css and #include it at the top of your SCSS/Sass file. Then, don’t include compass/reset.
The reset included in Compass style is the Eric Meyer's one (version 2.0).
I'm not familiar with HTML5 Boilerplate. Although I know they are a set of good practices, I've never seen myself on need of using it. I like to build my own boilerplates.
After reading the source code of normalize.css and the Eric Meyer's reset I found you will have some colliding rules.
I'd say that if you're interested on keeping normalize.css over the reset mixin just include normalize.css after it.
Related
I have read this Stack Overflow question on differences between Normalize.css vs Reset CSS, but it doesn't mention when which approach should be used. To me, it seems like normalize.css has way more advantages over Reset CSS.
I can't think of a situation where I would use Reset CSS over normalize.css. Does anyone know of any reason or use case where using Reset CSS is more suitable?
A reset should be more durable when browsers change their default styles. Useful if you're going for complete control over the look
And if you're going for a minimalist style, a reset might be closer to your final style than normalize is
But I mostly agree: if you want a non-ugly website with less effort (and nicer debugging), normalize is a better starting point
I know Bootstrap and Foundation are CSS frameworks, but I'm not sure whether LESS and SASS are CSS frameworks or preprocessors.
What is the difference between CSS frameworks and preprocessors?
From http://lesscss.org/:
Less is a CSS pre-processor, meaning that it extends the CSS language,
adding features that allow variables, mixins, functions and many other
techniques that allow you to make CSS that is more maintainable,
themable and extendable.
From http://sass-lang.com/documentation/file.SASS_REFERENCE.html
Sass is an extension of CSS that adds power and elegance to the basic
language. It allows you to use variables, nested rules, mixins, inline
imports, and more, all with a fully CSS-compatible syntax. Sass helps
keep large stylesheets well-organized, and get small stylesheets up
and running quickly, particularly with the help of the Compass style
library.
Basically both are css pre-processors, as in they allow you to write style information that later compiles to css.
Frameworks, like bootstrap, on the other hand are more like pre-made style sheets that can be used to save development time. Rather than writing out custom sheets with similar styles over and over again, you can make use of prefabricated sheets. They usually have things like resets, basic layouts, and/or grid systems built in.
There are also some frameworks written in, and designed to be used with a pre-proccessor like Less Framework 4
If you're relatively new to this stuff, I would recommend starting with plain old css. Pre-processors can be helpful, but the learning curve is a bit steeper.
As said above, LESS and SASS allow CSS to follow the DRY(Don't Repeat Yourself) principles of coding. For example if you had a CSS file where you wanted 12 items let's say; h1, h2, h3, h4, p, a, etc all to have the same color of text(let's say a salmon color), what these preprocessors allow you to do is create a variable(let's say myColor), that you can then pass into the color attribute of each of these items.
This may not sound exciting, but where it really shines is when you want to say redesign the site or alter that color to say a 'sky blue' instead of now skimming through those 3000 lines of code to find those different items (h1, h2, ... , a, etc as listed above) you'd only need to change the myColor variable from the hex/rgb/rgba color code to the one for sky blue. Which in turn would change that value for each of those items.
So essentially you need to change 1 value that's easily found, as opposed to many, which may require a lot of sifting through code.
To note though, LESS and SASS cannot be read by a standard Internet browser, instead you must use a program that compiles your LESS/SASS code into standard CSS (these programs are easy to find and most programs such as Sublime, Brackets, Atom, etc have the functionality built in or allow a package to be downloaded that does it.)
Then when you need to edit your code, you change the LESS/SASS file and recompile again.
That's just the tip of what LESS/SASS can do, but it gives you an idea hopefully of their use. Programmers are lazy, copy and pasting isn't a good option generally, as you violate the DRY principle. So this is a happy medium explained hopefully in laymans terms.
I would have to believe I can accomplish the same results as pre-processors using jQuery(the most popular ui/ux framework).
However, depending on how many people are working on one project it may a case of teams learned in SASS or LESS scripts and may not know jQuery syntax as well. They are only focused on CSS effects, which could be a plus.
If I .addClass() to multiple DOM elements with jQuery... it may be even more efficient than having a preprocessor duplicate desired code all over a css file.
I'm working on a browser extension that adds it's UI to the pages DOM. On some pages I have the problem certain styles affect my UI. To counter this I keep my UI underneath a common root which resets most of the styles to the default value.
Sometimes I missed things which causes visual glitches in my UI. (i.e. the pages CSS file sets form { width: 80%; } so I need to add form { width: auto; } to my reset styles.
Is there a collection of styles that reset every CSS attribute to the value that is declared as default by the standard for every element?
I have come across the same problem. The usual CSS normalizers listed by the other answers does not answer the question because it is made to cancel the differences across the browser's default styles.
In the context of an extension, I needed to cancel every specific style that may exist on a random website.
I have come across this solution (I am not sure if it was possible at the time of the question, 7 years ago).
.your-container-class,
.your-container-class *,
.your-container-class *::before,
.your-container-class *::after {
all: initial;
}
So far it seems to achieve the goal by removing the differences across websites. The downside is that it resets even some default styles (ol, ul, li not behaving like lists for example).
Eric Meyer’s “Reset CSS” 2.0
(the original one)
HTML5 Doctor CSS Reset
(extends the Eric Meyer's one to improve HTML5 tags reset)
Yahoo! (YUI 3) Reset CSS
(based on Normalize.css)
Universal Selector ‘*’ Reset
Normalize.css 1.0 2.1.3
("…as used by Twitter Bootstrap, HTML5 Boilerplate, YUI 3, Pure, TweetDeck, Soundcloud, Medium, NASA, GOV.UK, Guardian, Rdio, Favstar, iA, and many others.")
There are others, but this were (and still are) the 2012’s most popular CSS Reset scripts.
I recommend using a quick Google search to find something like so: http://meyerweb.com/eric/tools/css/reset/
You can implement the reset in as-is and then if any problems arise down the road, simply add to it as needed.
Be aware that some pre-made CSS resets require a shout-out to using them.
Yes, absolutely.
There are two schools of thought to this. One is the zeroing style reset sheets, which basically remove all margin, padding and other such settings from the css. A good example of this is Eric Meyer's Reset CSS
The other approach is to set everything to roughly what you'd sensibly expect it to be, setting a reasonably looking margin to paragraphs and headings, indenting lists etc. A good example of this is Normalize.css
Some browsers also support the initial value, which sets the value of a property back to what it intially was. It's not widely supported enough to use in production, IMO.
Html5 boilerplate has an normalize.css which sets al lot of css styles to a default.
http://html5boilerplate.com/
As you are applying your styles to different pages with different unique styles, its hard to say if you will get success on removing all styles from all pages with some CSS reset.
But maybe these can help:
Normalize.css (used by many CSS frameworks)
CSS Reset by Meyer
I need to do this more generally, but a fine current example is my two menus. I have two menu classes, horizontal-menu and vertical-menu, and two sets of rules for elements like ul, li, and a under these classes. Many of these rules have things in common, like the color value for a elements. I would like to refactor the common rules and values into a 'super-class' called menu, and the have only override values in my horizontal-menu and vertical-menu classes. Is there a tool (besides the tool asking this question) that can help me with this?
The best tool for this kind of problem is Compass, a framework for defining rules which are then compiled into css for use in production. It allows you to define variables in much the same way as an imperative language.
It also has other helpful concepts such as mixins which allow the definition of a set of css properties which would be regularly used together, such that you can include that block of properties in multiple standard CSS rules. The power being that you can then edit that mixin in one place, changing the properties and having that change propagate to any CSS rule in which the mixin has been used.
I discovered Compass, and learnt how it should be used thanks, to a screencast by Chris Coyier at CSS Tricks
The only problem in this case (and most cases in fact) is that you really have to start from scratch with Compass, or find a way of integrating its work-flow into your existing one.
You may want to give csscss a shot. I wrote it in order to have an idea of how much I'm repeating myself in my own stylesheets. I'm obviously biased, but a number of people have found it helpful too. SASS, LESS, and Compass support are baked in.
Another great tool is helium which is a javascript tool that runs in the browser and lets you know of any unused rules.
Is there a structured language for declaring styles in a sensible way, which can then be rendered into browser specific css files, similar to what GWT does to Javascript?
It would ideally be a language that supports variables, deals with browser quirks and differences (e.g. filter:alpha vs opacity), provides an intuitive syntax for common tasks such as centering, and has a way to express fallbacks for less capable browsers.
Sass, as in Haml and Sass has some of what you're looking for.
It has variables, math, and other goodies.
The official version is Ruby based, but there are versions for other languages like PHP and Python.
It might not do EVERTHING you mentioned, but it's worth checking out.
GWT's ability to generate code on the fly and it's powerful "deferred binding" capability could definately be applied to stylesheets and allow for build-time optimization of CSS.
Right now, the "GWT way", according to styles is to include all the styles you'll need and use apply them by making use of "dependent style names". But this definitely leads to lost of useless CSS being included where it's not needed.
I know there is at least one attempt to optimize CSS at build time. This would involve combining multiple seperate stylesheets into one, and removing all non-essential whitespace (minifying). I think this might also allow you to make use of deffrred binding to essentially "optimize out" CSS from where it's not needed (ex: browser specific styles).
StyleInjector
To answer my own question (again): Less seems like one of the most interesting projects so far. CSS extension supporting variables, mixins (complex variables), nested rules, and simple arithmetic.
you might want to try HSS.
Thanks for your comments! Sass and HSS seem very similar in scope: simple and block variables, nested blocks, single line comments. HSS has the advantage of being a superset of CSS.
StyleInjector looks more ambitious and interesting. By leveraging GWT's deferred binding capabilities and introducing CSS syntax extensions like conditionals, this approach should make it easy to define not only browser specific but also locale specific styles. Also being able to reference other GWT resources directly, and automatically minimizing styles by removing and merging selectors is pretty cool. I'll definitely follow this project closely.