what is the difference between tailwind and normal css? Can anyone explain I am new to Tailwind css.
Tailwind is some CSS that someone else has written for you. You use it by writing presentational markup (in the form of class names like bg-red-100) instead of writing semantic markup and CSS to apply to it.
CSS (Cascading Style Sheets) is a language used to write rules regarding the style/color/positioning/etc. of elements in an HTML page.
TailwindCSS is a collection of CSS rules, utility classes
Related
Inline CSS is the CSS that is added inside an HTML element ,and
External CSS is usually the best practice when writing CSS because it keeps everything organized
is it true ?
Most of the time. If you need CSS styling for multiple files it will make it cleaner and it will be easier to manage. If you need styling for only one file then you can use inline CSS.
Let's say I have on page 2000 elements. I want to inject into this page elements (banners) from custom module. This module's css file has 300+ css selectors, each selector needs to have unique dynamic prefix to avoid conflicts with other modules inside the same page. I can not use 1 unique id selector because more banners can be loaded, so I need to use something like this:
<div id="company_banner14"></div>
<div id="company_banner15"></div>
div[id^='company_banner']{
}
or
<div id="company_banner14" class="company_banner"></div>
<div id="company_banner15" class="company_banner"></div>
.company_banner{
}
What is better from performance view? Is using regex selector bad practice, would 300 regex selectors make any visible performance impact?
After looking at what you need is have a custom CSS for all elements. There are some points that should be kept in mind for this query.
Using Inline CSS- I think inline CSS is the best solution if you are not using long CSS for one element. It saves very valuable amount of code to your page if your loop too many elements. For example, <div id="company_banner15" class="company_banner" style="Width:x; height:y;"></div>
Using CSS Classes- It is the alternate way for Inline CSS but not as code saver as Inline CSS. if your using same type of style to all elements it is accurate not not if your using different type of style in loop.
Hope these suggestion will guide you. Thanks and cheers.
I have a site http://jsreport.net/learn/get-started on which I put into the body of the page documentation files from Github (which have the extension .md). Directly into the html I inserted inline css styles for styling documentation like on Github. The problem is that these style cross with my other styles and documentation are not displayed correctly (likes on the Github site). Could anyone advise me any solution how I can for my div prohibit other styles or any other solution? Thank you.
You should look into CSS specifity, to get your problem fixed.
Here is a good article about it:
CSS Specifity
Inline styles are privileged compared to your stylesheet declarations. You could use the !important declaration in your stylesheet to overrule this. But this bad practice, the best approach for you would be to resign from inline styles and just use your stylesheet.
add !important, like:
display: none !important;
I am noob in CSS and HTML, So bear with me for this question.
I am integrating a web application with our existing application. They defined some css rules which is conflicting with our application.
My problem is: Is there any good way to separate out the CSS rules to be used each application pages?
I tried to look at CSS namespace, seems to be lot of rework, as I have to prepend each tag element with namespace.
Update:
I am trying to integrate a Meteor based app into another Meteor based application, now I don't want the 2 css two mix.
Apply a class to the body per page/module/application.
This way your current CSS will still work and you can override by prepending your new CSS with the body class.
CSS namespace is the only good option. You can edit all rules very easily using multiediting feature of sublime text.
Depending on the size of your application, a very dirty and quick solution is to append the rules that your need to separate files (and apply appropriately)
e.g.
for main.html, you have main.css
about.html, have about.css
however, this is pretty bad practice as your separating all your requests for essentially the same information...
What you COULD do is use a CSS Preprocessing language within your dev environment, like SASS, SCSS or LESS where you could abstract a lot of the specific pages into modular files like, main.sass, about,sass etc... which would be compiled into just one main.css file.
Another thing to consider, is that CSS is how classes, ids and pseudo selectors all effect the specificity of the rules that can be applied.
i.e.
!important > #id > .class > html_element
Here is a great intro article about CSS Specificity for you~
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
I ended up following solution which worked out for me.
For another app which i am integrating, i made its whole body into a container and gave a class to it.
In layout of another app,
<!-- Another application body layout-->
<body>
<div class="another-app-container">
<!-- Here goes whole layout of page -->
<p class='someClass' > ....
<div class='myClass'> </div>
</p>
</div>
</body
In CSS of that app, i applied following CSS rule,
.another-app-container * .someclass{
// CSS rule goes here
}
.another-app-container * .myClass {
// CSS rule goes here
}
Beauty of CSS i got here is, '*' which applied the CSS rules even it has lot of nesting of elements CSS.
So, it segregated the CSS for my own from another application
I want to know what things can be done "ONLY" with CSS , that are not available using dynamically updated style "attributes" using Javascript. So far I know:
Media queries
Pseudo tags
Any more?
Update:
This question was closed but I asked it as I am trying to decide on the technology to use for a project, but one of the options cannot use CSS style sheets, and can only manipulate the style attribute using javascript.
Inline style attributes can only contain property declarations (e.g. width: 10px or color: red). They can't contain any other CSS constructs: not selectors, at-rules (e.g. #import, #media, #font-face), etc. Just property declarations.
However, they play a big role in the cascade: any styles for an element with that attribute take highest precedence (after considering !important of course).
There's actually an entire module devoted to style attributes, by the way, but it's not essential reading for authors.
So, anything that isn't a CSS declaration, is only possible in a stylesheet, not a style attribute. Not sure if that's what you're asking...
Note that media queries and #media rules are not the same thing; media queries can exist in areas outside of stylesheets too, like HTML's media attribute, where they're next most commonly found.
I believe pseudo classes (:hover etc..) and pseudo elements (:after, :before) cannot be added/manipulated via JS (via the style property i mean) because they are not part of the DOM.