I was going through a really nice tutorial
https://www.sitepoint.com/variables-in-css-custom-properties/
I was trying to understand the concept of custom properties in CSS. But I am really confused as since SASS/SCSS variable also do the same thing. Then when custom properties. Or is there any significant way one should prefer CSS custom properties over preprocessors.
Thank you !!
Any help much appreciated
The very simple answer is that CSS properties came long after preprocessors. One of the reasons why people preferred preprocessors was the fact that it was like a programming language with functions and variables instead of just static CSS.
With the addition of properties to vanilla CSS, you can use it without the need of any preprocessor; it's just an addition to the language.
With regards to when you should use it, the question should be: when should you use CSS preprocessors. It's when you need a lot of flexibility and a programming-language like environment. I hope this answers the question.
The sass / scss is a code compiled for the css unlike the custom css which is a home-made variable to change the style of a page.
But both methods contribute to the cascade. In my opinion, you have to look at browser compatibility and in which project context to use it
Related
I have written an embeddable Web component for data visualization. There are of course associated css classes in addition to the js and html. I need to isolate the css classes so they do not override and/or clobber css class names of the larger Web app context it gets embedded in.
What is the best practice for achieving this?
A possible way to fix this problem is to use scoped CSS. I don't prefer the solution and only use it when nothing else is possible.
I just found out that scoping is not supported, at least not all browsers support it, only Firefox does
Another solution would be to use a prefix for all your CSS classes and id's, but this could take a lot of time if your files are large.
By the way, if embedding means in an iframe, there is no problem, because it does not apply the css of the site imbedded in.
Lets say that youre using Twitter Boostrap and you have their generic boostrap.css and other boostrap associated css files, and you want your own classes to have identical attributes to some of the given boostrap classes. To my understanding, you would not want to directly modify the css bootstrap files, but you would want to extend them by creating a custom.css file.
So without touching the boostrap files. How would I replicate a boostrap class for my own class? Would the only way be to copy and paste from the boostrap.css file. Or is there a way to do
.myownclass {
-- some command to replicate class 'alert alert-error' without repeating the CSS that has already been written
}
You could use a css preprocessor. Other ways already cited by other users are fine but using a css preprocessor is the best way.
Bootstrap is built using LESS, so you can use LESS. Take a look at here: http://bootstrap.lesscss.ru/less.html.
Also SASS can be used. According to me SASS is better. You find a tutorial here: http://www.1stwebdesigner.com/css/build-website-using-twitter-bootstrap-sass-1/
What are CSS preprocessors?
A browser can only understand CSS, as the styling technique for any DOM element being rendered. CSS, as a language has its own feature set, which at times might not be enough to create a clean and reusable chunk of rules. Eg. Not being able to reuse a collection of rules in multiple selectors, unavailability of variables which may lead to ambiguous pieces of data across the stylesheet. To overcome most of these limitations, the concept of a preprocessor was born – offering an advanced way of writing CSS, which extends the basic functionalities. This advanced code is later compiled as normal CSS code using respective compilers (which depends on what preprocessor you are using), which the browser will understand.
Should you use preprocessors?
The decision of adopting preprocessors for your next project, in my opinion, should be made after much analysis and solely depending on your expertise level and most importantly the project requirement and workflow of the team as a whole. Here are some tips that might help you come to a decision:
Not for beginners: If you are a beginner and starting to explore the fantastic world of CSS, I would suggest you get your hands dirty with normal CSS before moving into a framework or preprocessor of any sorts. It’s really important to understand and be able to use the core concepts of any language that you work with, and that’s true for CSS as much as any other programming language.
Are you a team of front end developers? As a team of front end developers, adopting preprocessors will be a great move. But only if somebody on the team really knows how to handle huge CSS files and structure them accordingly. By making use of the powerful features offered by the language, it is important to first structure the whole CSS into reusable chunks and define a strategy for CSS organization. Eg. Are you going with multiple CSS files for typography, forms, layout etc. Are you going for theme-able UI, where you might need to use variables extensively, etc.
Are you willing to cross the barrier? Adopting preprocessors means you are going to be implementing more programming concepts into your CSS coding approach. There will be a lot of concepts that are native to any basic programming language, which you might want to learn and implement, by using a preprocessor. This means, you will definitely need to brush-up your programming skills and might forever change the way you see a CSS code. If you are willing to cross this barrier, and feel ready to embrace the change confidently, this is for you.
In CSS this is not possible. The only way to do it, is to chain the classes in your html tags.
<div class="alert alert-error myownclass"></div>
If you are using less you can do it like this:
.myownclass {
.alert
.alert-error;
}
This will copy the settings from one class to another. The result will be the same as if you copy the contents of the class directly.
If you are using Sass you can do it without copying the class contents. Just reference the classes as shown below. This will not copy the contents, instead it will reference your custom class at the right position in your css code.
.myownclass {
#extend .alert;
#extend .alert-error;
}
Ref: Sass #extend
You would have to use LESS to avoid copy/paste:
.myClass {
.bootstrapClass;
}
Or you could use any of the other CSS preprocessors TBS has been ported to (Sass has one, not sure on the others).
You could give the element two classes - the original Bootstrap class, and then one of your own making. Then you would target it like this:
HTML
<h1 class="original_class myownclass">Hello</h1>
CSS
.original_class.myownclass {
// css code
}
Here's a little jsfiddle illustrating the concept: http://jsfiddle.net/ApEpr/
This does not require the use of a CSS preprocessor - it's just regular old CSS.
I was just checking out this page, and came across the fact that CSS can be OO(Object oriented). So, is it possible to apply the re-usability concept of OOPs to css? If yes then how?
It's not exactly OOP but using Sass, in particular its mixins and variables, will help to reuse your CSS.
http://sass-lang.com/
I don't know about CSS being OO, after all it's not even Turing-complete.
As for Sass, it bring complexity to what should remain, imho, a simple static set of rules.
But you can definitely achieve reuse-ability with CSS. Avoid CSS rules related to an ID, as they're not reusable, avoid big CSS definitions with everything from margins to backgrounds to font syle, create short CSS rules that define simple behaviors, then combine these rules by applying multiple classes to your HTML elements like <span class="big emboss red">. Each of these rules has a simple and obvious meaning and can be reused.
A good thing to write well structured and reusable css is http://lesscss.org/
CSS is not really OO in the sense of OOP, but yes, you can reuse CSS. I've used the OOCSS methodology in situations where I'm working with larger development teams on longer ongoing projects. We try to establish a base CSS framework and then build upon that using the OOCSS.
Pros:
developers, with a bit of documentation, can reuse the CSS without having to constantly come back to a UI designer to create new classes for them
should be easier to maintain long term
typically leaner CSS files (as you avoid doing one-off classes more than typical)
Cons:
you tend to have more classes in your markup class attributes
it's not semantic
everyone managing the CSS has to be on board and understand the concepts related to it (else you end up mixing your OOCSS with a bunch of one-off classes and end up with a bigger mess)
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.