Let's say I got the following in my index.html and I'm using Bootstrap:
<head>
bootstrap stylesheet
main.css stylesheet
...
<button class="btn btn-primary">Button</button
Btn-primary is a class for making the button blue.
I wanna change all my primary buttons to red for say.
Is it bad I go straight to the Boostrap class or should I make my own? In main.css:
btn-primary{ background: red; }
VS
btn-red{ background: red; } //applying that class to the button in question obviously
What I'm asking is only about good practice.
I know that both work.
I just wanna know if I do use bootstraps' classes for that I'm doing something that's generally not well accepted.
Good practice would entail not editing the framework code within the files that are provided by the framework.
In my practice I use an override.css file (or section of a file) to specifically override framework styles.
ex:
/* Bootstrap.css */
.btn-primary {
background-color: not-red;
}
/* Override.css - load this after Bootstrap.css */
.btn-primary {
background-color: red;
}
**Note that this is a simplified version, and that sometimes the framework will have more specific selectors than simply a class style, for instance form .btn-primary for <form> buttons. In this case you may opt to out-specify the framework, or use !important on your style.
If Bootstrap updates their framework, it's simple for me to update and keep my styles. This also addresses the issue of redundant classes, as you can still utilise Bootstrap classes with your own styles.
Related
I have understood the concept of CSS modules so much that I am convinced that I do not want to do anything else that that for the future.
Currently I am trying to refactor an existing app to use CSS modules, the app has used classic sass with BEM methodology since.
Before I describe my problem I want to make clear that I undestand that I am addressing an issue that is not really within the domain of CSS modules. One should apply styles solely for usage inside a single module. At the most one should compose CSS classes with other CSS classes of other modules. But basically: You build an (HTML-)module and you use CSS modules to style that module and that's that.
Here's the problem:
In the process of refactoring there is one single issue that derives from having had a SASS-based style system. I can't find a valid method to work with a CSS class within a CSS modules environment when this class should work in combination of another class from another module.
Example in SASS:
[page.scss]
.wrapper {
margin: 0;
}
[headline.scss]
.headline {
color: green;
}
.wrapper {
.headline {
color: orange;
}
}
As you can see: One module (page) defines a CSS class "wrapper", another module defines a CSS class "headline". And, additionally, the class "headline" should behave a bit differently when placed inside the class "wrapper".
Again, I know that this is not really the domain of CSS modules. But I really would like to know if this is somehow doable with CSS modules? The "composes"-feature of CSS modules does not really fit here...
This is a common issue when migrating to CSS Modules. In short, a css module cannot override a style from another css module, and this is by design. Styles are supposed to live with the components that render them, and nowhere else.
What you can do to refactor this is to create a component style variant and explicitly set the variant through a prop when rendered within your wrapper.
For example, suppose your headline component currently looks something like this:
CSS
.headline {
color: green;
}
JSX
import styles from "Headline.css";
const Headline = () => {
return (
<div className={styles.headline} />
);
}
Rather than trying to override the .headline class name from somewhere else, you can create a variant class name that you toggle through a prop:
CSS
.headline-green {
color: green;
}
.headline-orange {
color: orange;
}
JSX
import styles from "Headline.css";
const Headline = ({orange}) => {
return (
<div className={orange ? styles.headlineOrange : styles.headlineGreen} />
);
}
And when you render it from your wrapper, set it to the orange variant:
<Headline orange />
Tip: you can use composes to eliminate duplicate common styles between your variants.
In my Angular2 project, I extract some common css into a global-style.css file and link this in index.html.
I also link third-party css in index.html but third-party css conflict with my global-style.css.
Let's see a concrete example.
In my global-style.css I have a style
.display-none { display: none; }
In bootstrap css there is a style
input[type="file"] { display: block; }
When I want to hide file picker I write the code
<input class="display-none" type="file">
But file picker still display because input[type="file"] have higher specificity than .display-none. (according to https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)
There is a Plunker live demo: https://plnkr.co/edit/7HOT1if3ZhtSGu0UXOZX?p=preview
My question is, how to make my global-style.css have higher priority than other third-party css?
I know the way declaring !important but is there any other more elegant way? Thanks for any answer!
Here are some things you might be looking for:
Put the bootstrap link before your 'global-style.css'. This will solve your problem as the order of the links is the order that the CSS will be brought in.
Just use !important. A 10 character solution isn't not elegant.
I have three big CSS files which have many classes. Same of those classes have the same name but are in different files.
Example:
CSS1:
...
.btn-primary {
background: #000;
}
...
CSS2:
...
.btn-primary {
background: #fff;
}
...
and CSS3:
...
.btn-primary {
background: #4285F4;
}
...
Let's assume that all three CSS are called in my HTML page.
Is there a way to select in my web page only the .btn-primary class from CSS3? If yes, how could I do it?
No.
If a stylesheet is loaded into a page, and it has a ruleset with selector that matches an element, then it will apply to that element.
Rules which provide conflicting information for a particular property will overwrite each other in the standard cascade order.
Not as is, but you could alter your style sheets so that it reads like this:
.btn-primary, .btn-primary.style1 { ... }
.btn-primary, .btn-primary.style2 { ... }
.btn-primary, .btn-primary.style3 { ... }
Then you could get the specific styles by using the following class:
<a class='btn-primary style2'>Stylesheet 2</a>
In short, you'll need to add some sort of additional method of narrowing down the different styles.
--
Another possibility would be to convert your css files to scss like so:
.style1 {
.btn-primary { ... }
}
You could then use the styling from specific sheets like so:
<div class='style1'>
<a class='btn-primary'>Stylesheet 1</a>
</div>
An apologetic into: the following is, in my opinion, a wrong solution. I wanted to add it as I can think of situations where you have to find this kind of hacky ways rather than change the css files.
Generally speaking, as Quentin and Bryant pointed out - there is no "namespacing" for css files and so if you load all the css files you will end up with the last overriding file's selector classes (among the name-conflicted ones) and won't be able to choose between them.
If (for some odd reason) you don't care about Chrome users - you can probably use the cssRules or rules properties of the document.styleSheets[i] object - for each loaded stylesheet file (i being the number of the file). As noted, this method does not work for Chrome. Fore some reason both cssRules and rules are null in Chrome for each of the styleSheets[i].
My hacky solution:
After loading all the css files as you need,
In javascript code, read the css file you choose as a text file. You can use AJAX for that - see this question and its answers
Search for the selector you want in the text you got and extract that string. You can parse the whole file for example and take the relevant part.
In searching how to help with this step I came across the document.styleSheets[i].cssRules object and the method that doesn't work in Chrome.
Build a style element around it and append that style element to the head element (here's an answer that shows how to create and append style elements to the head element).
This seems like a wrong way to do it from several reasons (performance, elegance, readability) - and probably means the design of the css files is not right for your project (look at Bryant's suggestions) - but I wanted this answer to be here, as there is a way to do it, albeit a hacky one, and if for some reason you can't change the css files and have to use them as is - then here you go.
I don't know what is the usage of this, I mean having three files and storing different styles and even same styles into them.
But there are some tools that will normalize and minify your CSS, for example, take a look at Nano CSS
But, as other answers says it is not possible to say what class from what file apply to this page, and they will overwrite and the last style will apply for the element.
Here is also an example to find out how overwrite works:
#test-link {
display: block;
text-decoration: none;
background: red;
color: white;
}
#test-link {
background: green;
}
#test-link {
background: orange;
}
#test-link {
background: black;
}
<a id="test-link" href="javascript:void(0);">Test link</a>
As you see, just the last style applied for the background color
I am working on a Rails project that is just starting. We want to use twitter bootstrap as a base for our styles, at the beginning we would simply use bootstrap's class names directly on the HTML code, just like is shown in bootstrap's documentation, but after reading the following posts:
Lessons learned in maintainable css
Please stop embedding Bootstrap classes in your HTML
it became clear why that's not the proper why to use bootstrap, so after some more readings:
Decouple Your CSS From HTML
smacss
among other, it seemed that using sass #extend was the proper way to avoid using bootstrap's class names, so instead of doing this:
<button type="submit" class="btn">Search</button>
we would do this:
<button type="submit" class="button">Search</button>
and our sass code would look like this:
.button {
#extend ".btn";
}
The problem with that approach, besides the bunch of extra selectors that will be added each time we extend a bootstrap class just to use a different name, is that in cases where bootstrap uses selectors like this:
.form-search .input-append .btn, .form-search .form-input-append .btn {
border-radius: 0 14px 14px 0;
}
the button won't get the right style because sass will not apply that same rule to our custom class name, I mean, sass is not doing this:
.form-search .input-append .btn, .form-search .input-append .button,
.form-search .form-input-append .btn, .form-search .form-input-append .button {
border-radius: 0 14px 14px 0;
}
So I wonder, is this the right way to avoid embedding bootstrap's class names into HTML, if so, how should I handle this problem (it happens frequently)? if not, what would be a better way to use custom class names but still get the styles from bootstrap.
I really appreciate your thoughts on this. Please keep in mind that I am just learning about overall web design (css, sass, less, html, js, etc.).
When you rename .btn to .button, you also should rename .form-search to .form-searchnew etc?
In that case your sass code in the example above should be something like:
.form-searchnew .input-appendnew .button {
extend(.form-search .input-append .btn);
}
Which make sense (i don't know sass) and results in the css you expect.
I think bootstrap is not about css only. Bootstrap is about css, html(structure) and javascript. Even when you separate css from html i would not easy to migrate to an other framework. Beside the css you will have to change the html structure and javascript call too.
Example migrate from Twitter's Bootstrap 2 to 3 (see: Updating Bootstrap to version 3 - what do I have to do?). I also wondered if you could migrate by extending the old classes to the new css (see: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/). After reading the migration guide, i think you couldn't.
Other solutions. Angular JS decouples Twitter's Bootstrap from javascript. Also in this case migrations does not seem to be painless see: Angular Dialog directives with Bootstrap 3
Maybe also read this post: http://www.jasonwong.org/post/45849350459/migrating-from-zurb-foundation-twitter-bootstrap-to. It refers to Bourdon and Neat.
Example from their website:
<!-- HTML markup for the section right below this code block -->
<section>
<aside>What is it about?</aside>
<article>Neat is an open source semantic grid framework built on top of Sass and Bourbon…</article>
</section>
// Enter Neat
section {
#include outer-container;
aside { #include span-columns(3); }
article { #include span-columns(9); }
}
// And the result is...
As they say: "it relies entirely on Sass mixins and does not pollute your HTML" which seems the way you're looking for.
I recommend you have a look at sass placeholder classes http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholders in order not to bloath your css. Most likely you won't be using every single element included in bootstrap and placeholders only get written to your stylesheet if they are actually extended in your code.
Also, I think people tend to get confused about how css frameworks work and how decoupling css and html actually works.
For very large websites (or ones that you expect eventually to grow very large), where performance and css file size is crucial, some kind of OOCSS approach is your best bet. And this means inevitably that you have formatting code directly in your HTML.
If you can allow yourself to be a little less efficient and want your HTML clean, make sure to use semantic classes (examples for buttons: call-to-action, call-to-action-secondary, submit, btn-primary, btn-corporate-color, etc...)
Also remember to decouple your JS from CSS! use special classes for attaching behaviour (example js-submit, js-call-to-action, etc....)
Last but not least: don't plan for updating your css framework. These frameworks are meant to give you a headstart, not to be your overall design solution. Extend them, adapt them, make them your own, invest in design and create your own look in order to make your app unique.
If what makes you think of updating is a worry to keep up with standard changes, better use compass mixins.
Use #extend, but don't quote selectors:
.button {
#extend .btn;
}
Then you'll see that Sass extends related selectors too, like you want (.form-search .input-append .btn etc.).
… besides the bunch of extra selectors that will be added each time we extend a bootstrap class just to use a different name …
#extend works by copying selectors. If you don't want that, you can "extend" in HTML instead -- i.e. add Bootstrap's class names. :)
For being new to most of this, you're on the right track; the resources you've been reading are excellent. But, I think the concerns you have might not be justified:
...the button won't get the right style because sass will not apply that same rule to our custom class name...
In fact, I think you must be mistaken. According to the Sass documentation:
#extend works by inserting the extending selector (e.g. .seriousError) anywhere in the stylesheet that the extended selector (.e.g .error) appears.
See http://sass-lang.com/documentation/file.SASS_REFERENCE.html#how_it_works for the full code example.
Your original solution was actually correct. Use extends, but without the quotes:
.button {
#extend .btn; //no quotes
}
I tested this using your example, and it works correctly. Sass copies all the selectors with ".btn" and on those newly created selectors, it replaces ".btn" with ".button".
Also, if Sass produces too much duplication for your liking, don't worry about it (so long as you are following best practices as pointed out by the links you posted). Duplicate code is easily compressed if the server uses gzip or the equivalent; the client shouldn't notice any slower loading times, although it might take slightly longer to "unzip" the CSS. As for CSS selector speed, don't worry about that either; the only case where speed matters for selectors is on the JavaScript side, particularly with jQuery. For your Sass code, simply follow best practices for maintainability (notably, modularization as you are trying to do, i.e. SMACSS) and you'll be good to go.
The answers given by sam and tjklemz will help you resolve your immediate technical challenge, but it's possible to decouple your CSS and HTML even more. I'll give an example below, but keep in mind that this is just a quick example to demonstrate the power of mixins/extending CSS classes.
I'd also strongly recommend checking out the ZURB Foundation framework, as it is natively SASS, and designed with this style of development in mind.
For example:
<body>
<div id="my-header">
<h1>My Company</h1>
<h2>My Tagline</h2>
</div>
<div id="my-main">
<div class="my-widget">
<h1>Widget Title</h1>
<a>Widget Option 1</a>
<a>Widget Option 2</a>
</div>
</div>
</body>
With the accompanying SCSS:
//these examples wouldn't really work
//because bootstrap needs more markup
#my-header {
#extend .navbar;
}
#my-header h1 {
#extend .branding;
}
#my-main {
#extend .container;
}
//good example
.my-widget {
#extend .well;
#extend .hero-unit;
}
.my-widget a {
#extend .btn;
}
I just started to port twitter's bootstrap to GWT (see the github project here and a very ugly demo here), but, I was having a log of issues with bootstrap styles vs Gwt styles.
Bootstrap put a border-top in tr/td elements, and GWT components basically use tables everywhere. In the demo you can see that bug in the left VerticalPanel.
So, I was looking for a way to make GWT components ignore bootstrap styles, and I have no idea how to do this.
Is there a simple way to make it work right?
Thanks in advance.
It's possible, but somewhat complex to do something with a Linker in GWT. The high-level idea would be:
Put all your GWT components in a <div id="gwt">...</div>
Add a linker to the GWT Module file that will process CSS files.
In the linker, transform the GWT CSS (e.g., standard.css) to insert a #gwt before each selector rule.
The first part is easy, just add an id to your root element.
The second part is also easy, simply add code that looks like this to your Module.gwt.xml file:
<define-linker name="cssLinker" class="com.you.bootstrap.linker.CssRenamingLinker" />
<add-linker name="cssLinker"/>
The hard part is implementing the Linker. It's possible to do parse it by hand, but you might find it easier to use something like SAC.
Using the Linker, you can transform your CSS by inserting a #gwt before each selector. Using SAC, you might do that by overriding all the DocumentHandler methods to simply emit each of their arguments to an OutputStream. In DocumentHandler.startSelector() you would first emit "#gwt " before each selector.
[Edit]
This assumes that GWT's standard.css defines styles that override the bootstrap styles. If not, you might have to 'enhance' the GWT CSS with defaults. There's a list of W3C recommended defaults here.
The benefit is that this is future-resistant - if GWT styles change or if bootstrap styles change, this should be robust.
Hope that helps,
Adam
You can simply add a style to one of your root GWT objects and then simply override the bootstrap styles to remove those messy borders:
<div class="gwt">
... some other GWT-content
</div>
and in your CSS:
.gwt tr, .gwt td {
border-top: 0px;
}
Of course if you need to embed some bootstrap elements in your GWT elements then you will have to hack around and do:
<div class="gwt">
... some other GWT-content
<div class="bootstrap">...
... Bootstrap elements
</div>
</div>
and in your CSS:
.bootstrap tr, .bootstrap td {
border-top: 1px; // Whatever bootstrap style puts
}