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.
Related
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.
I'm looking and learning and implementing BEM into my company front-end framework using SASS.
Does it take a while for you to learn and implement its methodology?
I can see its benefits as I'm building a large application.
I've recently started using BEM for a work project and it has been an excellent experience learning so far. I highly recommend using it starting on a new project and it is easy to pickup and it is a massive improvement on code quality and abiding by some standards on how to style a new component or module of your application.
Why use BEM (Block Element Modifier)?
BEM stands for Block, Element, and Modifier. BEM was
created as an approach to front-end development designed with the
flexibility and ease of modification in mind. The main idea of BEM
methodology is to speed development process up and ease the teamwork
of developers. It is an abstract way to think about your design
without relying on HTML structure. BEM captures purpose and meaning
through it’s CSS classname syntax.
Block
A block is a component on your page that may be reusable and will hold
elements inside of it. Examples of a block would be a header, menu or
an image. A block can contain elements and other blocks.
Element
An element is something that will only ever exist inside the block. It
depends on the block to exist. Examples of an element would be a
header sub-title, menu item or image captions. An element can contain
other elements and modifiers.
Modifier
A modifier defines the appearance and behavior of either a block or an
element. The modifier indicates a state difference from the default.
Examples would be themes, active/inactive states or aligning.
Example:
.block {}
.block__element {}
.block--modifier {}
.block__element--modifier {}
.nav {}
.nav__item {}
.nav--footer {}
.nav__item--active{}
BEM has helped in being able to easily breakdown a design and find "elements" and "modifiers" for a Block within a design. BEM can also be applied to any project size small or large. Avoiding nesting also makes it easier to make adjustments to modules without breaking other inner parts of functionality. Code quality is also improved as the developer would think twice before adding in a hack css selector just to get something right.
My team also uses SMACSS "Scalable and Modular Architecture for CSS" along with BEM to split out our SASS into a number of modules. This allows to easily find a components styling without having to search through a massive long stylesheet. It makes new developers life easier to find styling and reading code. Again it is scalable for all project sizes.
You can read more on combining BEM and SMACSS here - Combining BEM and SMACSS.
Once you make the change you will wonder how you used to build projects. It makes styling a project much more straight-forward and less stressful with clean and modular code.
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)
Can anyone tell me about CSS frameworks, and how to use them?
From Wikipedia:
A CSS framework is a pre-prepared library that is meant to allow for easier, more standards-compliant styling of web pages using the Cascading Style Sheets language. Like programming and scripting language libraries, CSS frameworks are usually incorporated as external .css sheets referenced in the HTML . They provide a number of ready-made options for designing and laying out the web page. While many of these frameworks have been published, some authors use them mostly for rapid prototyping, or for learning from, and prefer to 'handcraft' CSS that is appropriate to each published site without the design, maintenance and download overhead of having many unused features in the site's styling.[29]
There is a lot of material on SO (which framework to use, whether to use one at all....)
CSS frameworks are just CSS files. They provide pre-written CSS that you apply to your HTML by using the class names defined by the framework in its CSS file.
Some frameworks are focused on one particular task, e.g. page layout. 960.gs is a good example of this.
Some frameworks are more extensive, and include pre-written CSS for typography, form layout, print styles etc. Blueprint is a good example of this.
Some frameworks also include reset styles, which attempt to reset all styles for all HTML elements to very neutral defaults. These are automatically applied to all HTML elements, so you don’t add classes to your HTML to apply them. A lot of them are based on Eric Meyer’s CSS reset.
CSS frameworks address some or all of the following aspects:
Browser reset. This brings all browsers back to the same baseline styles so that you don't get surprised by something rendering differently in different browsers.
Layouts. They can provide pre-prepared styles that allow you to achieve certain layouts in a simple way. These include columns and also grid layout techniques.
Design. Some provide colour schemes, font selections, typography (line spacings etc.) to quickly give your page an appealing design.
Important to realize that you can mix and match - as long as you're careful.
For instance I don't particularly like YUI's Grid framework (not flexible enough for what I need) - and I don't particularly like Blueprint's typography (because I don't understand what it's doing and I think it's trying to do too much).
So I'm using YUI CSS Reset with YUI Typography and Blueprint grids !
CSS framework is a "wrapper" for all the styles and layouts on your Mark-Up (HTML etc) pages.
An example would be: http://www.blueprintcss.org/
Predefined functionality that has been created intended to serve as a guide for building of something useful.
There different frameworks with different functionality often a (programming tools)layered structure indicating what kind of functionality can be built and how they would work.
CSS frameworks are pre-prepared libraries that are meant to allow for easier, more standards-compliant styling of web pages using the Cascading Style Sheets language.
For more info on how to use each framework, please consult the official documentation of that framework.
Examples of popular CSS frameworks :
960 Grid System
Blueprint
Bootstrap
Cardinal
Cascade Framework
Chopstick
Columnal
Emastic
Floatz
Fluidable
Foundation
Gumby Framework
Ink
Jaidee Framework
KNACSS
Kube
Kule CSS Lazy
Malo
Pure
Responsive Grid System
Semantic UI
Skeleton
uikit
Unsemantic
YAML
Yet Another CSS Grid System
YUI CSS grids
Zass