I went through an machine test where I was allowed to convert a PSD template into a HTML using vanilla css and modular css.
I tried searching for both but couldn't find something related to vanilla css.
However searching more deep I got a very good result with modular css. Here is the link.
Any thought will be greatly appreciated.
There is no difference between them rather than how you structure your css.
Think of modular css as a style of writing vanilla (i.e. normal) css.
In modular CSS, the CSS is grouped by modules. Robin Rendle wrote a good article about these css modules.
It's merely a set of guidelines, on how to approach your css architecture and name your classes.
The reasoning is pretty simple, if you use smacss, for instance, anyone that joins your team can learn the smacss principles and start working on all of your projects.
Have a look at BEM, SMACSS, ITCSS, or OOCSS.
Related
All guides and video tutorials just show how easy and fast it is to achieve the styling using Tailwind CSS, none of them explain why they apply those classes or choose a nested <div> tag.
Take the first Banner template in below URL as an example, https://tailwindui.com/components/marketing/elements/banners Why a simple Banner has so many nested tag ? can not they be combined into 1 or 2 <div> tags to make it much simpler and easy to read/maintain ? I just do not understand why ?
Since Tailwind is a utility framework that essentially maps 1-to-1 to vanilla CSS, understanding why they are applying certain Tailwind classes is the same as understanding the underlying CSS rules.
I would highly recommend learning to create websites using just plain HTML/CSS, and not worry about using Tailwind or other frameworks. Gaining a solid understanding of how HTML/CSS works will make it a lot easier to learn to use Tailwind and see its strengths and weaknesses.
Web.dev has a great course on CSS fundamentals as well as MDN. There are also plenty of other resources online that can meet you where you are.
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
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 want to do some exercises for web front page designing.
Is there any good CSS file have been existed which can be used as base.css, that encapsulates atomic selectors.
There are quite a few out there, some of the biggest ones that come to mind are the normalize reset/base sheet, YUI base sheet and the most recent one, Twitter's Bootstrap CSS sheet.
By the way, you can always pick apart a base stylesheet from any HTML framework such as HTML5 Boilerplate or 960gs and adapt it on your own project quite easily. It sounds a bit asinine to start one anew, due to the many selectors to pick at, and then the testing..tough :P ..but, as always, it's always good to go over these sheets to learn from them and see how the many HTML selectors stack up.
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)