I am dealing with a complex page with a lot of CSS files (that were not created by me). I am fighting with a CSS style that is not on the more obvious places (css files) that I can find and I don't have a clue where it is being define.
Is there any tool available that can tell me the file where a particular property of a class or id is being defined (having in mind that this property can be inherit from other definition)?
Chrome Devtools enables you to quickly do this.
Related
I'm debugging and modifying some code with html files and related css rule files (I'm not the initial developer).
How can I build a map (graphical map, should be fine) to find and check all relationships between html tags and corresponding css rules? Of course, I could use browser developing tools, but it would be more efficient a general mapping scheme.
I mean, in VSCode the CSS Navigation is able, starting from a css class name inside a html file, to search and find the corresponding css file containing that rule, as follows:
But this refers to the single css rule selected from the developer inside a html file.
Is there any tool/best practice to do the same, but over the whole html file?
Thank you
Marco
I am using Visual Studio Code, is it possible to change a class name for instance only in the CSS file and this change is also applied in the HTML document? or vice verse, changing the class name in HTML and seeing it change in the CSS file.
Full disclosure, I don't use Visual Studio, but a quick search looked like this is what you may be looking for?
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
Unless I'm misreading?
At the time of writing, this feature does not exist in VS Code.
VS Code is currently unable to know if the same CSS class is referenced in other files, so refactoring across multiple files wouldn’t work.
If you have your cursor on a CSS selector and you press Shift + F12 to find all references, you will find references to the class name only within the same CSS file, even when you are using the class in your HTML.
There is an open issue for implementing cross-file IntelliSense for CSS classes and ids. This might lead to supporting refactoring across HTML and CSS files in the future.
I am developing a web product, that when used, it generates code that the users would embed in their site.
The generated code contains HTML, JavaScript, and CSS. And when embedded in a page, it will show along with other content in that page that I have no control over. In other words, the code generated by my product would be embedded in a webpage that already has other content in it. I do not have control over the styling and content of that page.
Now, I am worried about styling naming conflicts. Assume I am using a CSS class named .amazing-color and it styles certain components a certain way.
Assume that a web page that uses my code coincidentally had a styling also named .amazing-color which would have different styling code, and may overwrite my own styling.
My question is, how can I prevent this from happening? How can I prevent naming conflicts in CSS?
You may suggest that I have complex names for my styles, so I would use .my-super-amazing-color-212321, but that would lead to complex CSS classes that are not readable. I think a better solution would be by using namespaces. However I am not sure if there are namespaces in CSS, and if they exist, how can I use them. So, are there name spaces in CSS? Can you provide a sample code on using them?
Thanks.
First of all, you're not asking about namespaces in CSS, but namespaces in classes. Classes are an HTML feature, not a CSS one.
Now, there's no formal namespacing mechanism for classes, but a convention in such situations is to use a common abbreviation or initialism as a prefix for all the classes that you use. So you might use "mwp-" for "My Web Product".
Since you are generating the HTML, CSS and JS, you can probably make this prefix configuable, so users of your product can choose a different prefix if it clashes.
Finally, make it clear in your documentation for using your product what prefix you are using and how someone using your product can change the prefix if they need to.
I am currently in a 5-7 large development team creating a really large website with lots of pages and features.
I feel like we are in such a situation where a developer can change the style sheet to suit his own needs, but is unaware of the 1000 places where it probably change it for something else. I cannot blame him either, since I know it's hard to check everything.
It's a total mess.
I know that using one single style sheet file saves bandwidth and prevents duplicated code and maintenance, but I cant help wondering - is using style sheets a good idea for big sites, or should it be more object/element oriented.
Let's say you forget about the crazy large CSS and you define the CSS on each element instead. So each time you render a GreenBuyButton, it has the "style='bla bla bla'" on it. And this is pretty much done for all elements.
This will increase the bandwidth, but it will not create duplicated code.
Could this be a good idea or how does really large teams work on a single website do with CSS to avoid it being a mess?
Why don't you create multiple CSS sheets depending on the area of the site?
blog.css
accounts.css
shopping.css
Then you could have a serverside script (say PHP) combine all CSS into 1 sheet which will get you the same result of 1 small file (could use a minimizer as well).
Check your overall site with a CSS checker to find duplicates (css defined) and manage it that way.
Otherwise communication is key between your team, who develops what, and so people don't duplicate CSS definitions. A master CSS keeper would be best suited to manage the CSS styles, besides your team should have an agreed upon style and not go rouge creating their own unique styles.
My recommendation would be to use the CSS rules on specifity to help you. For each CSS that is not global, put an activate selector on, for example
.user-list .p {
font-size: 11pt
}
.login-screen .p {
font-size: 12pt
}
This will make it easy to identify what rules are for which pages, and which rules are global. That way developers can stick to their own set of styles, and no mess up anyone else's.
Change how you write CSS.
Instead fo treating every area of the website like a specific piece of markup that needs styling, start defining broad classes.
Enforce some rules. Like, "All <ul> have a specific look for this project." If there are multiple ways you want to style an element, start using classes. This will keep your website looking uniform throughout. Uniformity reduces broken layout.
Create building block classes like a "framework" of sorts. This has helped me so often that I never start a project without doing this first. Take a look at the jquery-ui themeroller framework to give you the idea. Here's an example:
.icon { display:block;width:16px;height:16px;}
.icon-green { background:url(/green.png);}
.icon-blue { background:url(/blue.png);}
Then on the elements:
<span class="icon icon-green"></span>
<span class="icon icon-blue"></span>
Breaking your styles up into their building blocks like this and using multiple classes on the element will keep your team members from having to change styles to suit their needs. If a particular styling quirk is not available they can define a new set of classes.
UPDATE:
Here is an example of how I used this method: Movingcost.com. Huge website, multiple different sections and pages, and only 252 lines of uncompressed css. Actually, these days I break things down further than I did on the movingcost project. I probably would have gone through those elements at the bottom of the stylesheet and figured out how to combine some of those into classes.
Multiple CSS files and combine in code
While doing development I found out that doing it the following way seems to be reasonable and well suited to development teams:
Don't put any styling into HTML. Maintainability as well as lots of head scratching why certain things don't display as expected will be really bad.
Have one (or few of them) global CSS that defines styles for global parts. Usually defines everything in template/master. Can be bound to master page or to generic controls used on majority of pages.
Have per-page/per-control CSS files when they are actually needed. Most of the pages won't need them, but developers can write them
Have these files well structured in folders
use naming and formatting guidelines so everyone will be able to write/read code
Write server side code taht will combine multiple CSS files into a single one to save bandwith.
You can as well automate some other tasks like auto adding per-page CSS files if they're named the same as pages themselves.
Doing it this way will make it easier to develop, since single CSS files will be easier to handle due to less content and you will have less code merging conflicts, because users will be working on separate functionality most of the time.
But there's not feasible way of automating CSS unit tests that would make sure that changing an existing CSS setting won't break other parts of your site.
My favorite override trick is to assign the id attribute on the <body> of each page. It's an easy way to make page specific changes without breaking out a separate stylesheet file.
You could have the following html
<body id="home">
<h1>Home</h1>
</body>
<body id="about">
<h1>About</h1>
</body>
And use the following css overrides
h1 {color: black}
#about h1 {color: green}
The home page gets the default css while the about gets overridden.
Using style sheets on large sites is an excellent idea. However, it only really works when you apply your team standards to the style. It makes sense to have a singular template controller that links your style sheet(s). It also makes sense to appoint someone on the team as "keeper of the style" who all changes to the style sheet should go through before making substantive changes.
Once the style standards are agreed upon and defined, then all of the controls in the site should implement the styles defined. This allows developers to get out of the business of coding to style and simply coding to the standard. Inputs are inputs, paragraphs are paragraphs, and floating divs are a headache.
The key is standardization within the team and compliance by all of the developers. I currently lead a team site that has upwards of 30 style sheets to control everything for layout, fonts, data display, popups, menu and custom controls. We do not have any of these issues because the developers very rarely need to edit the style sheet directly because the standards are clearly designed and published.
The answer is in the name. The reason it's called cascading style sheets is because multiple can be combined and there are decent rules defined on which one takes preference.
First of all, doing all your styling inline is a ridiculous idea. Not only will it waste bandwidth like nothing else, it will also result in inconsistency. Think about it for a while: why would changing a line of css 'break' another page? That indicates your css selectors are poorly chosen.
Here are my suggestions:
use one css file for the basic site look. This css file is written by people doing mainly design, and as a result the site has a consistent look. It defines the basic colors, layout and such.
use another css file per 'section'. For instance, a 'shopping' section will use components that are nowhere else on the site. Use that to define section-specific stuff
put page-specific styling directly in the page (in the header). If this section becomes too big, you're doing something wrong
put exceptional styling directly on the components. If you're doing the same thing three times, abstract it out and use a class instead.
choose your classes wisely and use the semantics for naming. 'selectedSalesItem' is good 'greenBold' is bad
if a developer changes a stylerule and it breaks the rest of the site, why did he need to change it? Either it's an exceptional thing for what he's working on (and should be inlined) or it was basically broken on the rest of the site as well, and should be fixed anyway.
If your css files become too big to handle, you can split them up and merge them server-side, if you want.
You don't want to define CSS for each element because if you ever need to make a change that affects many elements one day, say the looks of all the buttons or headers, you will be doing a lot of Search/Replace. And how to check if you forgot to update one rule to keep your site consistent?
Stephen touched on a very strong point in CSS. You can assign multiple classes to an element.
You should define some basic rules that "ordinary" developers can't touch. They will provide the consistency through the site.
Then developers can assign an extra class to personalize any property. I wouldn't assign more than two classes though: a global and a personalized.
Considering you already have this huge stylesheet in your hands, I'm not sure how you will pick which one of the 7 developers will have to sit down through a month and organize it. That is probably going to be hard part.
First off, you need to extract your website's default element styling and page structure into a separate stylesheet. That way people understand changing those rules affects the entire site's appearance/structure, not just the page they're working on.
Once you do that, all you really need to do is document / comment all of your code. A person is a lot less likely to write duplicate code in a well-documented stylesheet, and that is a fact.
Suppose A.css styles B.html. What tools/techniques are there to programmatically reduce the size of A.css while holding its styling effects on B.html constant? Here are some techniques I would imagine such a tool using:
Remove redundancies in A.css. For example, if the same class is defined twice you can remove the second definition without affecting semantics. This seems pretty easy.
Remove style definitions that aren't used. Does A.css style any elements that don't appear in B.html? If so, remove them.
Combine styles where appropriate. If A.css defines styles for div.x and div.y and every div that happens to have class x also has class y, one could combine the class definitions in A.css.
A different strategy would be to have a tool that examines the computed styles of each element in a piece of styled HTML and spits out the minimal style sheet that would preserve the computed styles. Does something like this exist?
UPDATE
Let me explain how I got in this situation. The CSS file in question is for an email, and it was created by basically copying a similar CSS file that we used in an associated web page. Because the HTML in the email is a proper subset of the HTML in the web page from which the CSS came, some of the CSS in the email is superfluous.
Generally you just remove all unnecessary whitespace. Remember to keep the original as well, so you don't lose readability when editing the site later.
I think making sure css files are gzipped by the webserver is your biggest bandwidth saver.
"Does something like this exist?"
Of course. See the CSS Tidy tool.
I do not believe that it removes unused css, though. See Sitepoint's Dust Me Selectors for that.
Unless you have an usually large CSS file, I would opt for readability and modifiability of the CSS file rather than having a smaller CSS file. Since CSS files are static (for the most part), most browsers will do a really good job of caching them. While all your suggestions are good ones, combining things that are the same now for different document elements can wreak havoc in the future when you only want to change one of those items.
I'm not aware of tools to remove redundant styles, but if you want to reduce file size for performance reasons there are several minifing tools out there:
See:
The art of Scaling
A better CSS minifier
A good idea is to compress your css.
This isn't zip-style compressing, it's actually re-writing the CSS (aka minification).
Of course, you can use mod_gzip or mod_deflate as well.
OK, you don't want a small file for the KB (using gzip compression is more effective!) but to prune the obsolete styles, which indeed would improve maintenance.
I don't know if the ideal tool you want exists, but Firebug (an extension for Firefox) can tell you want are the CSS elements used by a given HTML element. Not automated, but still a precious tool.
You can also edit the live CSS, to see if removing a style element alters the HTML page.